/* =================================================================
   Buzzabout Design System — Colors & Typography Tokens
   Extracted from prototyping/buzzabout-v2/src/app/globals.css
   ================================================================= */

/* ---------- Fonts ----------
   Geist is self-hosted from /fonts. All 9 weights are available.
   Geist Mono is not bundled; falls back to system mono.
*/
/* Only the weights actually referenced are declared. Thin (100), ExtraBold (800),
   and Black (900) Geist files are still on disk in fonts/ but unreferenced. */
@font-face{font-family:'Geist';src:url('fonts/Geist-ExtraLight.ttf') format('truetype');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'Geist';src:url('fonts/Geist-Light.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Geist';src:url('fonts/Geist-Regular.ttf') format('truetype');font-weight:400 450;font-style:normal;font-display:swap}
@font-face{font-family:'Geist';src:url('fonts/Geist-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Geist';src:url('fonts/Geist-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Geist';src:url('fonts/Geist-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}

:root {
  /* ---------- FONT FAMILIES ---------- */
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-heading: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Geist', ui-sans-serif, system-ui, sans-serif;

  /* ---------- TYPE SCALE ---------- */
  /* The app runs a *compact* base of 15px with a custom 450 "normal" weight
     (slightly heavier than standard 400) for denser UI readability. */
  --text-2xs:  10px;
  --text-xs:   12px;
  --text-sm:   13px;    /* toolbar, meta */
  --text-base: 15px;    /* default body */
  --text-md:   16px;    /* hero descriptions, section subtitles */
  --text-lg:   17px;
  --text-lg-l: 18px;    /* article lede, slightly larger body */
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;    /* home greeting, chat H1 */

  --font-weight-normal: 450;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  --tracking-tight: -0.15px;
  --tracking-heading: -0.165rem;  /* 24px titles */
  --tracking-display: -0.165rem;  /* 30px display */

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* ---------- TEXT COLORS ---------- */
  /* Contrast hardened: every tier now passes WCAG AA on white. */
  --text-primary:        oklch(0.09 0 0);   /* near-black, headings + body */
  --text-secondary:      oklch(0.096 0.005 107.3 / 0.59);   /* meta, labels, secondary */
  --text-tertiary:       oklch(0.48 0 0);   /* placeholder, disabled */
  --text-display-muted:  #a4a4a4;           /* large display headlines, two-tone titles */

  /* ---------- SURFACES ---------- */
  --background:          oklch(1 0 0);       /* page cards (white) */
  --surface-secondary:   oklch(0.99 0 0);    /* app shell bg behind cards */
  --surface-subtle:      oklch(0.96 0 0);    /* avatar bg, chip bg */
  --surface-border:      oklch(0.93 0 0);    /* 1px divider color */
  --muted:               oklch(0.97 0 0);    /* hover states */
  --muted-foreground:    oklch(0.40 0 0);

  /* ---------- BRAND ---------- */
  /* Single blue accent. The prior --brand-purple at hue 300 read as
     generic "AI purple" — its aliases now resolve to the same blue so
     existing markup keeps working without a purple tinge. */
  --brand-logo:         #0F61FF;             /* literal logo blue */
  --brand:              oklch(0.50 0.20 260); /* token blue */
  --brand-light:        oklch(0.96 0.02 260); /* subtle blue bg */
  --brand-purple:       var(--brand);
  --brand-purple-light: var(--brand-light);

  /* ---------- SEMANTIC ---------- */
  --primary:             oklch(0.205 0 0);   /* near-black btn */
  --primary-foreground:  oklch(0.985 0 0);
  --secondary:           oklch(0.97 0 0);
  --accent:              oklch(0.97 0 0);
  --destructive:         oklch(0.577 0.245 27.325);
  --border:              oklch(0.922 0 0);
  --input:               oklch(0.922 0 0);
  --ring:                oklch(0.708 0 0);

  /* ---------- CHART / DATA ---------- */
  /* All charts in the app are greyscale by default — only brand/sentiment
     get color. */
  --chart-1: oklch(0.87 0 0);
  --chart-2: oklch(0.556 0 0);
  --chart-3: oklch(0.439 0 0);
  --chart-4: oklch(0.371 0 0);
  --chart-5: oklch(0.269 0 0);

  /* Sentiment palette (extracted from SentimentBars) */
  --sentiment-positive: oklch(0.65 0.15 145);
  --sentiment-neutral:  oklch(0.70 0 0);
  --sentiment-negative: oklch(0.60 0.22 25);

  /* ---------- RADII ---------- */
  --radius: 10px;          /* base = 0.625rem */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-2xl:  18px;
  --radius-inner: 10px;
  --radius-card: 14px;     /* the signature floating card radius */
  --radius-pill: 9999px;

  /* ---------- SHADOWS ---------- */
  /* Buzzabout's cards use a very soft, barely-there shadow.
     The "signature" card shadow: [0px_3px_10px_4px_rgba(0,0,0,0.02)] */
  --shadow-card: 0px 3px 10px 4px rgba(0, 0, 0, 0.02);
  --shadow-sm:   0px 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-hover: 0px 2px 8px rgba(0, 0, 0, 0.06);

  /* ---------- SPACING (shadcn default 4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
}

/* =================================================================
   SEMANTIC TYPE STYLES
   ================================================================= */
body, html {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-normal);
  color: var(--text-primary);
  background: var(--surface-secondary);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

h1, .h1 {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  line-height: 36px;
  color: var(--text-primary);
}
h2, .h2 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  line-height: 32px;
}
h3, .h3 {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-snug);
}
h4, .h4 {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
}

p, .body {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
}
.small, small {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.meta, .eyebrow {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  letter-spacing: 0;
}
.label-caps {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
code, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--surface-subtle);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Subdued secondary display line — the home screen's signature:
   "Hello, User" / "Discover what people buzz about" pattern */
.display-muted {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-display);
  line-height: 36px;
  color: color-mix(in oklch, var(--text-tertiary) 70%, transparent);
}

/* =================================================================
   A11Y UTILITIES
   ================================================================= */
.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  background: var(--primary);
  color: var(--primary-foreground);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  z-index: 100;
  text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 8px; outline: 2px solid var(--brand); outline-offset: 2px; }

/* Visually hidden, available to screen readers. */
.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;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Respect users who prefer less motion — freeze the infinite animations
   (marquees, pulses, scrolling tracks, waveforms) but keep transitions. */
@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;
  }
}