/* ============================================================
   NEXUM — Design tokens
   Source of truth: "Nexum Color System (Standalone).html"
   Gold is chrome only. It never signals a health status.
   ============================================================ */

/* Dark palette — the page default, and any .tone-deep band inside light theme */
:root,
.tone-deep {
  color-scheme: dark;

  --bg:            #0D0D0D;
  --surface:       #1A1A1A;
  --card:          #242424;
  --card-raised:   #2C2C2C;

  --accent:        #C9A24E;
  --accent-soft:   rgba(201, 162, 78, 0.14);
  --accent-line:   rgba(201, 162, 78, 0.34);
  --accent-ink:    #0D0D0D;

  --pos:           #6FB58D;
  --warn:          #D6A24F;
  --risk:          #D16A5B;
  --info:          #8A8F99;

  --fg-1:          rgba(255, 255, 255, 0.94);
  --fg-2:          rgba(255, 255, 255, 0.66);
  --fg-3:          rgba(255, 255, 255, 0.55);
  --fg-4:          rgba(255, 255, 255, 0.38);

  --line:          rgba(255, 255, 255, 0.08);
  --line-med:      rgba(255, 255, 255, 0.16);
  --line-strong:   rgba(255, 255, 255, 0.26);

  --trace:         rgba(255, 255, 255, 0.22);
  --shadow-lg:     0 30px 70px rgba(0, 0, 0, 0.55);
  --shadow-md:     0 16px 40px rgba(0, 0, 0, 0.42);
  --glow:          radial-gradient(60% 60% at 50% 45%, rgba(201,162,78,0.16), transparent 70%);
}

/* Light palette — theme=light, and any .tone-day band inside dark theme */
:root[data-theme="light"],
.tone-day {
  color-scheme: light;

  --bg:            #F2F2F2;
  --surface:       #FFFFFF;
  --card:          #FAFAFA;
  --card-raised:   #FFFFFF;

  --accent:        #9A7524;
  --accent-soft:   rgba(154, 117, 36, 0.10);
  --accent-line:   rgba(154, 117, 36, 0.30);
  --accent-ink:    #FFFFFF;

  --pos:           #3E8A62;
  --warn:          #A8761C;
  --risk:          #BC4636;
  --info:          #5E6672;

  --fg-1:          rgba(13, 13, 13, 0.94);
  --fg-2:          rgba(13, 13, 13, 0.68);
  --fg-3:          rgba(13, 13, 13, 0.58);
  --fg-4:          rgba(13, 13, 13, 0.42);

  --line:          rgba(13, 13, 13, 0.10);
  --line-med:      rgba(13, 13, 13, 0.16);
  --line-strong:   rgba(13, 13, 13, 0.26);

  --trace:         rgba(13, 13, 13, 0.22);
  --shadow-lg:     0 30px 70px rgba(13, 13, 13, 0.12);
  --shadow-md:     0 16px 40px rgba(13, 13, 13, 0.09);
  --glow:          radial-gradient(60% 60% at 50% 45%, rgba(154,117,36,0.10), transparent 70%);
}

:root {
  /* Type */
  --font-display: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-mono:    clamp(0.68rem, 0.655rem + 0.09vw, 0.75rem);
  --t-small:   clamp(0.82rem, 0.80rem + 0.10vw, 0.90rem);
  --t-body:    clamp(1.00rem, 0.965rem + 0.18vw, 1.10rem);
  --t-lead:    clamp(1.16rem, 1.05rem + 0.48vw, 1.45rem);
  --t-h3:      clamp(1.30rem, 1.15rem + 0.70vw, 1.85rem);
  --t-h2:      clamp(2.10rem, 1.45rem + 2.75vw, 4.60rem);
  --t-h1:      clamp(2.75rem, 1.70rem + 4.20vw, 5.00rem);
  --t-figure:  clamp(2.20rem, 1.60rem + 2.40vw, 3.60rem);

  /* Layout */
  --w-wide:   1460px;
  --w:        1200px;
  --w-mid:    980px;
  --w-narrow: 720px;
  --gutter:   clamp(1.25rem, 0.75rem + 2.4vw, 3.5rem);
  --chapter-y: clamp(5rem, 3rem + 8vw, 10.5rem);
  --nav-h:    64px;
  --banner-h: 44px;

  /* Radii — deliberately varied, never one uniform pill language */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur:  0.6s;
}

@media (max-width: 700px) {
  :root { --banner-h: 60px; }
}