/* ============================================================
   BlinkFree 3.0 — Design tokens
   Drop-in CSS custom properties for colors, type, spacing,
   radii, motion. Import once at the top of any page.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ── BRAND COLOR ─────────────────────────────────────────── */
  --bf-primary:        #9146FF;  /* signature purple — interactive only */
  --bf-primary-hover:  #A970FF;  /* hover / active brighten */
  --bf-secondary:      #BF94FF;  /* lighter purple — tags, tooltips, hints */

  /* ── SURFACES (dark layered) ─────────────────────────────── */
  --bf-bg:             #0E0E10;  /* page canvas — the void */
  --bf-surface:        #18181B;  /* panels, sidebars, cards, modal body */
  --bf-surface-2:      #1F1F23;  /* popovers, dropdowns, hover row */
  --bf-surface-3:      #252528;  /* modal elevated, focused row */
  --bf-overlay:        rgba(0, 0, 0, 0.7); /* modal backdrop */

  /* ── TEXT ────────────────────────────────────────────────── */
  --bf-fg-1:           #EFEFF1;  /* primary — headings, usernames, titles */
  --bf-fg-2:           #ADADB8;  /* secondary — body, descriptions, meta */
  --bf-fg-3:           #6E6E78;  /* tertiary — disabled, captions */
  --bf-fg-on-primary:  #FFFFFF;  /* text on purple fill */

  /* ── BORDERS / DIVIDERS ──────────────────────────────────── */
  --bf-border:         #2F2F35;  /* default 1px */
  --bf-border-strong:  #3A3A42;  /* hover, active */
  --bf-focus-ring:     0 0 0 2px var(--bf-primary);

  /* ── SEMANTIC ────────────────────────────────────────────── */
  --bf-success:        #00C853;  /* ok, online, alert resolved */
  --bf-warning:        #FFCA28;  /* caution, hype, attention */
  --bf-error:          #EB0400;  /* live, alert, danger, offline */

  /* ── TYPE FAMILIES ───────────────────────────────────────── */
  --bf-font-display:   'Inter', system-ui, sans-serif;
  --bf-font-body:      'Inter', system-ui, sans-serif;
  --bf-font-mono:      'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── TYPE SCALE (px values, density-first) ───────────────── */
  --bf-text-11: 13.75px;  /* badges, timestamps */
  --bf-text-12: 15px;     /* category tags, eyebrow labels */
  --bf-text-13: 16.25px;  /* body, chat, descriptions, buttons */
  --bf-text-14: 17.5px;   /* channel/camera names, list rows */
  --bf-text-16: 20px;     /* section titles */
  --bf-text-18: 22.5px;   /* stream/feed titles */
  --bf-text-24: 30px;     /* page headings */
  --bf-text-34: 42.5px;   /* marketing H2 */
  --bf-text-56: 70px;     /* marketing hero H1 */
  --bf-text-72: 90px;     /* oversized hero on large viewports */

  /* line-heights */
  --bf-lh-tight:  1.1;
  --bf-lh-snug:   1.25;
  --bf-lh-normal: 1.45;
  --bf-lh-relaxed: 1.6;

  /* tracking */
  --bf-track-eyebrow: 0.04em;
  --bf-track-button:  0.02em;
  --bf-track-display: -0.02em;

  /* ── SPACING (4px base) ──────────────────────────────────── */
  --bf-space-0:   0;
  --bf-space-1:   4px;
  --bf-space-2:   8px;
  --bf-space-3:   10px;
  --bf-space-4:   16px;
  --bf-space-5:   20px;
  --bf-space-6:   24px;
  --bf-space-7:   32px;
  --bf-space-8:   40px;
  --bf-space-9:   60px;

  /* ── BORDER RADIUS ───────────────────────────────────────── */
  --bf-radius-1:   2px;   /* live badge, code blocks */
  --bf-radius-2:   4px;   /* buttons, inputs, tags */
  --bf-radius-3:   6px;   /* cards, modals, tooltips */
  --bf-radius-4:   10px;  /* hover preview, emote picker */
  --bf-radius-pill: 9999px;

  /* ── MOTION ──────────────────────────────────────────────── */
  --bf-ease:       cubic-bezier(0.2, 0, 0, 1);
  --bf-dur-fast:   80ms;
  --bf-dur-base:   100ms;
  --bf-dur-slow:   240ms;  /* page entry only */

  /* ── LAYOUT TOKENS ───────────────────────────────────────── */
  --bf-nav-height:        50px;
  --bf-sidebar-collapsed: 50px;
  --bf-sidebar-expanded:  240px;
  --bf-chat-panel-width:  340px;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES (opt-in via class or scope)
   ============================================================ */

.bf-base {
  background: var(--bf-bg);
  color: var(--bf-fg-1);
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-13);
  line-height: var(--bf-lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings */
.bf-h1 {
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-56);
  font-weight: 800;
  line-height: var(--bf-lh-tight);
  letter-spacing: var(--bf-track-display);
  color: var(--bf-fg-1);
}
.bf-h2 {
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-34);
  font-weight: 700;
  line-height: var(--bf-lh-snug);
  letter-spacing: var(--bf-track-display);
  color: var(--bf-fg-1);
}
.bf-h3 {
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-24);
  font-weight: 700;
  line-height: var(--bf-lh-snug);
  color: var(--bf-fg-1);
}
.bf-h4 {
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-18);
  font-weight: 700;
  line-height: var(--bf-lh-snug);
  color: var(--bf-fg-1);
}

/* Body */
.bf-p {
  font-size: var(--bf-text-13);
  line-height: var(--bf-lh-relaxed);
  color: var(--bf-fg-2);
}
.bf-p-lg {
  font-size: var(--bf-text-16);
  line-height: var(--bf-lh-relaxed);
  color: var(--bf-fg-2);
}

/* Eyebrow / section label */
.bf-eyebrow {
  font-size: var(--bf-text-12);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--bf-track-eyebrow);
  color: var(--bf-primary);
}

/* Mono */
.bf-mono {
  font-family: var(--bf-font-mono);
  font-size: var(--bf-text-12);
  letter-spacing: 0;
}
.bf-code {
  font-family: var(--bf-font-mono);
  background: var(--bf-surface);
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-1);
  padding: 1px 6px;
  font-size: var(--bf-text-12);
  color: var(--bf-fg-1);
}

/* Selection */
::selection {
  background: var(--bf-primary);
  color: var(--bf-fg-on-primary);
}

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