/* ============================================================
   PenPigeon design tokens
   Subject: the front counter of a small post office in the
   late-morning light. Daylight by default; an "after-hours"
   dark mode.

   Three states:
     - no attribute  → follow the OS (prefers-color-scheme)
     - [data-theme="light"] / [data-theme="dark"] → the toggle wins
   The dark palette is defined twice (media query + attribute) on
   purpose — components only ever read the token names.
   ============================================================ */

:root {
  /* ---- Surfaces (light / daylight) ---- */
  --bg: #f1e8d7;
  --bg-raised: #f8f2e6;
  --bg-sunken: #e7dcc3;
  --counter-bg: #e7dcc1;

  --surface: #e7d9bb;            /* kraft paper — stays lit in both modes */
  --surface-dim: #ded0ae;
  --surface-edge: rgba(60, 46, 28, 0.22);
  --paper: #fbf8f1;             /* writing paper / a sheet under the lamp */
  --paper-line: #e9e1cd;

  /* ---- Text ---- */
  --text: #2a2118;
  --text-dim: #5b5142;
  --text-faint: #8a7c66;

  /* Ink that is ALWAYS dark — printed on kraft/paper, which stay lit. */
  --ink: #221d17;
  --ink-soft: #4c4535;
  --ink-faint: #8b8371;

  /* Text that is ALWAYS light — on the red CTA band + the dim overlay. */
  --on-dark: #f2ece0;
  --on-dark-dim: #cbc2b0;
  --on-dark-faint: #9a907d;

  /* ---- Lines ---- */
  --border: rgba(42, 33, 24, 0.14);
  --border-strong: rgba(42, 33, 24, 0.26);
  --border-on-surface: rgba(34, 29, 23, 0.20);

  /* ---- Accents ---- */
  --postal-red: #b5392c;
  --postal-red-dark: #8c2b21;
  --postal-red-tint: rgba(181, 57, 44, 0.12);
  --airmail-blue: #33506f;
  --airmail-blue-bright: #2f4d6d;
  --airmail-blue-tint: rgba(51, 80, 111, 0.12);
  --link: var(--airmail-blue-bright);
  --brass: #9c7c3f;
  --brass-bright: #86672f;
  --stamp-gray: #8a8069;

  /* semantic */
  --good: #3f7d4f;
  --good-tint: rgba(63, 125, 79, 0.12);

  /* ---- Post-office motif ---- */
  --postmark-ink: rgba(140, 43, 33, 0.55);
  --perf-period: 13px;
  --perf-radius: 3.6px;
  --stamp-punch: var(--bg);
  --thread: #b58f57;
  --tape: rgba(196, 165, 100, 0.42);
  --tape-stripe: rgba(196, 165, 100, 0.24);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-opacity: 0.05;
  --grain-blend: multiply;

  /* ---- Type ---- */
  --font-display: "IBM Plex Serif", Georgia, serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Scale ---- */
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.05rem);
  --step-1: clamp(1.15rem, 1.08rem + 0.35vw, 1.3rem);
  --step-2: clamp(1.5rem, 1.35rem + 0.75vw, 1.9rem);
  --step-3: clamp(2rem, 1.7rem + 1.5vw, 2.75rem);
  --step-4: clamp(2.4rem, 2rem + 2.2vw, 3.7rem);

  /* ---- Misc ---- */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --shadow-card: 0 14px 34px -18px rgba(53, 40, 22, 0.4);
  --shadow-lift: 0 10px 26px -14px rgba(53, 40, 22, 0.38), 0 0 0 1px rgba(53, 40, 22, 0.06);
  --ease-pop: cubic-bezier(0.2, 1.4, 0.4, 1);
  --container: 1180px;

  /* ---- Back-compat aliases ---- */
  --shop: var(--bg);
  --shop-raised: var(--bg-raised);
  --shop-line: var(--border);
  --counter: var(--counter-bg);
  --counter-line: var(--border);
  --kraft: var(--surface);
  --kraft-dim: var(--surface-dim);
  --kraft-deep: var(--surface-dim);
  --parchment: var(--text);
  --parchment-dim: var(--text-dim);
  --parchment-faint: var(--text-faint);
  --hairline-on-kraft: var(--border-on-surface);
  --hairline-on-shop: var(--border);

  color-scheme: light;
}

/* --- the "after-hours" palette, kept in sync in both blocks below --- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1b1a20;
    --bg-raised: #232128;
    --bg-sunken: #151419;
    --counter-bg: #2a2420;

    --surface: #e7d9bb;
    --surface-dim: #d8c9a4;
    --surface-edge: rgba(0, 0, 0, 0.28);
    --paper: #faf7f0;
    --paper-line: #e8e0cc;

    --text: #efe9dd;
    --text-dim: #b6afa0;
    --text-faint: #8b8474;

    --border: rgba(239, 233, 221, 0.12);
    --border-strong: rgba(239, 233, 221, 0.24);
    --border-on-surface: rgba(34, 29, 23, 0.16);

    --postal-red: #c94f40;
    --postal-red-dark: #a8392c;
    --postal-red-tint: rgba(201, 79, 64, 0.18);
    --airmail-blue: #7ba2c6;
    --airmail-blue-bright: #7ba2c6;
    --airmail-blue-tint: rgba(122, 162, 198, 0.16);
    --brass: #c79a54;
    --brass-bright: #d3b46f;
    --stamp-gray: #948c78;

    --good: #6cc07f;
    --good-tint: rgba(108, 192, 127, 0.15);

    --postmark-ink: rgba(206, 96, 80, 0.5);
    --thread: #b58f57;
    --tape: rgba(211, 180, 111, 0.14);
    --tape-stripe: rgba(211, 180, 111, 0.09);
    --grain-opacity: 0.05;
    --grain-blend: soft-light;

    --shadow-card: 0 18px 40px -18px rgba(0, 0, 0, 0.6);
    --shadow-lift: 0 10px 30px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.08);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #1b1a20;
  --bg-raised: #232128;
  --bg-sunken: #151419;
  --counter-bg: #2a2420;

  --surface: #e7d9bb;
  --surface-dim: #d8c9a4;
  --surface-edge: rgba(0, 0, 0, 0.28);
  --paper: #faf7f0;
  --paper-line: #e8e0cc;

  --text: #efe9dd;
  --text-dim: #b6afa0;
  --text-faint: #8b8474;

  --border: rgba(239, 233, 221, 0.12);
  --border-strong: rgba(239, 233, 221, 0.24);
  --border-on-surface: rgba(34, 29, 23, 0.16);

  --postal-red: #c94f40;
  --postal-red-dark: #a8392c;
  --postal-red-tint: rgba(201, 79, 64, 0.18);
  --airmail-blue: #7ba2c6;
  --airmail-blue-bright: #7ba2c6;
  --airmail-blue-tint: rgba(122, 162, 198, 0.16);
  --brass: #c79a54;
  --brass-bright: #d3b46f;
  --stamp-gray: #948c78;

  --good: #6cc07f;
  --good-tint: rgba(108, 192, 127, 0.15);

  --postmark-ink: rgba(206, 96, 80, 0.5);
  --thread: #b58f57;
  --tape: rgba(211, 180, 111, 0.14);
  --tape-stripe: rgba(211, 180, 111, 0.09);
  --grain-opacity: 0.05;
  --grain-blend: soft-light;

  --shadow-card: 0 18px 40px -18px rgba(0, 0, 0, 0.6);
  --shadow-lift: 0 10px 30px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.08);

  color-scheme: dark;
}