/*
  Quiet design system 1.0.0 (2026-10-23): tokens.
  Every value the components read lives here. Light on :root, dark through the system
  preference or an explicit data-theme attribute on <html>. Bookend values are named tokens
  so a forced-dark band can be measured and remapped in one place.
*/

:root {
  color-scheme: light;

  /* Surfaces */
  --qt-canvas: #ffffff;
  --qt-surface: #ffffff;
  --qt-surface-soft: #f6f4f0;
  --qt-surface-sunk: #efece6;

  /* Text */
  --qt-ink: #16130f;
  --qt-body: #38332c;
  --qt-muted: #524c45;

  /* Lines */
  --qt-hair: #e7e2d9;
  --qt-hair-soft: #efebe4;
  --qt-stroke: #8b857b;

  /* Action */
  --qt-link: #145638;
  --qt-link-hover: #0d3b26;
  --qt-buy: #17603f;
  --qt-buy-hover: #0f4a30;
  --qt-buy-ink: #ffffff;
  --qt-buy-shadow: 0 1px 2px rgba(9, 41, 26, 0.28), 0 8px 20px rgba(9, 41, 26, 0.16);
  --qt-focus: #b45309;
  --qt-tint: #e8f2ec;
  --qt-ok: #17603f;
  --qt-warn: #8a4b06;
  --qt-error: #922016;
  --qt-error-soft: #fbeceb;

  /* Cream straight-talk card */
  --qt-cream: #f8efde;
  --qt-cream-ink: #4f3a12;
  --qt-cream-body: #4a3c22;
  --qt-cream-hair: #eadbbd;

  /* Status chips */
  --qt-chip-included-bg: #e3f1e9;
  --qt-chip-included-ink: #125235;
  --qt-chip-new-bg: #fbeccc;
  --qt-chip-new-ink: #6b4508;
  --qt-chip-planned-bg: #eeebe6;
  --qt-chip-planned-ink: #4d4840;

  /* Bookend (forced dark band for the hero and the close) */
  --qt-bookend-bg: #14110d;
  --qt-bookend-surface: #1e1a15;
  --qt-bookend-surface-soft: #1a1612;
  --qt-bookend-surface-sunk: #241f19;
  --qt-bookend-ink: #f8f4ed;
  --qt-bookend-body: #dcd4c7;
  --qt-bookend-muted: #b9b0a2;
  --qt-bookend-hair: #2f2a23;
  --qt-bookend-hair-soft: #26211b;
  --qt-bookend-stroke: #776f63;
  --qt-bookend-link: #7fd6a5;
  --qt-bookend-buy: #1d7149;
  --qt-bookend-buy-hover: #17603f;
  --qt-bookend-focus: #f0a64a;
  --qt-bookend-tint: #1d2a21;
  --qt-bookend-chip-bg: #2a251f;
  --qt-bookend-chip-ink: #e7dfd2;
  --qt-bookend-chip-included-bg: #173326;
  --qt-bookend-chip-included-ink: #9ce3bb;
  --qt-bookend-chip-new-bg: #3a2a0e;
  --qt-bookend-chip-new-ink: #f5c46b;

  /* Screenshot palette: coded product mocks keep the page theme even inside a bookend */
  --qt-shot-surface: #ffffff;
  --qt-shot-surface-soft: #f7f6f3;
  --qt-shot-sunk: #eeebe5;
  --qt-shot-ink: #16130f;
  --qt-shot-body: #3a352e;
  --qt-shot-muted: #6b655c;
  --qt-shot-hair: #e5e0d7;
  --qt-shot-hair-soft: #eeeae3;
  --qt-shot-accent: #17603f;
  --qt-shot-accent-soft: #dcefe4;
  --qt-shot-accent-ink: #ffffff;
  --qt-shot-ok-bg: #e3f1e9;
  --qt-shot-ok-ink: #125235;
  --qt-shot-warn-bg: #fbeccc;
  --qt-shot-warn-ink: #6b4508;
  --qt-shot-idle-bg: #eeebe6;
  --qt-shot-idle-ink: #4d4840;

  /* Shadows */
  --qt-shadow-shot: 0 30px 70px -20px rgba(0, 0, 0, 0.45);
  --qt-shadow-shot-canvas: 0 1px 2px rgba(22, 19, 15, 0.06), 0 18px 40px -18px rgba(22, 19, 15, 0.22);
  --qt-shot-outline: rgba(255, 255, 255, 0.14);

  /* Type */
  --qt-font-head: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --qt-font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --qt-font-mono: ui-monospace, Consolas, "Liberation Mono", monospace;
  --qt-fw-body: 400;
  --qt-fw-strong: 600;
  --qt-fw-head: 700;
  --qt-fw-display: 760;

  /* Ladder: 48 / 34 / 24 / 20 / 17 / 15 / 14 / 12. Whitespace around + inside clamp() is required. */
  --qt-fs-1: clamp(2.25rem, 1.75rem + 2vw, 3rem);
  --qt-fs-2: clamp(1.75rem, 1.45rem + 1.2vw, 2.125rem);
  --qt-fs-3: 1.5rem;
  --qt-fs-4: 1.25rem;
  --qt-fs-5: 1.0625rem;
  --qt-fs-6: 0.9375rem;
  --qt-fs-7: 0.875rem;
  --qt-fs-8: 0.75rem;
  --qt-lh-tight: 1.08;
  --qt-lh-head: 1.15;
  --qt-lh-snug: 1.35;
  --qt-lh-body: 1.6;
  --qt-track-display: -0.03em;
  --qt-track-head: -0.02em;

  /* Space */
  --qt-s1: 0.5rem;
  --qt-s2: 0.75rem;
  --qt-s3: 1rem;
  --qt-s4: 1.5rem;
  --qt-s5: 2rem;
  --qt-s6: 2.5rem;
  --qt-s7: clamp(2.25rem, 1.8rem + 2vw, 3.25rem);
  --qt-s8: clamp(3.5rem, 2.6rem + 4vw, 5.5rem);
  --qt-s9: clamp(4rem, 3rem + 4.5vw, 6.25rem);

  /* Widths */
  --qt-w: 1120px;
  --qt-w-narrow: 880px;
  --qt-read: 580px;
  --qt-gut: clamp(1.25rem, 0.9rem + 1.6vw, 2rem);

  /* Radius */
  --qt-r-btn: 8px;
  --qt-r-card: 16px;
  --qt-r-shot: 12px;
  --qt-r-chip: 6px;
  --qt-r-input: 8px;

  /* Motion */
  --qt-ease: cubic-bezier(0.25, 1, 0.5, 1);
  --qt-dur: 0.18s;
  --qt-dur-slow: 0.32s;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --qt-canvas: #11100e;
    --qt-surface: #1a1815;
    --qt-surface-soft: #1c1a17;
    --qt-surface-sunk: #24211d;
    --qt-ink: #f7f4ef;
    --qt-body: #ddd6cb;
    --qt-muted: #b8b0a4;
    --qt-hair: #2c2823;
    --qt-hair-soft: #24211d;
    --qt-stroke: #736c62;
    --qt-link: #86d9ab;
    --qt-link-hover: #b4ecca;
    --qt-buy: #1d7149;
    --qt-buy-hover: #17603f;
    --qt-buy-ink: #ffffff;
    --qt-buy-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    --qt-focus: #f0a64a;
    --qt-tint: #19281f;
    --qt-ok: #86d9ab;
    --qt-warn: #f5c46b;
    --qt-error: #ff9d8f;
    --qt-error-soft: #3a1a16;
    --qt-cream: #241d12;
    --qt-cream-ink: #f3dcaa;
    --qt-cream-body: #e6d3ad;
    --qt-cream-hair: #3a2f1d;
    --qt-chip-included-bg: #173326;
    --qt-chip-included-ink: #9ce3bb;
    --qt-chip-new-bg: #3a2a0e;
    --qt-chip-new-ink: #f5c46b;
    --qt-chip-planned-bg: #2a2723;
    --qt-chip-planned-ink: #cfc7bb;
    --qt-bookend-bg: #0a0908;
    --qt-bookend-surface: #16130f;
    --qt-bookend-surface-soft: #121009;
    --qt-bookend-surface-sunk: #1c1915;
    --qt-bookend-hair: #26221d;
    --qt-bookend-hair-soft: #1d1a16;
    --qt-shadow-shot: none;
    --qt-shadow-shot-canvas: none;
    --qt-shot-outline: rgba(255, 255, 255, 0.1);
    --qt-shot-surface: #1a1815;
    --qt-shot-surface-soft: #161411;
    --qt-shot-sunk: #24211d;
    --qt-shot-ink: #f7f4ef;
    --qt-shot-body: #d8d1c6;
    --qt-shot-muted: #a39b8f;
    --qt-shot-hair: #2e2a25;
    --qt-shot-hair-soft: #26231f;
    --qt-shot-accent: #3f9d6d;
    --qt-shot-accent-soft: #1b3326;
    --qt-shot-accent-ink: #0b130e;
    --qt-shot-ok-bg: #173326;
    --qt-shot-ok-ink: #9ce3bb;
    --qt-shot-warn-bg: #3a2a0e;
    --qt-shot-warn-ink: #f5c46b;
    --qt-shot-idle-bg: #2a2723;
    --qt-shot-idle-ink: #cfc7bb;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --qt-canvas: #11100e;
  --qt-surface: #1a1815;
  --qt-surface-soft: #1c1a17;
  --qt-surface-sunk: #24211d;
  --qt-ink: #f7f4ef;
  --qt-body: #ddd6cb;
  --qt-muted: #b8b0a4;
  --qt-hair: #2c2823;
  --qt-hair-soft: #24211d;
  --qt-stroke: #736c62;
  --qt-link: #86d9ab;
  --qt-link-hover: #b4ecca;
  --qt-buy: #1d7149;
  --qt-buy-hover: #17603f;
  --qt-buy-ink: #ffffff;
  --qt-buy-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --qt-focus: #f0a64a;
  --qt-tint: #19281f;
  --qt-ok: #86d9ab;
  --qt-warn: #f5c46b;
  --qt-error: #ff9d8f;
  --qt-error-soft: #3a1a16;
  --qt-cream: #241d12;
  --qt-cream-ink: #f3dcaa;
  --qt-cream-body: #e6d3ad;
  --qt-cream-hair: #3a2f1d;
  --qt-chip-included-bg: #173326;
  --qt-chip-included-ink: #9ce3bb;
  --qt-chip-new-bg: #3a2a0e;
  --qt-chip-new-ink: #f5c46b;
  --qt-chip-planned-bg: #2a2723;
  --qt-chip-planned-ink: #cfc7bb;
  --qt-bookend-bg: #0a0908;
  --qt-bookend-surface: #16130f;
  --qt-bookend-surface-soft: #121009;
  --qt-bookend-surface-sunk: #1c1915;
  --qt-bookend-hair: #26221d;
  --qt-bookend-hair-soft: #1d1a16;
  --qt-shadow-shot: none;
  --qt-shadow-shot-canvas: none;
  --qt-shot-outline: rgba(255, 255, 255, 0.1);
  --qt-shot-surface: #1a1815;
  --qt-shot-surface-soft: #161411;
  --qt-shot-sunk: #24211d;
  --qt-shot-ink: #f7f4ef;
  --qt-shot-body: #d8d1c6;
  --qt-shot-muted: #a39b8f;
  --qt-shot-hair: #2e2a25;
  --qt-shot-hair-soft: #26231f;
  --qt-shot-accent: #3f9d6d;
  --qt-shot-accent-soft: #1b3326;
  --qt-shot-accent-ink: #0b130e;
  --qt-shot-ok-bg: #173326;
  --qt-shot-ok-ink: #9ce3bb;
  --qt-shot-warn-bg: #3a2a0e;
  --qt-shot-warn-ink: #f5c46b;
  --qt-shot-idle-bg: #2a2723;
  --qt-shot-idle-ink: #cfc7bb;
}