/* ==========================================================================
  Bright Floppy · colors_and_type.css
  The canonical tokens, type, component primitives, and Y2K effects., type, component primitives, and Y2K effects.
  Load this file from every artifact; do not redefine tokens locally.

  The system is dark-first. The canvas is near-black (#0a0a0f), surfaces are
  raised dark panels (#14121c), text is white. Hot Magenta is the signature
  accent; Cyan Pop, Lemon Zest, and Mint are secondary signals used sparingly.
  Cream Paper (#FAF6EF) is reserved for the optional .bf-light mode.
  ========================================================================== */

/* ---------- Google Fonts: Y2K display faces ---------- */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Outfit:wght@300;400;500;600;700;800;900&family=VT323&family=Press+Start+2P&display=swap');

/* ---------- @font-face: Inter (local woff2) ---------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Inter-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Inter-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Inter-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Inter-Bold.woff2') format('woff2');
}

/* ---------- Brand tokens (dark Y2K default) ---------- */
:root {
  /* Palette ,  BF brand hexes on dark canvas */
  --bf-bg:            #0a0a0f; /* Y2K near-black canvas          */
  --bf-surface:       #14121c; /* raised dark panel              */
  --bf-surface-2:     #1c1928; /* secondary raised surface       */
  --bf-fg:            #ffffff; /* primary text (Soft White)      */
  --bf-muted:         #8a8aab; /* secondary text                 */
  --bf-text-faint:    #5a5a6e; /* tertiary text                  */
  --bf-border:        rgba(255,255,255,0.08);  /* hairline white */
  --bf-border-strong: rgba(255,255,255,0.2);   /* visible stroke */
  --bf-accent:        #ff2bd6; /* Hot Magenta, signature         */
  --bf-accent-2:      #00d4ff; /* Cyan Pop, secondary            */
  --bf-accent-3:      #ffd84d; /* Lemon Zest, tertiary           */

  /* BF brand reference (for docs / palette swatches) */
  --bf-cream:         #faf6ef; /* Cream Paper (light mode bg)     */
  --bf-ink:           #0d0d0d; /* Ink Black (light mode fg)      */
  --bf-mint:          #b8e6cf; /* Soft Mint                       */

  /* Accent hover/active pairs (on magenta axis) */
  --bf-accent-hover:  #ff66e0;
  --bf-accent-active: #cc11ab;
  --bf-accent-bg:    rgba(255,43,214,0.12);   /* magenta-tinted surface   */
  --bf-accent-bg-2:  rgba(0,212,255,0.10);   /* cyan-tinted surface      */
  --bf-accent-bg-3:  rgba(255,216,77,0.10);  /* lemon-tinted surface     */
  --bf-accent-border: #ff8fe2;
  --bf-accent-text:   #ff66e0;                 /* readable magenta-light   */

  /* System / state colors */
  --bf-success:       #19a974;
  --bf-success-bg:    rgba(25,169,116,0.12);
  --bf-success-border: #2ec98a;
  --bf-warning:       #e0a100;
  --bf-warning-bg:    rgba(224,161,0,0.12);
  --bf-warning-border: #f0cc63;
  --bf-error:         #e5484d;
  --bf-error-bg:      rgba(229,72,77,0.12);
  --bf-error-border:  #f06b6f;
  --bf-red:           #d53831; /* Y2K red (Figma-derived)        */
  --bf-info:          #1677ff;
  --bf-info-bg:       rgba(22,119,255,0.12);
  --bf-info-border:   #4d9bff;

  /* 10-step magenta ramp (derived from --bf-accent) */
  --bf-primary-50:  #ffe5f7;
  --bf-primary-100: #ffc2ec;
  --bf-primary-200: #ff8fe2;
  --bf-primary-300: #ff66d5;
  --bf-primary-400: #ff44cc;
  --bf-primary-500: #ff2bd6;
  --bf-primary-600: #e11bbd;
  --bf-primary-700: #c70fa3;
  --bf-primary-800: #a30a82;
  --bf-primary-900: #7a0066;

  /* Supporting ramps */
  --bf-cyan-50:  #e5fbff;
  --bf-cyan-500: #00d4ff;
  --bf-cyan-700: #009fbc;
  --bf-lemon-50: #fff7cf;
  --bf-lemon-500: #ffd84d;
  --bf-lemon-700: #b89300;
  --bf-mint-50:  #eaf8f0;
  --bf-mint-500: #b8e6cf;
  --bf-mint-700: #4fa67e;

  /* Spacing (8px baseline) */
  --bf-space-1: 4px;
  --bf-space-2: 8px;
  --bf-space-3: 12px;
  --bf-space-4: 16px;
  --bf-space-5: 24px;
  --bf-space-6: 32px;
  --bf-space-7: 40px;
  --bf-space-8: 48px;
  --bf-space-9: 56px;
  --bf-space-10: 64px;
  --bf-space-12: 96px;

  /* Radius ,  Y2K large + functional scales */
  --bf-radius-xs: 4px;
  --bf-radius-sm: 6px;
  --bf-radius:    8px;
  --bf-radius-md: 12px;
  --bf-radius-lg: 16px;
  --bf-radius-xl: 24px;
  --bf-radius-2xl: 32px;
  --bf-radius-pill: 9999px;

  /* Figma-derived Y2K radii (for retro frames) */
  --bf-y2k-r-frame: 88px;
  --bf-y2k-r-panel: 80px;
  --bf-y2k-r-card: 64px;
  --bf-y2k-r-btn:  36px;

  /* Border / line */
  --bf-border-width: 1px;
  --bf-border-width-chunky: 2px;
  --bf-border-width-poster: 3px;

  /* Shadows ,  sticker offset + soft depth */
  --bf-shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --bf-shadow-md: 0 4px 0 rgba(255,255,255,0.06);   /* chunky white offset   */
  --bf-shadow-pop: 0 4px 0 rgba(255,255,255,0.1);    /* sticker peel          */
  --bf-shadow-float: 0 8px 32px rgba(0,0,0,0.6);      /* floating card depth  */
  --bf-shadow-sticker-accent: 6px 6px 0 rgba(255,43,214,0.3);

  /* Type ,  families */
  --bf-font-display: 'Bebas Neue', 'Outfit', 'Inter', system-ui, sans-serif;
  --bf-font-body: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
  --bf-font-mono: 'VT323', 'SFMono-Regular', Consolas, monospace;
  --bf-font-pixel: 'Press Start 2P', monospace;
  --bf-font-condensed: 'Bebas Neue', 'Inter', sans-serif;
  --bf-font-ui: 'Inter', system-ui, -apple-system, sans-serif;

  /* Type ,  sizes */
  --bf-fs-display: 56px;
  --bf-fs-h1: 40px;
  --bf-fs-h2: 32px;
  --bf-fs-h3: 24px;
  --bf-fs-h4: 20px;
  --bf-fs-body-lg: 18px;
  --bf-fs-body: 16px;
  --bf-fs-body-sm: 14px;
  --bf-fs-caption: 12px;

  /* Type ,  line heights */
  --bf-lh-display: 64px;
  --bf-lh-h1: 48px;
  --bf-lh-h2: 40px;
  --bf-lh-h3: 32px;
  --bf-lh-h4: 28px;
  --bf-lh-body-lg: 28px;
  --bf-lh-body: 24px;
  --bf-lh-body-sm: 20px;
  --bf-lh-caption: 16px;

  /* Type ,  weights */
  --bf-fw-regular: 400;
  --bf-fw-medium: 500;
  --bf-fw-semibold: 600;
  --bf-fw-bold: 700;
  --bf-fw-heavy: 900;

  /* Type ,  tracking */
  --bf-track-display: -0.02em;
  --bf-track-body: 0;
  --bf-track-eyebrow: 0.08em;
  --bf-track-caps: 0.1em;
  --bf-track-pixel: 0.05em;

  /* Motion */
  --bf-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --bf-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
  --bf-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --bf-dur-fast: 120ms;
  --bf-dur-base: 200ms;
  --bf-dur-slow: 280ms;
  --bf-dur-page: 600ms;

  /* Layout */
  --bf-content-max: 1200px;
  --bf-app-max: 1440px;
  --bf-page-pad: clamp(16px, 3vw, 48px);

  /* Z-index */
  --bf-z-base: 0;
  --bf-z-elevated: 10;
  --bf-z-sticky: 100;
  --bf-z-drawer: 1000;
  --bf-z-modal: 1100;
  --bf-z-toast: 1200;
  --bf-z-crt: 9998;
}

/* ---------- Y2K chunky surface (poster / sticker / hero) ---------- */
.bf-chunky {
  border: var(--bf-border-width-chunky) solid var(--bf-border-strong);
  border-radius: var(--bf-radius-md);
  box-shadow: var(--bf-shadow-md);
  background: var(--bf-surface);
}

/* ---------- Decorative patterns ---------- */
.bf-pattern-swirl {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><g fill='none' stroke='%23ff2bd6' stroke-width='2' stroke-linecap='round'><path d='M20 130 C 50 80, 110 80, 140 130'/><path d='M20 100 C 50 50, 110 50, 140 100'/><path d='M20 70 C 50 20, 110 20, 140 70'/><circle cx='80' cy='30' r='3' fill='%2300d4ff' stroke='none'/><circle cx='50' cy='90' r='3' fill='%23ffd84d' stroke='none'/><circle cx='115' cy='110' r='3' fill='%23ff2bd6' stroke='none'/></g></svg>");
  background-repeat: repeat;
  background-size: 160px 160px;
}
.bf-pattern-halftone {
  background-image: radial-gradient(rgba(255,255,255,0.06) 1.2px, transparent 1.4px);
  background-size: 10px 10px;
  background-position: 0 0;
}
.bf-pattern-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ---------- CRT effect utilities ---------- */
.bf-crt-scanlines {
  position: fixed; inset: 0; z-index: var(--bf-z-crt); pointer-events: none;
  background: repeating-linear-gradient(0deg,
    transparent 0, transparent 2px,
    rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 4px);
  mix-blend-mode: multiply;
}
.bf-crt-vignette {
  position: fixed; inset: 0; z-index: calc(var(--bf-z-crt) - 1); pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.4) 100%);
}
.bf-rgb-split {
  position: relative;
  transition: text-shadow var(--bf-dur-base) var(--bf-ease-out);
}
.bf-rgb-split:hover {
  text-shadow: -2px 0 var(--bf-accent-2), 2px 0 var(--bf-accent);
}
.bf-glitch { position: relative; display: inline-block; }
.bf-glitch::before, .bf-glitch::after {
  content: attr(data-text);
  position: absolute; top: 0; left: 0; width: 100%;
  clip-path: inset(0 0 0 0);
}
.bf-glitch:hover::before {
  animation: bfGlitchTop 0.2s steps(3) 1;
  color: var(--bf-accent-2); clip-path: inset(0 0 55% 0);
}
.bf-glitch:hover::after {
  animation: bfGlitchBot 0.2s steps(3) 1;
  color: var(--bf-accent); clip-path: inset(55% 0 0 0);
}
@keyframes bfGlitchTop {
  0% { transform: translate(0); }
  33% { transform: translate(-2px, -1px); }
  66% { transform: translate(2px, 1px); }
  100% { transform: translate(0); }
}
@keyframes bfGlitchBot {
  0% { transform: translate(0); }
  33% { transform: translate(2px, 1px); }
  66% { transform: translate(-2px, -1px); }
  100% { transform: translate(0); }
}

/* ---------- Light theme (opt-in with .bf-light) ---------- */
.bf-light {
  --bf-bg:            #faf6ef;
  --bf-surface:       #ffffff;
  --bf-surface-2:     #f5f0e6;
  --bf-fg:            #0d0d0d;
  --bf-muted:         #6b6b6b;
  --bf-border:        #b8e6cf;
  --bf-border-strong: #0d0d0d;
  --bf-accent:        #ff2bd6;
  --bf-accent-hover:  #ff66e0;
  --bf-accent-active: #cc11ab;
  --bf-accent-bg:    #ffe5f7;
  --bf-accent-bg-2:  #e5fbff;
  --bf-accent-bg-3:  #fff7cf;
  --bf-accent-border: #ff8fe2;
  --bf-accent-text:   #7a0066;
  --bf-shadow-sm: 0 1px 2px rgba(13,13,13,0.06);
  --bf-shadow-md: 0 4px 0 rgba(13,13,13,0.08);
  --bf-shadow-pop: 0 4px 0 #0d0d0d;
  --bf-shadow-float: 0 8px 32px rgba(13,13,13,0.12);
}

/* ---------- Base / reset ---------- */
html, body {
  margin: 0;
  padding: 0;
  background: var(--bf-bg);
  color: var(--bf-fg);
  font-family: var(--bf-font-body);
  font-size: var(--bf-fs-body);
  line-height: var(--bf-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--bf-font-display);
  font-weight: var(--bf-fw-bold);
  letter-spacing: var(--bf-track-display);
  color: var(--bf-fg);
  margin: 0;
  text-transform: uppercase;
}

h1 { font-size: var(--bf-fs-h1); line-height: var(--bf-lh-h1); }
h2 { font-size: var(--bf-fs-h2); line-height: var(--bf-lh-h2); }
h3 { font-size: var(--bf-fs-h3); line-height: var(--bf-lh-h3); }
h4 { font-size: var(--bf-fs-h4); line-height: var(--bf-lh-h4); font-weight: var(--bf-fw-semibold); }

p { margin: 0; }
a { color: var(--bf-accent); text-decoration: none; border-bottom: 1.5px solid transparent; transition: border-color var(--bf-dur-base) var(--bf-ease-out); }
a:hover { color: var(--bf-accent-hover); border-bottom-color: var(--bf-accent); }
a:active { color: var(--bf-accent-active); }
code, pre, kbd { font-family: var(--bf-font-mono); font-size: 1.1em; }

/* ---------- Focus ring ---------- */
:focus-visible {
  outline: 3px solid var(--bf-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Eyebrow ---------- */
.bf-eyebrow {
  display: inline-block;
  font-family: var(--bf-font-pixel);
  font-size: 10px;
  font-weight: var(--bf-fw-bold);
  letter-spacing: var(--bf-track-pixel);
  text-transform: uppercase;
  color: var(--bf-accent);
}
.bf-eyebrow--cyan { color: var(--bf-cyan-500); }
.bf-eyebrow--lemon { color: var(--bf-lemon-500); }
.bf-eyebrow--muted { color: var(--bf-muted); }

/* ---------- Button primitive ---------- */
.bf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  min-width: 88px;
  padding: 0 16px;
  border: var(--bf-border-width) solid transparent;
  border-radius: var(--bf-radius);
  background: var(--bf-surface);
  color: var(--bf-fg);
  font-family: var(--bf-font-ui);
  font-size: var(--bf-fs-body-sm);
  font-weight: var(--bf-fw-semibold);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background var(--bf-dur-base) var(--bf-ease-out),
       color var(--bf-dur-base) var(--bf-ease-out),
       border-color var(--bf-dur-base) var(--bf-ease-out),
       box-shadow var(--bf-dur-base) var(--bf-ease-out),
       transform var(--bf-dur-fast) var(--bf-ease-out);
  text-decoration: none;
  user-select: none;
}
.bf-btn:hover { background: var(--bf-accent-bg); transform: translateY(-1px); }
.bf-btn:active { transform: translateY(1px); }
.bf-btn:disabled { background: var(--bf-bg); color: var(--bf-muted); cursor: not-allowed; }

.bf-btn--primary {
  background: var(--bf-accent);
  color: #ffffff;
  border-color: var(--bf-accent);
  box-shadow: var(--bf-shadow-pop);
}
.bf-btn--primary:hover { background: var(--bf-accent-hover); border-color: var(--bf-accent-hover); color: #ffffff; }
.bf-btn--primary:active { background: var(--bf-accent-active); border-color: var(--bf-accent-active); color: #ffffff; }
.bf-btn--primary:disabled { background: var(--bf-surface-2); border-color: var(--bf-border); color: var(--bf-muted); box-shadow: none; }

.bf-btn--secondary {
  background: var(--bf-accent-2);
  color: var(--bf-ink);
  border-color: var(--bf-cyan-700);
  box-shadow: var(--bf-shadow-pop);
}
.bf-btn--secondary:hover { background: var(--bf-cyan-50); border-color: var(--bf-cyan-700); color: var(--bf-ink); }
.bf-btn--secondary:active { background: var(--bf-cyan-500); border-color: var(--bf-cyan-700); color: var(--bf-ink); }
.bf-btn--secondary:disabled { background: var(--bf-surface-2); border-color: var(--bf-border); color: var(--bf-muted); box-shadow: none; }

.bf-btn--tertiary {
  background: var(--bf-accent-3);
  color: var(--bf-ink);
  border-color: var(--bf-lemon-700);
  box-shadow: var(--bf-shadow-pop);
}
.bf-btn--tertiary:hover { background: var(--bf-lemon-50); border-color: var(--bf-lemon-700); color: var(--bf-ink); }
.bf-btn--tertiary:active { background: var(--bf-lemon-500); border-color: var(--bf-lemon-700); color: var(--bf-ink); }
.bf-btn--tertiary:disabled { background: var(--bf-surface-2); border-color: var(--bf-border); color: var(--bf-muted); box-shadow: none; }

.bf-btn--ghost {
  background: transparent;
  color: var(--bf-fg);
  border-color: transparent;
  box-shadow: none;
}
.bf-btn--ghost:hover { background: var(--bf-accent-bg); }
.bf-btn--ghost:active { background: var(--bf-primary-900); }
.bf-btn--ghost:disabled { color: var(--bf-muted); }

.bf-btn--outline {
  background: var(--bf-surface);
  color: var(--bf-fg);
  border-color: var(--bf-border-strong);
  box-shadow: none;
}
.bf-btn--outline:hover { background: var(--bf-accent-bg); border-color: var(--bf-accent); }
.bf-btn--outline:active { background: var(--bf-surface-2); border-color: var(--bf-accent-active); }
.bf-btn--outline:disabled { background: var(--bf-bg); border-color: var(--bf-border); color: var(--bf-muted); }

.bf-btn--danger {
  background: var(--bf-error);
  color: #ffffff;
  border-color: var(--bf-error);
}
.bf-btn--danger:hover { background: #f26b6f; border-color: #f26b6f; color: #ffffff; }
.bf-btn--danger:active { background: #c73538; border-color: #c73538; color: #ffffff; }
.bf-btn--danger:disabled { background: var(--bf-bg); border-color: var(--bf-border); color: var(--bf-muted); }

.bf-btn--sm { height: 32px; min-width: 64px; padding: 0 12px; font-size: 13px; }
.bf-btn--lg { height: 48px; min-width: 112px; padding: 0 20px; font-size: 16px; }
.bf-btn--xl { height: 56px; min-width: 128px; padding: 0 24px; font-size: 18px; }
.bf-btn--pill { border-radius: var(--bf-radius-pill); }
.bf-btn--block { width: 100%; }

/* ---------- Card primitive ---------- */
.bf-card {
  background: var(--bf-surface);
  border: var(--bf-border-width) solid var(--bf-border);
  border-radius: var(--bf-radius);
  padding: var(--bf-space-5);
}
.bf-card--soft { background: var(--bf-surface-2); }
.bf-card--accent { background: var(--bf-accent-bg); border-color: var(--bf-accent-border); }
.bf-card--cyan { background: var(--bf-accent-bg-2); border-color: var(--bf-cyan-500); }
.bf-card--lemon { background: var(--bf-accent-bg-3); border-color: var(--bf-lemon-500); }
.bf-card--mint { background: rgba(184,230,207,0.08); border-color: var(--bf-mint-500); }
.bf-card--chunky {
  border: var(--bf-border-width-chunky) solid var(--bf-border-strong);
  border-radius: var(--bf-radius-md);
  box-shadow: var(--bf-shadow-md);
  background: var(--bf-surface);
}
.bf-card--pink-chunky {
  background: var(--bf-accent);
  color: #ffffff;
  border: var(--bf-border-width-chunky) solid rgba(255,255,255,0.2);
  border-radius: var(--bf-radius-md);
  box-shadow: var(--bf-shadow-pop);
}
.bf-card__title {
  font-family: var(--bf-font-display);
  font-size: var(--bf-fs-h4);
  font-weight: var(--bf-fw-bold);
  color: var(--bf-fg);
  margin: 0 0 var(--bf-space-2) 0;
  text-transform: uppercase;
}
.bf-card__subtitle {
  font-size: var(--bf-fs-body-sm);
  color: var(--bf-muted);
  margin: 0 0 var(--bf-space-4) 0;
}

/* ---------- Form primitives ---------- */
.bf-label {
  display: block;
  font-size: var(--bf-fs-body-sm);
  font-weight: var(--bf-fw-bold);
  color: var(--bf-fg);
  margin-bottom: var(--bf-space-2);
}
.bf-input,
.bf-textarea,
.bf-select {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  background: var(--bf-surface-2);
  border: var(--bf-border-width) solid var(--bf-border-strong);
  border-radius: var(--bf-radius);
  color: var(--bf-fg);
  font-family: var(--bf-font-ui);
  font-size: var(--bf-fs-body);
  line-height: var(--bf-lh-body);
  transition: border-color var(--bf-dur-base) var(--bf-ease-out),
       box-shadow var(--bf-dur-base) var(--bf-ease-out);
  box-sizing: border-box;
}
.bf-input::placeholder,
.bf-textarea::placeholder { color: var(--bf-muted); }
.bf-input:hover,
.bf-textarea:hover,
.bf-select:hover { border-color: var(--bf-accent); }
.bf-input:focus,
.bf-textarea:focus,
.bf-select:focus {
  outline: none;
  border-color: var(--bf-accent);
  box-shadow: 0 0 0 3px var(--bf-accent-bg);
}
.bf-input:disabled,
.bf-textarea:disabled,
.bf-select:disabled {
  background: var(--bf-bg);
  color: var(--bf-muted);
  cursor: not-allowed;
}
.bf-textarea { height: auto; min-height: 96px; padding: 10px 12px; resize: vertical; }
.bf-field { margin-bottom: var(--bf-space-4); }
.bf-helper {
  margin-top: var(--bf-space-1);
  font-size: var(--bf-fs-caption);
  color: var(--bf-muted);
}
.bf-helper--error { color: var(--bf-error); }
.bf-input--error,
.bf-textarea--error,
.bf-select--error { border-color: var(--bf-error); }
.bf-input--error:focus,
.bf-textarea--error:focus,
.bf-select--error:focus { box-shadow: 0 0 0 3px var(--bf-error-bg); }

/* ---------- Chip / Tag ---------- */
.bf-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--bf-radius-xs);
  background: var(--bf-surface);
  border: 1px solid var(--bf-border-strong);
  color: var(--bf-fg);
  font-size: var(--bf-fs-caption);
  font-weight: var(--bf-fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bf-chip--magenta { background: var(--bf-accent); border-color: rgba(255,255,255,0.2); color: #ffffff; }
.bf-chip--cyan  { background: var(--bf-accent-2); border-color: rgba(255,255,255,0.2); color: var(--bf-ink); }
.bf-chip--lemon  { background: var(--bf-accent-3); border-color: rgba(255,255,255,0.2); color: var(--bf-ink); }
.bf-chip--mint  { background: var(--bf-mint-500); border-color: rgba(255,255,255,0.2); color: var(--bf-ink); }
.bf-chip--accent { background: var(--bf-accent-bg); border-color: var(--bf-accent-border); color: var(--bf-accent-text); }
.bf-chip--success { background: var(--bf-success-bg); border-color: var(--bf-success-border); color: var(--bf-success); }
.bf-chip--warning { background: var(--bf-warning-bg); border-color: var(--bf-warning-border); color: var(--bf-warning); }
.bf-chip--error  { background: var(--bf-error-bg); border-color: var(--bf-error-border); color: var(--bf-error); }

/* ---------- Status dot ---------- */
.bf-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bf-muted);
  border: 1px solid var(--bf-border-strong);
}
.bf-dot--active { background: var(--bf-success); }
.bf-dot--pending { background: var(--bf-warning); }
.bf-dot--blocked { background: var(--bf-error); }
.bf-dot--paused { background: var(--bf-muted); }
.bf-dot--magenta { background: var(--bf-accent); }
.bf-dot--cyan  { background: var(--bf-accent-2); }
.bf-dot--lemon  { background: var(--bf-accent-3); }

/* ---------- Container ---------- */
.bf-container {
  max-width: var(--bf-content-max);
  margin: 0 auto;
  padding-left: var(--bf-page-pad);
  padding-right: var(--bf-page-pad);
}

/* ---------- Avatar ---------- */
.bf-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bf-accent-2);
  color: var(--bf-ink);
  font-size: var(--bf-fs-body-sm);
  font-weight: var(--bf-fw-bold);
  border: var(--bf-border-width-chunky) solid var(--bf-border-strong);
  overflow: hidden;
}
.bf-avatar--sm { width: 28px; height: 28px; font-size: 12px; }
.bf-avatar--lg { width: 56px; height: 56px; font-size: 18px; }
.bf-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bf-avatar--magenta { background: var(--bf-accent); color: #ffffff; }
.bf-avatar--lemon  { background: var(--bf-accent-3); color: var(--bf-ink); }
.bf-avatar--mint  { background: var(--bf-mint-500); color: var(--bf-ink); }

/* ---------- Tab ---------- */
.bf-tabs {
  display: flex;
  gap: var(--bf-space-2);
  border-bottom: var(--bf-border-width-chunky) solid var(--bf-border-strong);
  margin-bottom: var(--bf-space-5);
}
.bf-tab {
  padding: 10px 12px;
  font-size: var(--bf-fs-body-sm);
  font-weight: var(--bf-fw-bold);
  color: var(--bf-muted);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -3px;
  cursor: pointer;
  transition: color var(--bf-dur-base) var(--bf-ease-out),
       border-color var(--bf-dur-base) var(--bf-ease-out);
  letter-spacing: 0.02em;
}
.bf-tab:hover { color: var(--bf-fg); }
.bf-tab--active { color: var(--bf-accent); border-bottom-color: var(--bf-accent); }

/* ---------- Table ---------- */
.bf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--bf-fs-body-sm);
  background: var(--bf-surface);
  border: var(--bf-border-width) solid var(--bf-border-strong);
  border-radius: var(--bf-radius);
  overflow: hidden;
}
.bf-table th {
  text-align: left;
  font-weight: var(--bf-fw-bold);
  color: var(--bf-fg);
  padding: 12px 16px;
  background: var(--bf-surface-2);
  border-bottom: var(--bf-border-width-chunky) solid var(--bf-border-strong);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--bf-fs-caption);
}
.bf-table td {
  padding: 14px 16px;
  border-bottom: var(--bf-border-width) solid var(--bf-border);
  color: var(--bf-fg);
  vertical-align: middle;
}
.bf-table tr:last-child td { border-bottom: none; }
.bf-table tr:hover td { background: var(--bf-surface-2); }

/* ---------- Stat card ---------- */
.bf-stat {
  padding: var(--bf-space-5);
  background: var(--bf-surface);
  border: var(--bf-border-width-chunky) solid var(--bf-border-strong);
  border-radius: var(--bf-radius-md);
  box-shadow: var(--bf-shadow-md);
}
.bf-stat__label {
  font-size: var(--bf-fs-caption);
  font-weight: var(--bf-fw-bold);
  letter-spacing: var(--bf-track-eyebrow);
  text-transform: uppercase;
  color: var(--bf-fg);
  margin-bottom: var(--bf-space-2);
}
.bf-stat__value {
  font-family: var(--bf-font-display);
  font-size: 32px;
  font-weight: var(--bf-fw-bold);
  color: var(--bf-fg);
  line-height: 1;
  letter-spacing: var(--bf-track-display);
}
.bf-stat__delta {
  margin-top: var(--bf-space-2);
  font-size: var(--bf-fs-caption);
  font-weight: var(--bf-fw-bold);
}
.bf-stat__delta--up  { color: var(--bf-success); }
.bf-stat__delta--down { color: var(--bf-error); }
.bf-stat--magenta { background: var(--bf-accent); color: #ffffff; border-color: rgba(255,255,255,0.2); }
.bf-stat--magenta .bf-stat__label,
.bf-stat--magenta .bf-stat__value { color: #ffffff; }
.bf-stat--cyan { background: var(--bf-accent-2); border-color: rgba(255,255,255,0.2); color: var(--bf-ink); }
.bf-stat--lemon { background: var(--bf-accent-3); border-color: rgba(255,255,255,0.2); color: var(--bf-ink); }

/* ---------- Toast ---------- */
.bf-toast {
  display: flex;
  align-items: center;
  gap: var(--bf-space-3);
  padding: 12px 16px;
  background: var(--bf-surface);
  border: var(--bf-border-width) solid var(--bf-border-strong);
  border-radius: var(--bf-radius);
  box-shadow: var(--bf-shadow-md);
  min-width: 280px;
  max-width: 420px;
}
.bf-toast--success { border-left: 4px solid var(--bf-success); }
.bf-toast--warning { border-left: 4px solid var(--bf-warning); }
.bf-toast--error  { border-left: 4px solid var(--bf-error); }
.bf-toast--info  { border-left: 4px solid var(--bf-accent); }
.bf-toast--magenta {
  background: var(--bf-accent-bg);
  border-color: var(--bf-accent-border);
  color: var(--bf-accent-text);
}

/* ---------- Drawer / Modal ---------- */
.bf-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 360px;
  max-width: 90vw;
  background: var(--bf-surface);
  border-left: var(--bf-border-width-chunky) solid var(--bf-border-strong);
  box-shadow: var(--bf-shadow-float);
  z-index: var(--bf-z-drawer);
  transform: translateX(100%);
  transition: transform var(--bf-dur-slow) var(--bf-ease-out);
}
.bf-drawer--open { transform: translateX(0); }
.bf-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--bf-space-4) var(--bf-space-5);
  border-bottom: var(--bf-border-width-chunky) solid var(--bf-border-strong);
  background: var(--bf-accent);
  color: #ffffff;
}
.bf-drawer__body { padding: var(--bf-space-5); }

/* ---------- Page chrome ---------- */
.bf-page {
  min-height: 100vh;
  background: var(--bf-bg);
  color: var(--bf-fg);
}
.bf-section {
  padding: var(--bf-space-10) 0;
}
.bf-section--tight { padding: var(--bf-space-6) 0; }

/* ---------- Navigation ---------- */
.bf-nav {
  display: flex;
  align-items: center;
  gap: var(--bf-space-5);
  height: 64px;
  padding: 0 var(--bf-page-pad);
  background: var(--bf-surface);
  border-bottom: 2px solid var(--bf-border-strong);
  font-size: var(--bf-fs-body-sm);
  font-weight: var(--bf-fw-semibold);
}
.bf-nav__brand { display: flex; align-items: center; gap: 8px; font-weight: var(--bf-fw-bold); color: var(--bf-fg); font-family: var(--bf-font-display); }
.bf-nav__brand img { width: 28px; height: 28px; }
.bf-nav__links { display: flex; gap: var(--bf-space-5); margin-left: var(--bf-space-6); }
.bf-nav__link { color: var(--bf-fg); text-decoration: none; border: none; }
.bf-nav__link:hover { color: var(--bf-accent); }
.bf-nav__link--active { color: var(--bf-accent); border-bottom: 2px solid var(--bf-accent); }
.bf-nav__cta { margin-left: auto; }
.bf-sidebar-nav {
  width: 240px;
  background: var(--bf-surface);
  border-right: 2px solid var(--bf-border-strong);
  display: flex;
  flex-direction: column;
  padding: var(--bf-space-4) 0;
}
.bf-sidebar-nav__header {
  font-size: var(--bf-fs-caption);
  font-weight: var(--bf-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--bf-track-caps);
  color: var(--bf-muted);
  padding: 0 var(--bf-space-5);
  margin-bottom: var(--bf-space-3);
}
.bf-sidebar-nav__item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 var(--bf-space-5);
  font-size: var(--bf-fs-body-sm);
  font-weight: var(--bf-fw-semibold);
  color: var(--bf-fg);
  text-decoration: none;
  border: none;
  border-left: 2px solid transparent;
  background: transparent;
  cursor: pointer;
}
.bf-sidebar-nav__item:hover { background: var(--bf-surface-2); }
.bf-sidebar-nav__item--active {
  background: var(--bf-accent-bg);
  border-left-color: var(--bf-accent);
  color: var(--bf-accent);
}

/* ---------- Hero ---------- */
.bf-hero {
  padding: var(--bf-space-10) 0 var(--bf-space-12) 0;
  background: var(--bf-bg);
}
.bf-hero__eyebrow { margin-bottom: var(--bf-space-4); }
.bf-hero__title {
  font-family: var(--bf-font-display);
  font-size: var(--bf-fs-display);
  line-height: var(--bf-lh-display);
  letter-spacing: var(--bf-track-display);
  font-weight: var(--bf-fw-bold);
  margin-bottom: var(--bf-space-4);
  max-width: 18ch;
  text-transform: uppercase;
}
.bf-hero__lede {
  font-size: var(--bf-fs-body-lg);
  line-height: var(--bf-lh-body-lg);
  color: var(--bf-muted);
  max-width: 56ch;
  margin-bottom: var(--bf-space-6);
}
.bf-hero__cta { display: flex; gap: var(--bf-space-3); flex-wrap: wrap; }

/* ---------- Marquee ---------- */
.bf-marquee {
  overflow: hidden;
  white-space: nowrap;
  background: var(--bf-accent);
  color: #ffffff;
  font-family: var(--bf-font-condensed);
  font-size: 18px;
  letter-spacing: 0.04em;
  padding: 6px 0;
}
.bf-marquee__track {
  display: inline-block;
  animation: bfMarquee 30s linear infinite;
}
@keyframes bfMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---------- Window frame mockup ---------- */
.bf-win-frame {
  background: var(--bf-surface);
  border: var(--bf-border-width-chunky) solid var(--bf-border-strong);
  border-radius: var(--bf-radius-md);
  box-shadow: var(--bf-shadow-float);
  overflow: hidden;
}
.bf-win-frame__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bf-surface-2);
  border-bottom: var(--bf-border-width) solid var(--bf-border-strong);
  font-family: var(--bf-font-mono);
  font-size: 13px;
  color: var(--bf-muted);
}
.bf-win-frame__dot {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.2);
}
.bf-win-frame__dot--red { background: #ff5f57; }
.bf-win-frame__dot--yellow { background: #ffbd2e; }
.bf-win-frame__dot--green { background: #28c940; }
.bf-win-frame__body { padding: var(--bf-space-5); }

/* ---------- Pixel label ---------- */
.bf-pixel {
  font-family: var(--bf-font-pixel);
  font-size: 10px;
  letter-spacing: var(--bf-track-pixel);
  text-transform: uppercase;
}

/* ---------- Skip / accessibility ---------- */
.bf-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}