/* WishNap design tokens — ported from Shared/DesignSystem/Tokens (Palette.swift,
   Layout.swift) and the Design/boards CSS. This file is the only place the site
   spells out a color. The app has a single light appearance; so does the site. */

:root {
  /* Surfaces */
  --base: #FAF7F2;
  --card: #FFFDF9;
  --card-alt: #F3EDE5;
  --hairline: #EFE6DA;
  --frost: #FFFAF4;

  /* Text */
  --ink: #2B211C;
  --ink-muted: #6E5F55;
  --ink-soft: #7A6A5F;
  --ink-faint: #8A7B70;
  --ink-ghost: #B8A99C;

  /* Accent — terracotta */
  --accent: #A94E2C;
  --accent-deep: #8E3F22;
  --accent-mid: #B4532F;
  --accent-soft: #C9694A;

  /* Lavender — gradients and mascot only, never a control */
  --lav-900: #B9A3E6;
  --lav-700: #C7B4EE;
  --lav-500: #D2C2EE;
  --lav-300: #E8E0F2;
  --lav-100: #E6DDF3;

  /* Warmth */
  --blob-warm: #D8907A;
  --amber: #F2B25C;
  --peach: #F3B98A;
  --peach-deep: #E4A284;

  /* Night — the expiry prompt (main-04) */
  --night-ground: #17120F;
  --night-tile: #2A221E;
  --night-glyph: #CDBFB2;
  --night-text: #F3EDE6;
  --night-muted: #B8A99C;
  --night-answer: #F4E6D3;
  --night-outline: #8C7A6D;

  /* Progress */
  --timer-track: #F0EAE2;
  --timer-fill: #C9B7EA;
  --goal-track: #F1E8DC;

  /* Translucent */
  --ink-line: rgba(43, 33, 28, 0.12);
  --ink-line-strong: rgba(43, 33, 28, 0.14);

  /* Type — SF Pro via the system stack; numerals in SF Pro Rounded (ui-rounded),
     Nunito only as the fallback where ui-rounded doesn't exist. */
  --font-text: -apple-system, "SF Pro Text", "SF Pro Display", BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
  --font-num: ui-rounded, "SF Pro Rounded", "Nunito", -apple-system, system-ui, sans-serif;

  /* Shape */
  --radius-card: 20px;
  --radius-button: 14px;
  --radius-callout: 16px;
  --radius-sheet: 22px;
  --radius-pill: 999px;

  /* The two-layer warm card shadow the boards use everywhere */
  --shadow-card: 0 1px 2px rgba(60, 40, 25, 0.04), 0 10px 28px rgba(60, 40, 25, 0.06);
  --shadow-lift: 0 2px 4px rgba(60, 40, 25, 0.05), 0 24px 60px rgba(60, 40, 25, 0.10);

  /* Grain — the signature texture: 180px tile, overlay blend, 0.3 */
  --grain: url("../media/grain.png");
  --grain-size: 180px;
  --grain-opacity: 0.3;

  /* Motion — slow and quiet */
  --ease-calm: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-rise: 900ms;
}

/* Numerals: SF Pro Rounded, tabular figures */
.num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Put `.grain` on any element that paints a gradient (must be position:relative
   or have a positioned ancestor); it lays the app's real grain tile over it. */
.grain::after,
.grain-layer {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: var(--grain-size) var(--grain-size);
  mix-blend-mode: overlay;
  opacity: var(--grain-opacity);
  pointer-events: none;
  border-radius: inherit;
}

/* loop demo — board colors the demo phone needs that had no token yet
   (cap-01, main-01, main-04, main-07), plus the demo's own phone chrome. */
:root {
  /* cap-01: the shop page behind the share sheet */
  --ld-white: #FFFFFF;
  --ld-urlbar: #EFEFF2;
  --ld-hero: #EEE9E3;
  --ld-hero-glyph: #B5ABA1;
  --ld-skel-1: #ECE8E3;
  --ld-skel-2: #E3DDD6;
  --ld-dim: rgba(20, 14, 10, 0.42);
  --ld-sheet-shadow: 0 -8px 30px rgba(0, 0, 0, 0.15);
  --ld-grabber: rgba(43, 33, 28, 0.18);
  --ld-callout: #F3ECF9;
  --ld-callout-glyph: #6D55B0;

  /* main-01: Parked list */
  --ld-add: #F4E9DF;
  --ld-thumb-candle: #EFE4D8;
  --ld-thumb-sneaker: #F2E3D6;
  --ld-thumb-lamp: #E7E3D8;
  --ld-thumb-jacket: #E5E6DD;
  --ld-chip: #F7E6DA;
  --ld-tabbar: rgba(250, 247, 242, 0.94);

  /* main-04: night glow */
  --ld-night-glow: rgba(185, 163, 230, 0.14);
  --ld-night-glow-0: rgba(185, 163, 230, 0);

  /* main-07: let-it-go sunrise */
  --ld-win-ground: #F2B77A;
  --ld-win-sun: #FFE3AE;
  --ld-win-sun-0: rgba(255, 227, 174, 0);
  --ld-win-clay: #E9906B;
  --ld-win-clay-0: rgba(233, 144, 107, 0);
  --ld-win-lilac: #C3AEEB;
  --ld-win-lilac-0: rgba(195, 174, 235, 0);
  --ld-win-ember: #D8795A;
  --ld-win-ember-0: rgba(216, 121, 90, 0);
  --ld-win-pill: rgba(255, 250, 244, 0.55);

  /* The demo's phone (not from a board) */
  --ld-bezel: #1B1512;
  --ld-bezel-edge: #3B302A;
  --ld-island: #060504;
  --ld-skip-scrim: rgba(250, 247, 242, 0.74);
  --ld-phone-shadow: 0 2px 6px rgba(43, 33, 28, 0.10), 0 28px 64px rgba(60, 40, 25, 0.20);
}

/* Page — board colors the ported screens (css/screens.css) need that had no
   token yet (sav-01, sav-02, main-04, ins-01..05), plus a few page-only tones.
   Added by the page agent. */
:root {
  /* sav-01 */
  --sc-bar: #E3D8F2;
  --sc-goal-tile: #FBEBD3;
  --sc-goal-glyph: #A2661E;
  --sc-goal-track-sm: #F3EADF;
  --sc-amber-glow: rgba(242, 178, 92, 0.28);
  /* sav-02 */
  --sc-wave: #E4D9CB;
  /* main-04 */
  --sc-night-glow: rgba(185, 163, 230, 0.14);
  /* ins-01..04 story cards */
  --sc-story-on: rgba(43, 33, 28, 0.85);
  --sc-story-off: rgba(43, 33, 28, 0.2);
  --sc-story-card: rgba(255, 250, 244, 0.6);
  --sc-dusk-a: #EDB590;
  --sc-dusk-b: #A993DE;
  --sc-dusk-c: #C4B2EC;
  --sc-dusk-ground: #CDB6E2;
  --sc-sun-a: #FFE0A6;
  --sc-sun-b: #D9805F;
  --sc-sun-c: #C9B4EC;
  --sc-sun-ground: #F1B679;
  /* ins-05 heat scale (the lighter steps are --card-alt, --lav-100, --lav-500, --lav-900) */
  --sc-heat-4: #9D84D8;
  --sc-heat-5: #6E55B4;
  --sc-moon: #6D55B0;

  /* Page-only */
  --page-scrim: rgba(23, 18, 15, 0.72);      /* night ground, for text over the room photo */
  --page-scrim-0: rgba(23, 18, 15, 0);
  --page-night-line: rgba(243, 237, 230, 0.14);
  --page-night-edge: rgba(243, 237, 230, 0.22);  /* the phone's rim on the night ground */
  --page-wash: rgba(250, 247, 242, 0.78);    /* base, for text over light fields */
  --page-bar: #FAF7F2;                       /* the slim bar: solid cream, so over the night section the
                                                primary lockup still sits on a clean cream ground */
  --page-chip: #F7E6DA;
}