/* =============================================================
   Mosaic Design System — Colors & Type   (canonical, Guidelines v1.0)
   -------------------------------------------------------------
   Mosaic is a multi-perspective news aggregator. The system is
   deliberately small: warm-neutral surfaces, one typeface (Inter),
   and a VALENCE-FREE data palette so no story is colored by judgment.

   NEUTRAL BY DEFAULT — color never signals approval or alarm.
   • The three narratives carry slate / camel / mauve (--narr-a/b/c).
   • Clay (--accent) is the single accent, for live dots & emphasis only.
   • Sentiment green / yellow / red are RETIRED from UI and charts —
     they imply a verdict. Allowed ONLY inside the brand mark (logo).
   See /guidelines/ for the full canonical reference.
   ============================================================= */

/* ---- FONTS ---------------------------------------------------
   Headings:  Inter, bold (700). Tight tracking (-5%, i.e. -0.05em)
              and line-height that scales with size (~1.1 at display,
              up to ~1.25 at UI-scale headings).
   Body/UI :  Inter, regular / medium.
   One family, two voices. Load Inter (Google Fonts):
     @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
   General Sans is NOT used. Kept as a fallback only for legacy pages.
------------------------------------------------------------- */

:root {
  /* -----------------------------------------------------------
     1. RAW TOKENS (brand constants, identical in light & dark)
     ----------------------------------------------------------- */

  /* Surfaces */
  --light-primary:   #FEF9EF;  /* page bg, light */
  --light-secondary: #F9F4EA;  /* card / surface, light */
  --dark-primary:    #27292D;  /* page bg, dark */
  --dark-secondary:  #171819;  /* card / sidebar, dark */

  /* Brand-mark colors — BRAND MARK ONLY (logo). Never as UI/chart accents. */
  --mosaic-green:    #00AA47;  /* logo on dark */
  --mosaic-yellow:   #FFC200;
  --mosaic-red:      #FF601C;  /* brand orange — logo on light */

  /* Legacy aliases — DEPRECATED (kept so old code doesn't break). Do not use in new UI. */
  --green:  var(--mosaic-green);
  --yellow: var(--mosaic-yellow);
  --red:    var(--mosaic-red);

  /* -----------------------------------------------------------
     NEUTRAL DATA & NARRATIVE PALETTE — canonical (Guidelines v1.0)
     The ONLY colors for charts, tags, and the 3-perspective grid.
     Slate / camel / mauve carry the three narratives; clay is the
     single accent for live & emphasis; teal joins as a 5th categorical.
     Brighter values are applied per-theme in dark mode (see below).
     ----------------------------------------------------------- */
  --slate: #5B7083;   --slate-bright: #7E94A8;   /* Narrative A / cat-1 */
  --camel: #C2A165;   --camel-bright: #D2B477;   /* Narrative B / cat-2 */
  --mauve: #9A7187;   --mauve-bright: #B68FA3;   /* Narrative C / cat-3 */
  --clay:  #C8602B;   --clay-bright:  #D8814B;   /* accent · live/emphasis only */
  --teal:  #3F8A82;   --teal-bright:  #5FA89E;   /* cat-6 */

  /* Buttons (cream-theme only) */
  --button-default:  #EDE5D5;
  --button-selected: #D7C5A1;
  --summary-bar:     #D7C5A1;

  /* Hairlines */
  --line-cream: #E3DBCD;
  --line-warm:  #DED2BC;

  /* -----------------------------------------------------------
     2. TYPOGRAPHY TOKENS
     ----------------------------------------------------------- */
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Weights */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* Scale (product UI) */
  --text-xs:      12px;
  --text-sm:      13px;
  --text-base:    14px;
  --text-md:      15px;
  --text-lg:      16px;
  --text-xl:      17px;
  --text-2xl:     20px;
  --text-3xl:     24px;
  --text-display: 74px;   /* instagram-post headline */

  /* Line-heights */
  --lh-tight:  1.02;
  --lh-snug:   1.2;
  --lh-normal: 1.4;
  --lh-loose:  1.6;

  /* Letter-spacing — all headings run tight at -5% (-0.05em) */
  --ls-heading: -0.05em;
  --ls-display: -0.05em;
  --ls-ui:      -0.015em;
  --ls-caps:    0.06em;   /* small caps labels */
  --ls-kicker:  0.18em;   /* eyebrow / tag labels */

  /* -----------------------------------------------------------
     3. SPACING, RADIUS, SHADOWS
     ----------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   18px;   /* cards */
  --radius-2xl:  24px;   /* tweet cards */
  --radius-pill: 999px;

  /* Shadows are quiet — Mosaic reads as editorial, not skeuomorphic */
  --shadow-card-light:  0 6px 12px rgba(0,0,0,0.036);
  --shadow-card-dark:   0 6px 14px rgba(0,0,0,0.08);
  --shadow-glass-light: 0 12px 30px rgba(39,41,45,0.08);
  --shadow-glass-dark:  0 16px 36px rgba(0,0,0,0.35);

  /* -----------------------------------------------------------
     4. GLASS TOKENS (see globals.css for full recipes)
     ----------------------------------------------------------- */
  --glass-blur: 12px;
  --glass-bg-light:     rgba(255,255,255,0.45);
  --glass-border-light: rgba(215,197,161,0.55);
  --glass-bg-dark:      rgba(39,41,45,0.50);
  --glass-border-dark:  rgba(215,197,161,0.28);
}

/* =============================================================
   SEMANTIC VARIABLES — default (LIGHT)
   Switch the whole page by setting [data-theme="dark"].
   ============================================================= */
:root,
[data-theme="light"] {
  --bg-primary:     var(--light-primary);
  --bg-surface:     var(--light-secondary);
  --bg-card:        var(--light-secondary);
  --bg-sidebar:     #EFE8DD;

  --text-primary:   #27292D;
  --text-secondary: #4B4E53;
  --text-muted:     #6A6D72;
  --text-inverse:   #FEF9EF;

  --border-subtle:  #DED2BC;
  --border-hairline:#E3DBCD;

  /* canonical narrative + categorical palette (light) */
  --narr-a: var(--slate);  --narr-b: var(--camel);  --narr-c: var(--mauve);
  --accent: var(--clay);
  --cat-1: var(--slate);  --cat-2: var(--camel);  --cat-3: var(--mauve);
  --cat-4: var(--text-primary);  --cat-5: var(--clay);  --cat-6: var(--teal);

  --shadow-card:   var(--shadow-card-light);
  --glass-bg:      var(--glass-bg-light);
  --glass-border:  var(--glass-border-light);
  --glass-shadow:  var(--shadow-glass-light);
}

[data-theme="dark"] {
  --bg-primary:     var(--dark-primary);   /* #27292D */
  --bg-surface:     var(--dark-secondary); /* #171819 */
  --bg-card:        #1D1F22;
  --bg-sidebar:     #101318;

  --text-primary:   #F5F5F5;
  --text-secondary: #C2C5CA;
  --text-muted:     #9BA0A8;
  --text-inverse:   #27292D;

  --border-subtle:  #3A3D42;
  --border-hairline:#2B2D31;

  /* canonical palette (dark) — brighter values so they hold on graphite */
  --narr-a: var(--slate-bright);  --narr-b: var(--camel-bright);  --narr-c: var(--mauve-bright);
  --accent: var(--clay-bright);
  --cat-1: var(--slate-bright);  --cat-2: var(--camel-bright);  --cat-3: var(--mauve-bright);
  --cat-4: var(--text-primary);  --cat-5: var(--clay-bright);  --cat-6: var(--teal-bright);

  --shadow-card:   var(--shadow-card-dark);
  --glass-bg:      var(--glass-bg-dark);
  --glass-border:  var(--glass-border-dark);
  --glass-shadow:  var(--shadow-glass-dark);
}

/* =============================================================
   SEMANTIC TYPE STYLES
   Use these class-free targets or the classes below.
   ============================================================= */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

/* Heading line-height scales INVERSELY with size: big display type
   tightens toward 1.05, mid-size headings sit around 1.15, small
   UI headings ride up to ~1.25 so they read as balanced text. */
h1, .h1, .display {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: clamp(40px, 6vw, var(--text-display));
  line-height: 1.05;
  letter-spacing: -0.05em;
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.05em;
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.05em;
  margin: 0;
}

h4, .h4, .eyebrow {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

.kicker {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 11px;
  letter-spacing: var(--ls-kicker);
  text-transform: lowercase;
  color: var(--text-muted);
}

.headline-title {
  /* used on story rows */
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: 16px;
  line-height: 22px;
  letter-spacing: var(--ls-ui);
  color: var(--text-primary);
}

p, .body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
  margin: 0;
}

.caption {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 16px;
  color: var(--text-muted);
}

.source-domain {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 13px;
  line-height: 18px;
}

/* Monospace is intentionally NOT part of Mosaic — editorial voice.
   If you absolutely need it (code blocks), use ui-monospace. */
code, pre {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
}