/* PhoneReady tokens: the brand base with Shawn's Evening palette baked in (picked 2026-09-23).
 * Section 1 is the shared brand scale; section 2 (Evening) re-points the colours. */
/* PhoneReady brand tokens. Shared by all five Hallmark mockups.
 * Hallmark theme route: custom (tuned) · vibe: "calm, plain-spoken, local, on your side"
 * paper: oklch(97.6% 0.007 80) · brand: oklch(43% 0.073 217) · accent: oklch(81% 0.148 79)
 * display: Fraunces · body: Atkinson Hyperlegible · axes: light / roman-serif / chromatic-amber
 * The brand hexes Shawn approved (#FAF7F2, #0E5A6B, #F4B63F, #16252B) converted to OKLCH.
 */
:root {
  /* Surfaces: warm paper, tinted toward the sun accent */
  --color-paper:        oklch(97.6% 0.007 80);
  --color-paper-2:      oklch(94.6% 0.013 80);
  --color-paper-3:      oklch(91.5% 0.018 80);
  --color-surface:      oklch(99.2% 0.005 80);

  /* Ink: deep teal-black, tinted toward the brand */
  --color-ink:          oklch(24% 0.022 225);
  --color-ink-2:        oklch(42% 0.020 225);
  --color-muted:        oklch(50% 0.018 225);
  --color-rule:         oklch(87% 0.014 80);
  --color-rule-2:       oklch(80% 0.016 80);

  /* Brand teal: primary buttons, the card header, the logo mark */
  --color-brand:        oklch(43% 0.073 217);
  --color-brand-deep:   oklch(35% 0.064 217);
  --color-brand-soft:   oklch(93.5% 0.020 210);
  --color-brand-ink:    oklch(98% 0.006 80);

  /* Sun accent: a highlighter, kept to a few percent of any screen */
  --color-accent:       oklch(81% 0.148 79);
  --color-accent-soft:  oklch(95% 0.045 85);
  --color-accent-ink:   oklch(26% 0.030 70);
  --color-accent-text:  oklch(45% 0.100 70);

  /* Say yes / politely pass, errors, focus */
  --color-yes:          oklch(47% 0.110 150);
  --color-yes-soft:     oklch(94% 0.030 150);
  --color-no:           oklch(50% 0.150 30);
  --color-no-soft:      oklch(94.5% 0.025 30);
  --color-error:        oklch(52% 0.170 28);
  --color-focus:        oklch(55% 0.160 65);

  /* Form field outlines: darker than dividers so older eyes can find the boxes (>= 3:1 on paper) */
  --color-field-border: oklch(60% 0.020 225);

  /* Roles that palettes can re-point. Defaults follow the brand above. */
  /* The sheet card is a printed page: it keeps its own ink even on a dark palette */
  --color-card:         var(--color-surface);
  --color-card-ink:     var(--color-ink);
  --color-card-ink-2:   var(--color-ink-2);
  --color-card-rule:    var(--color-rule);
  --color-card-head:    var(--color-brand);
  --color-card-head-ink: var(--color-brand-ink);
  --color-card-hl:      var(--color-accent-soft);
  /* Logo mark */
  --color-mark-bg:      var(--color-brand);
  --color-mark-line:    var(--color-brand-ink);
  --color-mark-check:   var(--color-accent);
  /* A highlighted row (mockup 4's "$80 Seniors" price). Matches the card's highlighted "First bill" row. */
  --color-highlight:        var(--color-accent-soft);
  --color-highlight-ink:    var(--color-ink);
  --color-highlight-ink-2:  var(--color-ink-2);
  --color-highlight-figure: var(--color-brand);
  /* A full-width feature band (mockup 4's "10+" section) */
  --color-band:         var(--color-brand-deep);
  --color-band-ink:     var(--color-brand-ink);
  --color-band-accent:  var(--color-accent);

  --shadow-card:        0 14px 30px oklch(24% 0.022 225 / 0.10);
  --shadow-float:       0 10px 24px oklch(24% 0.022 225 / 0.16);

  /* Type */
  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body:    "Atkinson Hyperlegible", ui-sans-serif, sans-serif;

  --text-2xs:     0.75rem;    /* 12px: uppercase tags only */
  --text-xs:      0.875rem;   /* 14px: meta only */
  --text-sm:      1rem;       /* 16px */
  --text-base:    1.125rem;   /* 18px: body, set large for older readers */
  --text-md:      1.375rem;   /* 22px */
  --text-lg:      1.75rem;    /* 28px */
  --text-xl:      2.25rem;    /* 36px */
  --text-display: clamp(2.5rem, 5vw + 1.25rem, 4.75rem);
  --text-display-s: clamp(1.875rem, 4vw + 1rem, 3.25rem);
  --text-numeral: clamp(3.5rem, 13vw, 6rem);
  --text-figure:  clamp(7rem, 34vw, 13rem);

  /* Space: 4pt scale, named by role */
  --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;

  --page-gutter: clamp(1rem, 4vw, 2rem);
  --measure:     36rem;

  --radius-card:  18px;
  --radius-input: 12px;
  --radius-btn:   14px;
  --radius-pill:  999px;
  --rule-hair:    1px;

  --tap:          3.25rem;   /* 52px: buttons and inputs share one height */

  /* 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:   220ms;
  --dur-long:    420ms;

  /* Layers */
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    400;
  --z-toast:    500;
}

/* Hallmark · palette study 5/5: Evening · theme: custom (tuned) · vibe: "lake at dusk, deep navy, porch-light yellow"
 * paper: oklch(20% 0.025 245) · brand: oklch(83% 0.140 82) yellow · accent: oklch(78% 0.100 195) turquoise
 * display: Fraunces · body: Atkinson Hyperlegible (unchanged) · axes: dark / roman-serif / chromatic-amber
 * The sheet card stays a light printed page. Dark pages suit some readers and not others (glare, astigmatism),
 * so this one is the "see the range" option. Load with ?palette=evening
 */
:root {
  color-scheme: dark;

  --color-paper:        oklch(20% 0.025 245);
  --color-paper-2:      oklch(24% 0.028 245);
  --color-paper-3:      oklch(28% 0.030 245);
  --color-surface:      oklch(25% 0.028 245);

  --color-ink:          oklch(95% 0.010 85);
  --color-ink-2:        oklch(81% 0.015 85);
  --color-muted:        oklch(72% 0.015 245);
  --color-rule:         oklch(34% 0.030 245);
  --color-rule-2:       oklch(42% 0.030 245);
  --color-field-border: oklch(60% 0.030 245);

  --color-brand:        oklch(83% 0.140 82);
  --color-brand-deep:   oklch(76% 0.140 78);
  --color-brand-soft:   oklch(31% 0.035 240);
  --color-brand-ink:    oklch(20% 0.025 245);

  --color-accent:       oklch(78% 0.100 195);
  --color-accent-soft:  oklch(94% 0.060 85);    /* tags: the same pale yellow as the card's highlighted row */
  --color-accent-ink:   oklch(20% 0.025 245);
  --color-accent-text:  oklch(20% 0.025 245);   /* navy text on that pale yellow */

  /* Shawn: the "$80 Seniors" row sits on the same background as the $100 and $150 rows. No highlight in Evening. */
  --color-highlight:        transparent;
  --color-highlight-ink:    oklch(95% 0.010 85);   /* = ink */
  --color-highlight-ink-2:  oklch(81% 0.015 85);   /* = ink-2 */
  --color-highlight-figure: oklch(83% 0.140 82);   /* = brand yellow, like $100 and $150 */
  --highlight-inset:        0px;

  --color-yes:          oklch(78% 0.130 150);
  --color-yes-soft:     oklch(30% 0.050 150);
  --color-no:           oklch(76% 0.120 30);
  --color-no-soft:      oklch(30% 0.050 30);
  --color-error:        oklch(74% 0.150 28);
  --color-focus:        oklch(82% 0.120 195);

  /* The card is a printed page: light, with its own dark ink */
  --color-card:          oklch(97.6% 0.007 80);
  --color-card-ink:      oklch(24% 0.022 225);
  --color-card-ink-2:    oklch(42% 0.020 225);
  --color-card-rule:     oklch(87% 0.014 80);
  --color-card-head:     oklch(30% 0.050 245);
  --color-card-head-ink: oklch(97% 0.008 85);
  --color-card-hl:       oklch(94% 0.060 85);

  --color-mark-check:   oklch(20% 0.025 245);   /* navy tick on the yellow logo */

  --color-band:         oklch(28% 0.030 245);
  --color-band-ink:     oklch(95% 0.010 85);
  --color-band-accent:  oklch(83% 0.140 82);

  /* Shadows stay dark on dark: no glow */
  --shadow-card:        0 14px 30px oklch(8% 0.020 245 / 0.55);
  --shadow-float:       0 10px 24px oklch(8% 0.020 245 / 0.60);
}