/* ==========================================================================
   IndieFounder Design Tokens
   Dark-first "data marketplace" look: near-black surfaces, warm grey text,
   amber accent, off-white pill buttons, halftone-dot graphics.
   A full multi-hue palette (amber, orange, sky, olive, teal, fig, heather,
   rose, slate) is shared by topics, courses, tags and callouts.
   Everything exists in dark (default) and light.
   ========================================================================== */

/* Zero-lag theme flip: freeze transitions instantly during theme toggle without DOM style injection */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}

/* ---------- Dark (default) ---------- */
:root,
:root[data-theme="dark"],
:root.dark {
  color-scheme: dark;

  /* Surfaces & text */
  --bg: #050505;
  --bg-docs: #121212;
  --surface: #0e0e0d;
  --surface-2: #181817;
  --surface-3: #232321;
  --panel: #2c2b27;               /* big warm-grey panel (products, topics) */
  --ink: #ffffff;
  --ink-soft: #d9d8d2;
  --prose: #b4b3ab;               /* paragraph grey (strong = white) */
  --muted: #9b9a93;
  --line: #1f1f1d;
  --line-strong: #323230;
  --grid: rgba(255, 255, 255, 0.05);

  /* Accent (amber) */
  --accent: #ffb400;
  --accent-hover: #ffc233;
  --accent-ink: #0a0a0a;
  --accent-text: #ffc233;
  --accent-soft: rgba(255, 180, 0, 0.12);
  --accent-glow: 0 0 32px rgba(255, 180, 0, 0.25);
  --mark: rgba(255, 180, 0, 0.35);

  /* Primary button = warm off-white pill */
  --btn-bg: #ece8df;
  --btn-ink: #131312;
  --btn-hover: #ffffff;
  --btn-quiet-bg: #1a1a19;
  --btn-quiet-hover: #242422;

  --header-bg: rgba(5, 5, 5, 0.82);
  --header-border: #181817;

  --card-bg: #0b0b0a;
  --card-border: #262624;
  --card-hover-border: #3d3d39;
  --card-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
  --card-hover-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);

  /* Code */
  --code-bg: #0c0c0b;
  --code-bar-bg: #171716;
  --code-ink: #e8e6dd;
  --code-line: #2a2a28;

  /* ----- Palette: fg (text/icon), bg (soft fill), line (border/dot) ----- */
  --amber:    #ffc233; --amber-bg:    rgba(255, 180, 0, 0.13);   --amber-line:    #ffb400;
  --orange:   #ff9a4d; --orange-bg:   rgba(242, 139, 48, 0.15);  --orange-line:   #f28b30;
  --clay:     #ec9a7a; --clay-bg:     rgba(217, 119, 87, 0.15);  --clay-line:     #d97757;
  --olive:    #a4cf8a; --olive-bg:    rgba(130, 180, 100, 0.15); --olive-line:    #7fb069;
  --teal:     #6fd8c8; --teal-bg:     rgba(47, 175, 160, 0.15);  --teal-line:     #2fafa0;
  --sky:      #8cc4ff; --sky-bg:      rgba(80, 150, 240, 0.16);  --sky-line:      #4f96f0;
  --heather:  #bfb5ff; --heather-bg:  rgba(140, 125, 240, 0.17); --heather-line:  #8c7df0;
  --fig:      #f6a0c4; --fig-bg:      rgba(220, 100, 150, 0.16); --fig-line:      #dc6496;
  --slate:    #c4c3ba; --slate-bg:    rgba(160, 158, 148, 0.16); --slate-line:    #9b9a93;
  --kraft:    var(--orange); --kraft-bg: var(--orange-bg); --kraft-line: var(--orange-line);

  /* Topic accents (used by existing templates) */
  --t-startups: var(--amber);       --t-startups-bg: var(--amber-bg);       --t-startups-line: var(--amber-line);
  --t-ai: var(--heather);           --t-ai-bg: var(--heather-bg);           --t-ai-line: var(--heather-line);
  --t-engineering: var(--teal);     --t-engineering-bg: var(--teal-bg);     --t-engineering-line: var(--teal-line);
  --t-product: var(--fig);          --t-product-bg: var(--fig-bg);          --t-product-line: var(--fig-line);

  /* Callouts */
  --note: var(--sky);   --note-bg: var(--sky-bg);   --note-line: var(--sky-line);
  --tip: var(--olive);  --tip-bg: var(--olive-bg);  --tip-line: var(--olive-line);
  --warn: var(--amber); --warn-bg: var(--amber-bg); --warn-line: var(--amber-line);
  --danger: #ff8f86;    --danger-bg: rgba(255, 90, 80, 0.14); --danger-line: #ff5a50;

  /* Typography */
  --font-display: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-text: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-ui: var(--font-text);
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Geometry */
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 20px;
  --wrap: 1180px;
  --gutter: clamp(18px, 4vw, 40px);
  --header-h: 64px;
}

/* ---------- Light ---------- */
:root[data-theme="light"],
:root.light {
  color-scheme: light;

  --bg: #fbfaf7;
  --bg-docs: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f2ec;
  --surface-3: #ebe8df;
  --panel: #efede6;
  --ink: #0b0b0a;
  --ink-soft: #2c2c29;
  --prose: #55544e;
  --muted: #6b6a63;
  --line: #e9e6dd;
  --line-strong: #d4d1c5;
  --grid: rgba(0, 0, 0, 0.05);

  --accent: #f5a800;
  --accent-hover: #dc9600;
  --accent-ink: #0a0a0a;
  --accent-text: #8f5c00;
  --accent-soft: rgba(245, 168, 0, 0.14);
  --accent-glow: 0 8px 28px rgba(245, 168, 0, 0.25);
  --mark: rgba(245, 168, 0, 0.45);

  --btn-bg: #0b0b0a;
  --btn-ink: #ffffff;
  --btn-hover: #2c2c29;
  --btn-quiet-bg: #f1efe8;
  --btn-quiet-hover: #e8e5dc;

  --header-bg: rgba(251, 250, 247, 0.85);
  --header-border: #e9e6dd;

  --card-bg: #ffffff;
  --card-border: #e4e1d6;
  --card-hover-border: #c8c4b5;
  --card-shadow: 0 1px 2px rgba(11, 11, 10, 0.04);
  --card-hover-shadow: 0 14px 34px rgba(11, 11, 10, 0.1);

  --code-bg: #f6f4ee;
  --code-bar-bg: #ece9e0;
  --code-ink: #26251f;
  --code-line: #dfdbcf;

  --amber:    #8f5c00; --amber-bg:    #fdf0c9; --amber-line:    #e8a200;
  --orange:   #a14a00; --orange-bg:   #ffe9d6; --orange-line:   #f28b30;
  --clay:     #a8482a; --clay-bg:     #f8e6de; --clay-line:     #d97757;
  --olive:    #3f6b26; --olive-bg:    #e6f1dc; --olive-line:    #6aa24d;
  --teal:     #17675d; --teal-bg:     #d9f1ed; --teal-line:     #21a090;
  --sky:      #1f5fa8; --sky-bg:      #e0edfd; --sky-line:      #4f96f0;
  --heather:  #4c3fb0; --heather-bg:  #e9e6fb; --heather-line:  #8c7df0;
  --fig:      #a02c64; --fig-bg:      #fbe5ef; --fig-line:      #dc6496;
  --slate:    #4a4a44; --slate-bg:    #ebe9e1; --slate-line:    #8d8b80;

  --danger: #a3302a;  --danger-bg: #fbe9e7; --danger-line: #d9645c;
}

/* Tone scope: any element with .tone-* exposes --tc, --tc-bg, --tc-line */
.tone-startups    { --tc: var(--t-startups);    --tc-bg: var(--t-startups-bg);    --tc-line: var(--t-startups-line); }
.tone-ai          { --tc: var(--t-ai);          --tc-bg: var(--t-ai-bg);          --tc-line: var(--t-ai-line); }
.tone-engineering { --tc: var(--t-engineering); --tc-bg: var(--t-engineering-bg); --tc-line: var(--t-engineering-line); }
.tone-product     { --tc: var(--t-product);     --tc-bg: var(--t-product-bg);     --tc-line: var(--t-product-line); }
.tone-marketing   { --tc: var(--orange);        --tc-bg: var(--orange-bg);        --tc-line: var(--orange-line); }
.tone-finance     { --tc: var(--olive);         --tc-bg: var(--olive-bg);         --tc-line: var(--olive-line); }
.tone-legal       { --tc: var(--slate);         --tc-bg: var(--slate-bg);         --tc-line: var(--slate-line); }
.tone-devtools    { --tc: var(--sky);           --tc-bg: var(--sky-bg);           --tc-line: var(--sky-line); }
.tone-amber       { --tc: var(--amber);   --tc-bg: var(--amber-bg);   --tc-line: var(--amber-line); }
.tone-orange      { --tc: var(--orange);  --tc-bg: var(--orange-bg);  --tc-line: var(--orange-line); }
.tone-clay        { --tc: var(--clay);    --tc-bg: var(--clay-bg);    --tc-line: var(--clay-line); }
.tone-kraft       { --tc: var(--orange);  --tc-bg: var(--orange-bg);  --tc-line: var(--orange-line); }
.tone-olive       { --tc: var(--olive);   --tc-bg: var(--olive-bg);   --tc-line: var(--olive-line); }
.tone-teal        { --tc: var(--teal);    --tc-bg: var(--teal-bg);    --tc-line: var(--teal-line); }
.tone-sky         { --tc: var(--sky);     --tc-bg: var(--sky-bg);     --tc-line: var(--sky-line); }
.tone-fig         { --tc: var(--fig);     --tc-bg: var(--fig-bg);     --tc-line: var(--fig-line); }
.tone-heather     { --tc: var(--heather); --tc-bg: var(--heather-bg); --tc-line: var(--heather-line); }
.tone-slate       { --tc: var(--slate);   --tc-bg: var(--slate-bg);   --tc-line: var(--slate-line); }