/* ==========================================================================
   Gumdrop Booth tokens
   COLOUR PAIRING RULES (contrast measured, see DESIGN.md section 8):
   - Text on cream / glass / panel: --ink (body), --ink-soft (secondary), --bronze (gold text), --grape (links), --coral-deep (money).
   - --sand is decorative only: rims, sprocket holes, 24px icons, dashed empty frames. Never text, never the only border of a control.
   - --sand-deep is the border of every control (inputs, chips, tracks, table rules). Never text.
   - A fill token is used only with its paired text token: --fill-X with --text-X.
   - The gumdrop gradient carries --gumdrop-text (ink). Never white text on the gumdrop.
   - One gumdrop per screen: Generate (studio), Let me in (login), Add (admin People). Download pills are the only other gradient use.
   ========================================================================== */
:root {
  /* Grounds */
  --cream: #FFF8EF;            /* page ground under the wash, strip interiors, print strips */
  --logo-cream: #FDF5EC;       /* the PNG's own baked background; the only fill the logo sits on */
  --white: #FFFFFF;
  --panel-solid: #FFFDF9;      /* fallback for every glass surface */
  --glass-62: rgba(255, 255, 255, 0.62);   /* header, generator card, login card, dialogs: blur allowed */
  --panel-92: rgba(255, 255, 255, 0.92);   /* LOCKED. Result cards, sheet, People, coins. No blur. Lowering this breaks admin legibility. */
  --overlay: rgba(43, 35, 64, 0.85);       /* lightbox and dialog backdrop */
  --zebra: #F7EEE2;            /* every second table row; ink 12.90:1, ink-soft 6.28:1, coral 5.17:1, bronze 5.23:1 */

  /* Wash (the only fully saturated pastels) */
  --wash-peach: #FFD6C2;
  --wash-mint: #CFEFE0;
  --wash-lilac: #E3D6FF;
  --blush: #F4C7C0;            /* count sticker, soft tags; ink text 9.72:1 */
  --blush-pale: #F9DCD8;       /* failed surfaces; --danger text 5.03:1 */
  --butter: #FFE7A3;           /* queued chip fill and <mark>; --amber 5.90:1, ink 12.14:1 */
  --chip-mint: #BFE9D3;        /* completed chip fill; --mint-deep 4.83:1 */
  --chip-lilac: #DCCBFF;       /* processing chip fill; --grape 5.85:1 */

  /* The logo line */
  --sand: #B8975A;             /* decorative only, 2.62:1 on cream */
  --sand-deep: #A07E3E;        /* control borders, 3.59:1 on cream (passes 3:1 non-text) */
  --bronze: #7A5F2A;           /* gold as text, 5.70:1 on cream */

  /* Ink */
  --ink: #2B2340;              /* 14.06:1 on cream */
  --ink-soft: #5C5273;         /* 6.85:1 on cream, 6.41:1 on glass over lilac */

  /* Accents */
  --gumdrop-a: #FF9A76;
  --gumdrop-b: #FF8FB8;
  --gumdrop-text: var(--ink);  /* 7.15:1 and 6.97:1 on the two stops */
  --grape: #4B2FB8;            /* focus ring, links, live dot; 8.31:1 on cream */
  --mint-deep: #1E6B4F;        /* success text; 6.09:1 on cream */
  --danger: #B3262E;           /* error text; 6.16:1 on cream */
  --amber: #7A4E00;            /* queued text */
  --coral-deep: #B23A2C;       /* money numerals; 5.64:1 on cream */
  --disabled-bg: #EADBC2;      /* sand 30% over cream, precomputed; --ink-soft on it 5.30:1 */

  /* Status pairs (fill + text, always together, always with a glyph) */
  --fill-queued: var(--butter);        --text-queued: var(--amber);
  --fill-processing: var(--chip-lilac); --text-processing: var(--grape);
  --fill-completed: var(--chip-mint);   --text-completed: var(--mint-deep);
  --fill-failed: var(--blush-pale);     --text-failed: var(--danger);
  --fill-mode-text: var(--wash-mint);   --text-mode-text: var(--ink);   /* 12.05:1 */
  --fill-mode-edit: var(--wash-peach);  --text-mode-edit: var(--ink);   /* 11.04:1 */
  --fill-developing: var(--wash-lilac); --text-developing: var(--ink);  /* 10.82:1 */

  /* Spacing (4px base) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 28px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-14: 56px;

  /* Radii */
  --r-pill: 999px;
  --r-panel: 28px;        /* glass panels, coins, login card */
  --r-panel-phone: 20px;
  --r-card: 20px;         /* result cards, lightbox frame, textarea */
  --r-field: 20px;        /* textarea only; single-line inputs are pills */
  --r-strip: 16px;        /* reference strip */
  --r-print: 12px;        /* photos inside prints */
  --r-thumb: 8px;         /* 48px sheet thumbnails */

  /* Borders */
  --bw: 1.5px;
  --border-rim: 1.5px solid var(--sand);            /* panel rims */
  --border-control: 1.5px solid var(--sand-deep);   /* every input, chip, track, pill */
  --border-print: 3px solid var(--white);           /* photo edge inside a print */
  --border-sticker-outer: 3px solid var(--white);
  --border-sticker-inner: 1px solid var(--sand);    /* drawn with box-shadow 0 0 0 1px */
  --rule-table: 1px solid var(--sand-deep);

  /* Shadows */
  --shadow-panel: 0 18px 40px -20px rgba(75, 47, 184, 0.28);
  --shadow-panel-phone: 0 10px 24px -16px rgba(75, 47, 184, 0.24);
  --shadow-print: 3px 3px 0 rgba(43, 35, 64, 0.18);
  --shadow-print-phone: 2px 2px 0 rgba(43, 35, 64, 0.18);
  --shadow-coin: 0 8px 24px -8px rgba(43, 35, 64, 0.25);
  --shadow-gumdrop: 0 8px 20px -10px rgba(255, 143, 184, 0.5);
  --shadow-gumdrop-hover: 0 12px 28px -10px rgba(255, 143, 184, 0.6);
  --shadow-popover: 0 12px 32px -12px rgba(43, 35, 64, 0.35);
  --inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --glow-mint: 0 0 0 6px rgba(207, 239, 224, 0.6);
  --glow-mint-strong: 0 0 0 6px rgba(207, 239, 224, 0.8);
  --ring-focus: 0 0 0 2px var(--cream), 0 0 0 5px var(--grape); /* fallback when outline is not possible */

  /* Fixed sizes (pinned so the sprocket dots never misalign) */
  --header-h: 64px;
  --strip-h: 128px;
  --dot-pitch: 14px;
  --dot-size: 6px;
  --thumb: 80px;
  --sheet-thumb: 48px;
  --coin: 96px;
  --generator-w: 460px;
  --sheet-min-w: 1180px;
  --sheet-thead-top: 136px;   /* header 64 + toolbar offset 8 + toolbar 56 + gap 8 */

  /* Motion */
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --d-chip: 160ms;
  --d-panel: 240ms;
  --d-thumb: 280ms;
  --d-reveal: 500ms;
  --d-flash: 600ms;

  /* Z-index */
  --z-wash: -1;
  --z-base: 0;
  --z-sticky-card: 5;
  --z-toolbar: 10;
  --z-header: 20;
  --z-fab: 30;
  --z-popover: 40;
  --z-toast: 50;
  /* native <dialog> lives in the top layer; no z-index needed */

  /* Blur budget */
  --blur: 18px;
  color-scheme: light;
}

@media (max-width: 768px) {
  :root {
    --header-h: 56px;
    --coin: 80px;
    --blur: 12px;
    --shadow-panel: var(--shadow-panel-phone);
    --shadow-print: var(--shadow-print-phone);
    --r-panel: var(--r-panel-phone);
  }
}

/* Every glass surface falls back to a solid when blur is unavailable or unwanted. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-62: var(--panel-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glass-62: var(--panel-solid); --panel-92: var(--panel-solid); }
}

/* ==========================================================================
   Fonts: metric-matched fallbacks so layout does not jump when the web fonts land
   ========================================================================== */
@font-face { font-family: "Fredoka Fallback"; src: local("Arial Rounded MT Bold"), local("Arial"); size-adjust: 94%; ascent-override: 96%; descent-override: 24%; }
@font-face { font-family: "Nunito Fallback"; src: local("Arial"); size-adjust: 102%; ascent-override: 101%; descent-override: 35%; }

:root {
  --font-display: "Fredoka", "Fredoka Fallback", ui-rounded, system-ui, sans-serif;
  --font-body: "Nunito", "Nunito Fallback", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ==========================================================================
   Resets
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--cream);
  overflow-x: clip; /* safety net: wide things scroll inside their own wrappers */
  -webkit-font-smoothing: antialiased;
}
body.has-modal { overflow: hidden; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
button:disabled { cursor: not-allowed; }
a { color: var(--grape); }
dialog { margin: auto; padding: 0; border: 0; color: inherit; }
dialog::backdrop { background: var(--overlay); }
table { border-collapse: separate; border-spacing: 0; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
[hidden] { display: none !important; }
mark { background: var(--butter); color: var(--ink); border-radius: 3px; padding: 0 2px; }
::placeholder { color: var(--ink-soft); opacity: 1; }
@media (max-width: 640px) { body { font-size: 15px; } input, select, textarea { font-size: 16px; } }

/* Focus ring: every interactive thing, on the surrounding surface, never removed */
:focus-visible { outline: 3px solid var(--grape); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* ==========================================================================
   Type scale (DESIGN.md section 3)
   ========================================================================== */
.h1 { font: 600 24px/1.15 var(--font-display); color: var(--ink); }
.h2 { font: 600 20px/1.2 var(--font-display); color: var(--ink); }
.wordmark { font: 600 26px/1.1 var(--font-display); color: var(--ink); white-space: nowrap; }
.wordmark--sm { font-size: 22px; }
.wordmark__tld { color: var(--bronze); }
.label { font: 800 12px/1.2 var(--font-body); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); }
.small { font: 400 14px/1.4 var(--font-body); }
.body-strong { font-weight: 700; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.mono-xs { font: 400 11px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.mono-sm { font: 400 12px/1.4 var(--font-mono); font-variant-numeric: tabular-nums; }
.mono-md { font: 500 14px/1.3 var(--font-mono); font-variant-numeric: tabular-nums; }
.numeral-lg { font: 500 20px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.numeral-xl { font: 500 36px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.text-soft { color: var(--ink-soft); }
.text-money { color: var(--coral-deep); }
.text-ok { color: var(--mint-deep); }
.text-danger { color: var(--danger); }
@media (max-width: 640px) { .h1 { font-size: 22px; } .numeral-xl { font-size: 28px; } }

/* ==========================================================================
   Utilities
   ========================================================================== */
.visually-hidden, .sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.stack { display: flex; flex-direction: column; gap: var(--stack-gap, 12px); }
.row { display: flex; align-items: center; gap: var(--row-gap, 8px); flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.clamp-2, .clamp-4 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.clamp-2 { -webkit-line-clamp: 2; }
.clamp-4 { -webkit-line-clamp: 4; }
.is-expanded.clamp-2, .is-expanded.clamp-4 { -webkit-line-clamp: unset; display: block; }
.icon { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon--14 { width: 14px; height: 14px; }
.icon--20 { width: 20px; height: 20px; }
.icon--24 { width: 24px; height: 24px; color: var(--sand); }
.icon--40 { width: 40px; height: 40px; color: var(--sand); }

/* ==========================================================================
   Reduced motion: nothing drifts, nothing shimmers, status text still ticks
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}