/* ============================================================
   howToClaude — design tokens
   Light is the base; dark overrides only the token values.
   ============================================================ */

:root {
  /* --- brand ------------------------------------------------ */
  --accent:        #b4552b;   /* clay */
  --accent-soft:   #f4e5dd;
  --accent-ink:    #7d3719;
  --accent-2:      #2f6b78;   /* teal, for the second series */
  --accent-2-soft: #dceaed;

  /* --- surfaces --------------------------------------------- */
  --bg:            #faf9f7;
  --bg-elev:       #ffffff;
  --bg-sunken:     #f2f0ec;
  --bg-code:       #f6f4f0;
  --bg-rail:       #f7f5f2;

  /* --- ink -------------------------------------------------- */
  --ink:           #1c1a17;
  --ink-2:         #45403a;
  --ink-3:         #6d675f;
  --ink-4:         #8d867c;

  /* --- lines ------------------------------------------------ */
  --line:          #e3dfd8;
  --line-2:        #cec9c0;
  --line-strong:   #b3aca1;

  /* --- semantic --------------------------------------------- */
  --ok:            #2e7d54;
  --ok-soft:       #dff0e6;
  --warn:          #9a6a11;
  --warn-soft:     #fbeed3;
  --bad:           #b03030;
  --bad-soft:      #fadedd;
  --info:          #2f6b78;
  --info-soft:     #dceaed;
  --red-team:      #b03030;
  --red-team-soft: #fadedd;
  --blue-team:     #2b5aa8;
  --blue-team-soft:#dde6f7;

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

  --fs-xs:   0.75rem;
  --fs-sm:   0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md:   1.0rem;
  --fs-lg:   1.1875rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  1.9rem;
  --fs-3xl:  2.5rem;

  /* --- space / shape ---------------------------------------- */
  --r-sm: 5px;
  --r:    9px;
  --r-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(28,26,23,.06), 0 1px 1px rgba(28,26,23,.04);
  --shadow:    0 4px 14px rgba(28,26,23,.08), 0 1px 3px rgba(28,26,23,.06);
  --shadow-lg: 0 18px 44px rgba(28,26,23,.16), 0 3px 10px rgba(28,26,23,.08);

  --sidebar-w: 268px;
  --rail-w: 236px;
  --content-max: 780px;
  --header-h: 56px;

  color-scheme: light;
}

/* dark = explicit choice, or system preference when nothing is stamped */
:root[data-theme="dark"],
:root:not([data-theme="light"]) {
  /* placeholder so the cascade order is predictable; real values below */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent:        #e08a5c;
    --accent-soft:   #3a2419;
    --accent-ink:    #f2b892;
    --accent-2:      #6fb3c0;
    --accent-2-soft: #173034;

    --bg:            #16151a;
    --bg-elev:       #1e1d23;
    --bg-sunken:     #121116;
    --bg-code:       #1a1920;
    --bg-rail:       #191820;

    --ink:           #eceaf2;
    --ink-2:         #bab6c4;
    --ink-3:         #8b8797;
    --ink-4:         #6a6676;

    --line:          #2c2a34;
    --line-2:        #3a3745;
    --line-strong:   #4d4a5a;

    --ok:            #62c48d;
    --ok-soft:       #14301f;
    --warn:          #e0b048;
    --warn-soft:     #322611;
    --bad:           #ef7d7d;
    --bad-soft:      #3a1a1a;
    --info:          #6fb3c0;
    --info-soft:     #173034;
    --red-team:      #ef7d7d;
    --red-team-soft: #3a1a1a;
    --blue-team:     #86aaf0;
    --blue-team-soft:#1a2440;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow:    0 4px 16px rgba(0,0,0,.45);
    --shadow-lg: 0 20px 50px rgba(0,0,0,.6);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --accent:        #e08a5c;
  --accent-soft:   #3a2419;
  --accent-ink:    #f2b892;
  --accent-2:      #6fb3c0;
  --accent-2-soft: #173034;

  --bg:            #16151a;
  --bg-elev:       #1e1d23;
  --bg-sunken:     #121116;
  --bg-code:       #1a1920;
  --bg-rail:       #191820;

  --ink:           #eceaf2;
  --ink-2:         #bab6c4;
  --ink-3:         #8b8797;
  --ink-4:         #6a6676;

  --line:          #2c2a34;
  --line-2:        #3a3745;
  --line-strong:   #4d4a5a;

  --ok:            #62c48d;
  --ok-soft:       #14301f;
  --warn:          #e0b048;
  --warn-soft:     #322611;
  --bad:           #ef7d7d;
  --bad-soft:      #3a1a1a;
  --info:          #6fb3c0;
  --info-soft:     #173034;
  --red-team:      #ef7d7d;
  --red-team-soft: #3a1a1a;
  --blue-team:     #86aaf0;
  --blue-team-soft:#1a2440;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 4px 16px rgba(0,0,0,.45);
  --shadow-lg: 0 20px 50px rgba(0,0,0,.6);

  color-scheme: dark;
}