/* ============================================================
   Quiet Automation — design tokens

   The palette is unchanged from the previous site: the same greens,
   the same off-white paper, the same near-black ink, the same ochre
   figure colour. Only the names moved, so the new layout and motion
   layer can reach them by role instead of by hex.

   Two themes. Day is the off-white paper the brand has always used;
   night is the deep green-black. The dark bands (#1B2521) that carried
   the audit and the closing panel before are now a token of their own
   and stay dark in both themes, exactly as they did.
   ============================================================ */

:root, html[data-theme="day"] {
  /* ---- Surfaces and ink ---- */
  --color-paper:      #F5F6F3;
  --color-paper-2:    #EEF0EC;
  --color-paper-3:    #E4E9E4;
  --color-card:       #FFFFFF;
  --color-rule:       #DCE1DC;
  --color-rule-soft:  #E7EAE6;
  --color-muted:      #6C7A74;
  --color-ink-2:      #3D4A45;
  --color-ink:        #232E2A;

  /* The contrast band. Dark in both themes: it is the same panel the
     audit and the closing call to action have always sat on. */
  --color-deep:       #1B2521;
  --color-deep-2:     #232E2A;
  --color-deep-ink:   #F5F6F3;
  --color-deep-muted: #A9B8B1;
  --color-deep-rule:  #33403A;
  --color-deep-hair:  rgba(255, 255, 255, 0.05);
  --color-deep-hover: rgba(255, 255, 255, 0.08);
  --color-deep-wash:  rgba(111, 168, 152, 0.16);

  /* ---- Accent: the brand green ---- */
  --color-accent:      #2E5D52;
  --color-accent-2:    #3E7A6C;
  --color-accent-ink:  #F5F6F3;
  --color-accent-wash: rgba(46, 93, 82, 0.10);
  --color-focus:       #2E5D52;
  /* On the dark bands the green has to lift or it disappears. */
  --color-accent-deep: #8FC0B1;

  /* ---- Ochre: figures only. Hours saved, prices, counts. ---- */
  --color-figure: #946F30;

  /* The live-status dot. Same green the ledger has always pulsed. */
  --color-live: #2E5D52;

  /* The field is additive light. On paper it is inverted into a soft
     ink mist instead, which is why day gets its own two numbers. */
  --field-blend: normal;
  --field-gain:  0.34;
}

html[data-theme="night"] {
  --color-paper:      #141A18;
  --color-paper-2:    #1B2320;
  --color-paper-3:    #222B27;
  --color-card:       #1B2320;
  --color-rule:       #2A342F;
  --color-rule-soft:  #212B26;
  --color-muted:      #93A099;
  --color-ink-2:      #C4CFC9;
  --color-ink:        #E6EAE6;

  --color-deep:       #0E1310;
  --color-deep-2:     #141A18;
  --color-deep-ink:   #F5F6F3;
  --color-deep-muted: #A9B8B1;
  --color-deep-rule:  #29332E;
  --color-deep-hair:  rgba(255, 255, 255, 0.05);
  --color-deep-hover: rgba(255, 255, 255, 0.08);
  --color-deep-wash:  rgba(111, 168, 152, 0.20);

  --color-accent:      #6FA898;
  --color-accent-2:    #8FC0B1;
  --color-accent-ink:  #0E1310;
  --color-accent-wash: rgba(111, 168, 152, 0.14);
  --color-focus:       #6FA898;
  --color-accent-deep: #8FC0B1;

  --color-figure: #C9A75F;
  --color-live:   #6FA898;

  --field-blend: additive;
  --field-gain:  1;

  color-scheme: dark;
}

:root {
  /* ---- Type: one family carries the page ---- */
  --font-display: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Outfit", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --text-xs:  0.8rem;
  --text-sm:  0.9rem;
  --text-md:  1.0625rem;
  --text-lg:  clamp(1.15rem, 1.02rem + 0.5vw, 1.45rem);
  --text-xl:  clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem);
  --text-2xl: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);

  /* Chapter headings run large. These are the page. */
  --text-3xl: clamp(2.1rem, 1.4rem + 2.7vw, 3.5rem);
  --text-4xl: clamp(2.8rem, 1.4rem + 5vw, 5.5rem);
  --text-display: clamp(2.5rem, 1.4rem + 3.6vw, 4.5rem);

  --tracking-display: -0.032em;
  --tracking-tight:   -0.02em;
  --tracking-label:   0.16em;

  --leading-display: 0.94;
  --leading-head:    1;
  --leading-body:    1.65;

  /* ---- Space ---- */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  --space-section:       clamp(7rem, 12vw, 14rem);
  --space-section-tight: clamp(4.5rem, 7vw, 8rem);

  /* ---- Shape ---- */
  --radius-card:  16px;
  --radius-lg:    24px;
  --radius-input: 12px;
  --radius-pill:  999px;
  --rule-hair:    1px;
  --wrap:         1200px;
  --wrap-wide:    1440px;
  --wrap-narrow:  760px;

  /* ---- Depth ---- */
  --shadow-whisper: 0 1px 2px rgba(20, 26, 24, 0.06);
  --shadow-raised:  0 12px 32px rgba(20, 26, 24, 0.10);
  --shadow-lifted:  0 40px 90px rgba(20, 26, 24, 0.16);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 240ms;
  --dur-long:  520ms;
  --dur-reveal: 700ms;

  /* ---- Z scale ---- */
  --z-under:      0;
  --z-base:       1;
  --z-raised:     10;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-sticky-nav: 300;
  --z-modal:      400;
  --z-toast:      500;
}

html[data-theme="night"] {
  --shadow-whisper: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-raised:  0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-lifted:  0 40px 90px rgba(0, 0, 0, 0.7);
}