/* dashboard/css/tokens.css — THE design tokens (S2-4, C-6).
 *
 * This is the ONLY file in the app allowed to contain a colour literal.
 * Every other stylesheet, and every page, reads var(--token). The gate's CSS
 * token lint (SPRINT2_DESIGN §12.3) fails the build if a `#rrggbb` or a
 * `--token:` declaration appears anywhere else.
 *
 * Sections 1-2 are lifted verbatim from index.html:20-93 (the palette Wave 1
 * shipped). Section 3 is NEW ONLY IN LOCATION: every value in it was already
 * a hard-coded hex somewhere in index.html's <style> block, and was hoisted
 * here unchanged so the "zero hex outside tokens.css" rule can be enforced.
 * Nothing below changes a rendered colour.
 */

/* ─────────────────────────────────────────────────────────────────────────
   1. Theme tokens — light (default)
   ───────────────────────────────────────────────────────────────────────── */
:root {
  --paper:       #FAFAF7;
  --paper-2:     #F2F0EA;
  --ink:         #1A1A1A;
  --ink-soft:    #5A5A5A;
  --ink-faint:   #8A8A8A;
  --rule:        #E8E6DF;
  --accent:      #2D4FA0;
  --accent-soft: #DDE3F2;
  --accent-dark: #1F3877;
  --good:        #2D6A4F;
  --good-soft:   #DCEAE2;
  --warn:        #C66A1F;
  --warn-soft:   #FDF0E1;
  --bad:         #A82626;
  --bad-soft:    #FCE0E0;

  --glass-bg:    rgba(255, 255, 255, 0.62);
  --glass-bg-2:  rgba(255, 255, 255, 0.85);
  --glass-edge:  rgba(255, 255, 255, 0.5);
  --glass-shadow: 0 1px 3px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06), 0 1px 0 rgba(255,255,255,.5) inset;

  --bg-grad: radial-gradient(1200px 800px at 80% -10%, rgba(45,79,160,.08), transparent 60%),
             radial-gradient(900px 600px at -10% 110%, rgba(200,184,159,.18), transparent 60%),
             linear-gradient(180deg, #FAFAF7, #F2EEE5);

  --shadow-sm:   0 1px 2px rgba(0,0,0,.06);
  --shadow-md:   0 8px 24px rgba(0,0,0,.08);
  --shadow-lg:   0 30px 60px -10px rgba(0,0,0,.18), 0 18px 36px -18px rgba(0,0,0,.18);

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --t-fast: 180ms cubic-bezier(.22,.94,.51,1);
  --t-base: 280ms cubic-bezier(.22,.94,.51,1);
  --t-slow: 500ms cubic-bezier(.22,.94,.51,1);
  --spring: cubic-bezier(.34,1.56,.64,1);

  /* ── 3a. Neutrals that are NOT theme-dependent ──────────────────────────
     Hoisted from index.html; identical in both themes there and here. */
  --white:            #ffffff;

  /* Reserved topbar height. js/shell.mjs mounts AFTER /api/me resolves, so the
     bar is empty for one frame; a fixed height means no layout shift and no
     flash of a wrong account name (§8.2). 12px padding + 36px pill + 1px rule. */
  --topbar-h:         61px;

  /* State-less pill (angle "built", listing site "none"/"draft"). */
  --pill-neutral-bg:  rgba(140,140,150,.18);
  --pill-neutral-ink: #6b6e78;

  /* "★ HERO" badge ink on the drawer thumbnail (background is `gold`). */
  --hero-star-ink:    #4a3a00;

  /* Ad-composition frame + the story-layout headshot ring. */
  --ad-frame-bg:      #2C2C2C;
  --ad-silver:        #d8d8d8;

  /* ── 3b. Reel overlay — intentionally always dark ───────────────────────
     The reel overlay does NOT follow the app theme: it previews a video whose
     own palette is fixed. That intent used to be a comment above five hard-
     coded hexes; it is now an explicit token pair declared IDENTICALLY in both
     themes, so "always dark" is a decision you can read instead of infer. */
  --reel-bg:          #141a28;
  --reel-ink:         #f1f2f4;
  --reel-gold:        #c9a24b;
  --reel-gold-hover:  #dab55f;
  --reel-on-gold:     #10141f;

  /* ── 3c. Terminal / code surfaces (search-result command, build log) ──── */
  --code-bg:          #11141a;
  --code-ink:         #d6deeb;

  /* ── 3d. Facebook post mirror ──────────────────────────────────────────
     These reproduce Facebook's own chrome inside our preview, so they are
     deliberately NOT our palette. Previously declared on `.fb-post` itself. */
  --fb-text:          #050505;
  --fb-text-2:        #65676b;
  --fb-link:          #1b74e4;
  --fb-bg:            #ffffff;
  --fb-border:        #ced0d4;
  --fb-soft:          #f0f2f5;
  --fb-blue:          #1877f2;
  --fb-divider:       #ced0d4;
  --fb-frame-bg:      #f0f2f5;

  /* ── 3e. Instagram post mirror ─────────────────────────────────────────
     Same reasoning as 3d. Previously declared on `.ig-post` itself. */
  --ig-text:          #262626;
  --ig-text-2:        #8e8e8e;
  --ig-bg:            #ffffff;
  --ig-border:        #dbdbdb;
  --ig-link:          #00376b;
  --ig-photo-bg:      #fafafa;
  --ig-gradient:      linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

/* ─────────────────────────────────────────────────────────────────────────
   2. Theme tokens — dark
   Only the tokens listed here differ in dark. Anything declared once in
   :root above (--white, --reel-*, --pill-neutral-*, --ad-*, --hero-star-ink,
   --fb-link/--fb-border/--fb-blue, --ig-link/--ig-gradient) intentionally
   keeps its single value, exactly as index.html had it.
   ───────────────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --paper:       #0F1419;
  --paper-2:     #161B22;
  --ink:         #F1F2F4;
  --ink-soft:    #A6AEB8;
  --ink-faint:   #6C7480;
  --rule:        #232A33;
  --accent:      #4F76D8;
  --accent-soft: rgba(79,118,216,.18);
  --accent-dark: #2D4FA0;
  --good:        #4ECB8C;
  --good-soft:   rgba(78,203,140,.14);
  --warn:        #E89A55;
  --warn-soft:   rgba(232,154,85,.14);
  --bad:         #E66565;
  --bad-soft:    rgba(230,101,101,.14);

  --glass-bg:    rgba(28, 32, 38, 0.55);
  --glass-bg-2:  rgba(36, 40, 48, 0.78);
  --glass-edge:  rgba(255, 255, 255, 0.06);
  --glass-shadow: 0 1px 3px rgba(0,0,0,.4), 0 8px 32px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.04) inset;

  --bg-grad: radial-gradient(1200px 800px at 80% -10%, rgba(79,118,216,.16), transparent 60%),
             radial-gradient(900px 600px at -10% 110%, rgba(45,79,160,.18), transparent 60%),
             linear-gradient(180deg, #0E1218, #0A0D11);

  --shadow-sm:   0 1px 2px rgba(0,0,0,.4);
  --shadow-md:   0 8px 24px rgba(0,0,0,.5);
  --shadow-lg:   0 30px 60px -10px rgba(0,0,0,.7), 0 18px 36px -18px rgba(0,0,0,.7);

  /* was: [data-theme="dark"] .search-result-cmd / .bp-log */
  --code-bg:     #0a0c10;

  /* was: [data-theme="dark"] .fb-post / .fb-feed-frame */
  --fb-text:     #e4e6eb;
  --fb-text-2:   #b0b3b8;
  --fb-bg:       #242526;
  --fb-soft:     #3a3b3c;
  --fb-divider:  #3e4042;
  --fb-frame-bg: #18191a;

  /* was: [data-theme="dark"] .ig-post / .ig-post-photo */
  --ig-text:     #fafafa;
  --ig-text-2:   #a8a8a8;
  --ig-bg:       #000000;
  --ig-border:   #262626;
  --ig-photo-bg: #1a1a1a;
}