/* ============================================================
   Before I Tell — design tokens
   Premium-playful, WARM: cream paper ground, tangerine/rust
   brand (no purple anywhere — user decree), espresso ink,
   full-strength mint/sun/coral sticker cards with ink outlines
   and hard pop shadows, springy motion. Chunky self-hosted
   Bricolage Grotesque display type (zero external requests).
   Light default, dark = warm charcoal night via
   [data-theme="dark"] or system pref.
   ============================================================ */

/* self-hosted variable font: latin subset, wght 400–800, opsz 12–96.
   Served same-origin from fonts/ — the zero-external-request
   guarantee holds. System stack fallback while it swaps in. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- type --- */
  --font-display: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-text:    -apple-system, BlinkMacSystemFont, "Segoe UI",
                  "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;

  --t-display-xl: clamp(42px, 7vw, 84px);
  --t-display-lg: clamp(36px, 5.5vw, 68px);
  --t-display-md: clamp(30px, 4.5vw, 54px);
  --t-head-lg:    clamp(28px, 4vw, 48px);
  --t-head-md:    clamp(24px, 3vw, 38px);
  --t-head-sm:    clamp(19px, 2.2vw, 26px);
  --t-body-lg:    19px;
  --t-body:       16px;
  --t-body-sm:    14px;
  --t-caption:    12px;

  /* --- spacing --- */
  --s-1: 4px;  --s-2: 8px;   --s-3: 16px;  --s-4: 24px;
  --s-5: 32px; --s-6: 48px;  --s-7: 64px;  --s-8: 96px;
  --s-9: 120px; --s-10: 160px; --s-11: 200px;

  /* --- containers --- */
  --w-text: 692px;
  --w-content: 980px;
  --w-wide: 1280px;
  --w-bleed: 1440px;

  /* --- motion --- */
  --ease-apple-standard: cubic-bezier(0.4, 0, 0.6, 1);
  --ease-apple-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-apple-spring:   cubic-bezier(0.34, 1.4, 0.44, 1);  /* playful overshoot */
  --ease-apple-in:       cubic-bezier(0.4, 0, 1, 1);
  /* refined entrance curves: expo-out decelerates harder for a "settle", soft
     spring has a gentler overshoot than the playful one (for content, not decor) */
  --ease-out-expo:       cubic-bezier(0.19, 1, 0.22, 1);
  --ease-spring-soft:    cubic-bezier(0.22, 1.12, 0.36, 1);

  /* --- radii: soft & friendly --- */
  --r-card: 28px;
  --r-input: 14px;
  --r-pill: 999px;

  /* ============ LIGHT PALETTE (default) ============ */
  --c-bg:          #fdf9f3;      /* warm paper, not clinical white */
  --c-bg-page:     #ffffff;
  --c-surface:     #f5efe6;
  --c-surface-2:   #ece4d8;
  --c-text:        #33261e;      /* espresso ink — warm, not purple-tinged */
  --c-text-2:      #6b5d52;
  --c-text-3:      #6b5d52;
  --c-divider:     #e7dfd2;
  --c-hairline:    #efe8dc;
  --c-border-strong: #96857a;   /* ≥3:1 non-text boundaries: inputs, checkboxes */

  /* sticker construction: outlines + hard offset pop shadows.
     --ink-line draws BORDERS; --pop-color draws SHADOWS. They coincide in
     light and split in dark (near-black outlines would dissolve on the
     charcoal ground). */
  --ink-line:      #33261e;
  --pop-color:     #33261e;
  --pop:           6px 6px 0 var(--pop-color);
  --pop-sm:        4px 4px 0 var(--pop-color);
  --pop-lg:        10px 10px 0 var(--pop-color);
  --btn-edge:      #7c2d08;      /* pressed-button underside */

  /* brand: warm tangerine. --c-accent is for DECOR and large type only
     (3.3:1 on cream); body-size text on light grounds uses --c-accent-deep
     (4.9:1 on cream, 4.6:1 on the soft peach). */
  --c-accent:      #e85d2f;
  --c-accent-h:    #d14e22;
  --c-accent-ink:  #ffffff;
  --c-accent-deep: #c2410c;
  --c-accent-soft: #fdeee6;

  /* buttons: deep rust ground so WHITE ink passes at every size */
  --c-btn-bg:      #c2410c;
  --c-btn-bg-h:    #a53709;
  --c-btn-ink:     #ffffff;

  /* level colors — surfaces only; text on them stays ink */
  --lv1:      #b9ead7;  --lv1-soft: #e3f7ef;   /* mint  — Ask */
  --lv2:      #ffd98e;  --lv2-soft: #fff1d6;   /* sun   — Codename */
  --lv3:      #ffc4b0;  --lv3-soft: #ffe6dd;   /* coral — Tell */

  --c-safe:        #1d7a46;
  --c-safe-soft:   #e3f7ef;
  --c-locked:      #6b5d52;
  --c-crisis-bg:   #fdf0ec;
  --c-crisis-edge: #b3261e;

  --takeover-dim:  rgba(253, 249, 243, 0.93);  /* ≥.9: typed crisis text must not bleed through */
  --panel-border:  rgba(51, 38, 30, 0.55);     /* ≥3:1 modal boundary */
  --panel-shadow:  0 12px 40px rgba(194, 65, 12, 0.15);
  --card-shadow:   0 8px 28px rgba(51, 38, 30, 0.08);

  --nav-bg:        rgba(253, 249, 243, 0.88);
  --nav-bg-scrolled: rgba(253, 249, 243, 0.97);

  color-scheme: light;
}

/* ============ DARK PALETTE — warm charcoal night, cozy not void ============ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg:          #201914;
    --c-bg-page:     #2a211b;
    --c-surface:     #332822;
    --c-surface-2:   #3e3129;
    --c-text:        #f7f1ea;
    --c-text-2:      #c4b5a8;
    --c-text-3:      #c4b5a8;
    --c-divider:     #453729;
    --c-hairline:    #382c22;
    --c-border-strong: #8a7666;

    --ink-line:      #8a7666;   /* borders stay visible on charcoal */
    --pop-color:     #120d09;   /* shadows stay near-black */
    --pop:           6px 6px 0 var(--pop-color);
    --pop-sm:        4px 4px 0 var(--pop-color);
    --pop-lg:        10px 10px 0 var(--pop-color);
    --btn-edge:      #b85426;

    --c-accent:      #ff8a5c;
    --c-accent-h:    #ffa073;
    --c-accent-ink:  #201914;
    --c-accent-deep: #ff8a5c;
    --c-accent-soft: #46281c;

    --c-btn-bg:      #ff8a5c;
    --c-btn-bg-h:    #ffa073;
    --c-btn-ink:     #201914;

    --lv1:      #335a4b;  --lv1-soft: #22352e;
    --lv2:      #5c4b26;  --lv2-soft: #37301e;
    --lv3:      #5c3b30;  --lv3-soft: #382723;

    --c-safe:        #4cc47e;
    --c-safe-soft:   #22352e;
    --c-locked:      #c4b5a8;
    --c-crisis-bg:   #3a2420;
    --c-crisis-edge: #ff8a7a;

    --takeover-dim:  rgba(32, 25, 20, 0.94);
    --panel-border:  rgba(247, 241, 234, 0.4);
    --panel-shadow:  0 12px 40px rgba(0, 0, 0, 0.5);
    --card-shadow:   0 8px 28px rgba(0, 0, 0, 0.3);

    --nav-bg:        rgba(32, 25, 20, 0.88);
    --nav-bg-scrolled: rgba(32, 25, 20, 0.97);

    color-scheme: dark;
  }
}

/* Explicit user choice always wins, both directions */
:root[data-theme="dark"] {
  --c-bg:          #201914;
  --c-bg-page:     #2a211b;
  --c-surface:     #332822;
  --c-surface-2:   #3e3129;
  --c-text:        #f7f1ea;
  --c-text-2:      #c4b5a8;
  --c-text-3:      #c4b5a8;
  --c-divider:     #453729;
  --c-hairline:    #382c22;
  --c-border-strong: #8a7666;

  --ink-line:      #8a7666;   /* borders stay visible on charcoal */
  --pop-color:     #120d09;   /* shadows stay near-black */
  --pop:           6px 6px 0 var(--pop-color);
  --pop-sm:        4px 4px 0 var(--pop-color);
  --pop-lg:        10px 10px 0 var(--pop-color);
  --btn-edge:      #b85426;

  --c-accent:      #ff8a5c;
  --c-accent-h:    #ffa073;
  --c-accent-ink:  #201914;
  --c-accent-deep: #ff8a5c;
  --c-accent-soft: #46281c;

  --c-btn-bg:      #ff8a5c;
  --c-btn-bg-h:    #ffa073;
  --c-btn-ink:     #201914;

  --lv1:      #335a4b;  --lv1-soft: #22352e;
  --lv2:      #5c4b26;  --lv2-soft: #37301e;
  --lv3:      #5c3b30;  --lv3-soft: #382723;

  --c-safe:        #4cc47e;
  --c-safe-soft:   #22352e;
  --c-locked:      #c4b5a8;
  --c-crisis-bg:   #3a2420;
  --c-crisis-edge: #ff8a7a;

  --takeover-dim:  rgba(32, 25, 20, 0.94);
  --panel-border:  rgba(247, 241, 234, 0.4);
  --panel-shadow:  0 12px 40px rgba(0, 0, 0, 0.5);
  --card-shadow:   0 8px 28px rgba(0, 0, 0, 0.3);

  --nav-bg:        rgba(32, 25, 20, 0.88);
  --nav-bg-scrolled: rgba(32, 25, 20, 0.97);

  color-scheme: dark;
}