/*
 * Dear Santy - tokens.css: the approved look (docs/design-mockups/README.md, ported from kit.css).
 * The original Santa List palette: red #BB010B, green #006F57, off-white #FAF8F8 with a faint pink
 * "x" pattern, white cards, Pacifico script headings, Nunito for everything else. Components live in
 * ui.css and use only these names.
 *
 * DAY AND NIGHT (docs/design-mockups/5-day-night.html). The colours below are DAY. html[data-theme="night"]
 * redefines the role names after the :root block. shared/theme.js sets data-theme on <html> before first
 * paint: the person's choice (Auto / Day / Night, kept per device) or, on Auto, prefers-color-scheme. So
 * there is no prefers-color-scheme block in any stylesheet; the attribute is the one switch, and the street
 * scene (scene.js) and the palette can never disagree. Two kinds of red and green: --red-dark / --green-dark
 * are TEXT and line colours (headings, links, icons, outlines); --btn-red / --btn-green are FILLS that carry
 * white text. They are the same at day and differ at night. Nothing outside this file writes a colour
 * that a theme must change.
 *
 * Fonts are self-hosted in web/shared/fonts/ (Pacifico, Nunito and Patrick Hand, SIL OFL; the licence text is in
 * fonts/LICENSES.md). Latin subset.
 */

@font-face { font-family: "Pacifico"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Pacifico-latin.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap; src: url("fonts/Nunito-latin-variable.woff2") format("woff2"); }   /* Stephen chose it 2026-10-15 (option B); SIL OFL */
@font-face { font-family: "Patrick Hand"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/PatrickHand-latin.woff2") format("woff2"); }   /* the body of Santy's letters (Stephen, 2026-10-24, option B); SIL OFL */

:root {
  color-scheme: light;

  /* the kit palette: text colours, then fills */
  --head: #BB010B;           /* Pacifico headings, big numbers, red text */
  --green: #006F57;          /* green text, links, icons, outlines */
  --red-dark: var(--head);
  --green-dark: var(--green);
  --red-light: #CD1624;
  --green-light: #23856D;
  --btn-red: #BB010B;        /* a red fill with white text on it */
  --btn-green: #006F57;      /* a green fill with white text on it */
  --off-white: #FAF8F8;

  /* older names kept so web/kid and web/parent keep working: values remapped to the kit */
  --santy-red: var(--btn-red);   /* the wax seal */
  --post-green: var(--green-dark);
  --paper: #F3EDED;          /* a quiet tint (thumbnails, avatars) */
  --snow: var(--off-white);
  --ink: #333333;
  --quiet: #777777;
  --fog: #BBBBBB;
  --star: #E8B94A;           /* stars, gold accents */
  --star-gold: var(--star);
  --cheek: #E8A088;
  --night: var(--surface);
  --night-surface: var(--surface);

  /* roles */
  --bg: var(--off-white);
  --surface: #FFFFFF;        /* cards, app bar, tab bar */
  --surface-2: #FFFFFF;
  --input-bg: #FFFFFF;       /* text boxes */
  --text: var(--ink);
  --text-quiet: var(--quiet);
  --red-text: var(--red-dark);
  --green-text: var(--green-dark);
  --line: #E4DEDE;
  --line-input: #CCCCCC;
  --veil: rgba(0, 0, 0, 0.45);
  --on-red: #FFFFFF;
  --on-green: #FFFFFF;
  --on-gold: #333333;
  --focus: var(--green-dark);
  --focus-ring: 0 0 0 3px rgba(0, 111, 87, 0.15);
  --muted: #BBBBBB;
  --tint-red: #FBE5E6;       /* pill and note backgrounds */
  --tint-red-soft: #FDF3F3;
  --tint-red-line: #F3D6D7;
  --tint-green: #E1F1EC;
  --tint-green-soft: #EEF7F4;
  --tint-green-line: #CFE7DF;
  --pattern: url("pattern.svg");
  --pill-g-bg: #E1F1EC; --pill-g-fg: #006F57;
  --pill-r-bg: #FBE5E6; --pill-r-fg: #BB010B;
  --kid-a: #BB010B; --kid-b: #CD1624;          /* a child's heading band, left and right */
  --on-kid: #FFF3E0;
  --track: #EDE6E6;          /* progress tracks */
  --paper-rule: #F1E4E4;     /* letter-paper rules */
  --hint: #AAAAAA;           /* placeholder text */
  --dim: #B7AEAE;            /* a switched-off icon, a grip */
  --ghost: #E5DEDE;          /* an empty star or flake */
  --toggle-off: #D8D1D1;
  --star-dim: #D3B052;       /* an unlit star */
  --ink-blue: #5A6B94;       /* the postmark's ink */
  --code-bg: #FFF7E0;
  --done-bg: #F4F2F2;        /* a present that is finished */
  --done-fg: #999999;
  --mark: #FDE9B8;
  --soft-surface: rgba(255, 255, 255, 0.85);
  --flake-on: #C80000;       /* a lit snowflake */
  --flake-glow: rgba(200, 0, 0, 0.5);
  --nav: #555555;            /* sidebar links */
  --badge: transparent;      /* backing behind the logo (a cream disc at night) */
  --glow: none;

  /* type */
  --font-ui: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-santa: "Pacifico", cursive;      /* script headings, and Santa's voice */
  --font-script: var(--font-santa);
  --font-letter: "Patrick Hand", var(--font-ui);   /* the body of what Santy writes: dark ink, on ruled lines */
  --letter-R: 36px;                                /* the ruled-line spacing; every line of a letter is exactly this tall */
  /* one rule tile, exactly R tall, so background-position-y can slide it to any offset without a seam */
  --letter-tile: linear-gradient(transparent 0 calc(var(--letter-R) - 1px), var(--paper-rule) calc(var(--letter-R) - 1px) var(--letter-R));
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-label: 16px;
  --fs-title: 30px;          /* page heading, Pacifico */
  --fs-santa: 24px;
  --fs-santa-title: 30px;
  --fs-big-number: 48px;
  --lh: 1.5;
  --measure: 32em;

  /* space, shape, motion */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --radius: 14px;
  --radius-small: 6px;
  --radius-pill: 999px;
  --tap: 48px;
  --tap-big: 56px;           /* little children's tap targets (kid.css) */
  --tap-hero: 64px;
  /* THE BUTTON SCALE (one scale for every button, both apps; ui.css "Buttons" says which role takes which size).
     Main = Primary, Secondary, Positive (and the pinned slot). Compact = Choice (Yes / Maybe / No, stars, Auto / Day / Night),
     Positive state beside a choice, text and banner buttons. Small = chips and inline actions. A phone's sizes are the
     defaults; from 1024px (iPad landscape, desktop) they step down 4px / 2px / 0 and the type steps with them. */
  --btn-main: 48px;
  --btn-compact: 38px;
  --btn-small: 32px;
  --btn-fs-main: 1.0625rem;     /* 17px */
  --btn-fs-compact: .9375rem;   /* 15px */
  --btn-fs-small: .875rem;      /* 14px */
  --btn-px: 20px;               /* side padding of a main button */
  --btn-px-compact: 14px;
  --btn-px-small: 12px;
  --btn-min: 0px;               /* a button's least width: 0 on a phone, set from 1024px up */
  --btn-h: var(--btn-main);     /* the old name: every use of it is now the main size */
  --row: 64px;
  --shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.15);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 180ms;
  /* the iOS app also hands over the real insets (DearSantyViewController): some devices report env() as 0 */
  --safe-top: max(env(safe-area-inset-top, 0px), var(--native-safe-top, 0px));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--native-safe-bottom, 0px));
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* ---------- night: the same names, after dark (docs/design-mockups/5-day-night.html, token table) ---------- */
html[data-theme="night"] {
  color-scheme: dark;
  --bg: #0F1B2A;
  --off-white: #0F1B2A;
  --surface: #17283B;
  --surface-2: #17283B;
  --input-bg: #0F1B2A;
  --line: #2B4259;
  --line-input: #34506B;
  --ink: #F3E9D8;
  --quiet: #9DB0C4;
  --head: #FF8A7A;
  --green: #5FD3A8;
  --red-light: #A3202B;
  --green-light: #1F9C7B;
  --btn-red: #D8303B;
  --btn-green: #0A7F63;
  --star: #F4C95D;
  --on-gold: #2A2111;
  --paper: #1F344A;
  --muted: #5C7088;
  --fog: #5C7088;
  --cheek: #F2A58E;
  --veil: rgba(3, 8, 16, 0.66);
  --focus: #5FD3A8;
  --focus-ring: 0 0 0 3px rgba(95, 211, 168, 0.28);
  --tint-red: #4A1E2A;
  --tint-red-soft: #26202E;
  --tint-red-line: #5A2A38;
  --tint-green: #123D3A;
  --tint-green-soft: #112F33;
  --tint-green-line: #1F5750;
  --pill-g-bg: #123D3A; --pill-g-fg: #7FE0BC;
  --pill-r-bg: #4A1E2A; --pill-r-fg: #FFA39B;
  --kid-a: #8E1520; --kid-b: #A3202B;
  --track: #26405A;
  --paper-rule: #24405A;
  --hint: #6F859B;
  --dim: #5C7088;
  --ghost: #34506B;
  --toggle-off: #34506B;
  --star-dim: #C9A84A;
  --ink-blue: #8EA3D1;
  --code-bg: #3A3322;
  --done-bg: #1B3045;
  --done-fg: #7B90A6;
  --mark: #4A3C1D;
  --soft-surface: rgba(23, 40, 59, 0.85);
  --flake-on: #FF6A6E;
  --flake-glow: rgba(255, 106, 110, 0.55);
  --nav: #B8C6D6;
  --shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.5);
  --badge: #FFF4DF;
  --pattern: url("pattern-night.svg");
}

.ds-doc-kid {
  --fs-body: 18px;
  --fs-label: 18px;
}

/* wide screens (iPad landscape, desktop): one step smaller. Small stays a comfortable 32px: an iPad in landscape is
   tapped, not clicked, and 30px chips are hard to hit. */
@media (min-width: 1024px) {
  :root {
    --btn-main: 44px;
    --btn-compact: 36px;
    --btn-small: 32px;
    --btn-fs-main: 1rem;        /* 16px */
    --btn-fs-compact: .9375rem; /* 15px */
    --btn-fs-small: .8125rem;   /* 13px */
    --btn-px: 24px;
    --btn-min: 150px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}