/*
 * PromptShare design tokens (06-DESIGN-DECISIONS D5 + D8.1, docs/09-VISUAL-SPEC.md §2).
 *
 * Sibling of SoundLabs / Image Tools: palette, spacing, radii, elevation, motion, focus ring and z ladder are
 * copied (not imported) from public_html/soundlabs/css/tokens.css. PromptShare adds only what a text product
 * needs: a reading face for prompt bodies, the variable ("blank") tint, the search-match mark, diff tints,
 * and its own layout sizes.
 *
 * Budgets (checked by mock/contrast.mjs and, later, _dev/check.sh):
 *   colours 24/24 · font sizes 8/8 · radii 4 (+pill) · shadows 3 · breakpoints 4 (1440 / 1280 / 1024 / 768)
 *   (1440 is a token tweak, not a layout change; 390 is the phone the rig shoots, inside the <768 band)
 *
 * Rules for every author:
 *   - No raw colour, size, radius, shadow, duration or z-index outside this file. (site-nav stand-in excepted:
 *     it imitates chrome we do not own and is not shipped.)
 *   - Everything sits on the 4px grid. The only exception is 1px optical compensation inside a control.
 *   - No bordered box inside a bordered box: group with space and a 1px --border divider.
 *   - Peach means "a blank still to fill". Teal means "yours / live / primary". Nothing else is coloured.
 *   - Dark only for v1 (color-scheme: dark). A light theme is a swap of the 24 colour tokens.
 *
 * In production these are scoped to body.promptshare-page exactly as SoundLabs scopes to body.soundlabs-page.
 */

:root {
  /* ---- Colour: surfaces (5) ---- */
  --bg: #070E14;             /* app canvas, list pane */
  --surface-1: #0C161E;      /* sidebar, detail pane, reading surface, hover row */
  --surface-2: #111E28;      /* controls, selected row, dialogs */
  --surface-3: #182834;      /* menus, pressed, chips on surface-2 */
  --scrim: rgba(3, 6, 10, .86);

  /* ---- Colour: lines (3) ---- */
  --border: #1F2F3B;         /* hairline dividers, pane edges */
  --border-strong: #2A3D4B;  /* control outline at rest */
  --border-control: #587083; /* control outline hover / 3:1 non-text contrast */

  /* ---- Colour: text (4) ---- */
  --text: #EAF2F8;
  --text-2: #B4C4D1;
  --text-3: #8A9DAD;
  --text-disabled: #5B6E7D;  /* disabled labels only: exempt from AA by definition, never used for live text */

  /* ---- Colour: accent (4) ---- */
  --accent: #5EEAD4;
  --accent-hover: #2DD4BF;
  --accent-tint: rgba(94, 234, 212, .12);
  --on-accent: #04211D;

  /* ---- Colour: the blank (2) + search match (1) ---- */
  --var: #FDBA74;
  --var-tint: rgba(253, 186, 116, .13);
  --mark: rgba(252, 211, 77, .24);

  /* ---- Colour: status (5) ---- */
  --success: #86EFAC;
  --success-tint: rgba(134, 239, 172, .12);
  --warning: #FCD34D;
  --danger: #FCA5A5;
  --danger-tint: rgba(252, 165, 165, .12);

  /* ---- Type families ---- */
  --font-ui: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Space Grotesk", "Manrope", system-ui, sans-serif;
  /* Prompt bodies: IBM Plex Mono (SIL OFL 1.1, on Google Fonts). A humanist monospace: every character
     (#, *, <tag>, {{ }}, leading spaces) stays exactly as unmistakable as it is in plain text, and the low, calm
     x-height keeps a 500-character prompt readable as prose. See fonts/LICENCE-CHECK.md. */
  --font-prompt: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* ---- Type scale (8) ---- */
  --fs-hero: 2.75rem;      --lh-hero: 3rem;          /* 44/48  landing H1 and closing H2 only */
  --fs-head: 2rem;         --lh-head: 2.5rem;        /* 32/40  landing section heads (MA-7) */
  --fs-display: 1.5rem;    --lh-display: 2rem;       /* 24/32  verb titles, viewer title, empty-state title */
  --fs-title: 1.125rem;    --lh-title: 1.5rem;       /* 18/24  pane + dialog titles, editor title field */
  --fs-read: .9375rem;     --lh-read: 1.625rem;      /* 15/26  prompt bodies (reading + editing), landing lede */
  --fs-body: .875rem;      --lh-body: 1.25rem;       /* 14/20  row titles, inputs, buttons, body copy */
  --fs-input: var(--fs-body);                        /* raised to 16px on touch only; never affects prompt bodies */
  --fs-label: .8125rem;    --lh-label: 1.25rem;      /* 13/20  excerpts, sidebar rows, chips, menus, help */
  /* 12/16  row meta, counts, timestamps, captions, uppercase group labels and kbd.
     Absorbed the old 11px micro size, which was doing the same job one pixel smaller (MA-7). */
  --fs-meta: .75rem;       --lh-meta: 1rem;

  --fw-read: 400;          /* Plex Mono 400 matches Manrope 500 in colour on this background */
  --fw-regular: 500;       /* Manrope reads thin on dark at 400; 500 is the body weight, as in SoundLabs */
  --fw-medium: 600;
  --fw-bold: 700;
  --ls-caps: .06em;
  --ls-tight: -.01em;
  --ls-hero: -.025em;

  /* ---- Spacing (4px grid) ---- */
  --sp-0: 0px; --sp-px: 1px; --sp-half: 2px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-14: 56px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* ---- Radii: four values plus pill ---- */
  --r-sm: 6px;    /* chips, kbd, row focus, small buttons, menu items */
  --r-md: 10px;   /* buttons, inputs, menus */
  --r-lg: 14px;   /* reading surface, dialogs, cards on landing */
  --r-xl: 20px;   /* sheets (top corners), hero editor */
  --r-pill: 999px;

  /* ---- Elevation (3) ---- */
  --e-1: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 1px 2px rgba(0, 0, 0, .4);   /* raised control */
  --e-2: 0 8px 24px rgba(0, 0, 0, .45);                                         /* menus, popovers, toasts, bulk bar */
  --e-3: 0 24px 64px rgba(0, 0, 0, .6);                                         /* dialogs, palette, sheets */

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 120ms;   /* hover, press, focus, chip, checkbox */
  --t-med: 200ms;    /* menus, toasts, row insert/remove, pane swap */
  --t-slow: 320ms;   /* dialogs, sheets */
  --t-shimmer: 1.6s; /* skeleton */

  /* ---- Layout ---- */
  /* BL4-1 · THIS IS A FALLBACK, NOT A MEASUREMENT. The shared promo strip rotates its message, the banner's
     height depends on the host page's own stylesheet, and D1 deletes the page whose CSS makes it 112px today.
     The product MUST set --nav-h from the measured bottom edge of .nav-container on load, on resize and via a
     ResizeObserver on the banner — see 09-VISUAL-SPEC.md §13. The mock does exactly that in mock.js, so the
     runtime path is the path under test; this value only covers the first paint before script runs. */
  /* ROUND 8 · corrected, and the direction of error is now deliberate.
     Measured first paint (JavaScript OFF, which is the only condition this value covers):
         >=1024   banner 47 + nav 65 = 112     <- was 112, exact
         768-1023 banner 47 + nav 64 = 111     <- was 112, ONE PIXEL TOO BIG
         <=767    banner 61 + nav 64 = 125 on this mock, 133 as the product measures it
     That 1px at 768 was not harmless: the frontend's boot-geometry check has a 1px tolerance, and this error
     consumed all of it on two of its three parts at once, so the check passed with ZERO margin permanently and
     one pixel of chrome movement would have failed both at once. 768-1023 is now its own band and is exact.
     Below 768 no single number CAN be exact — the promo strip rotates its message and wraps differently, which
     is why this mock reads 125 and the product reads 133. So that band takes the larger of the two. Erring
     large costs one frame with a sliver of page background under the shell; erring small makes the shell taller
     than the space it has and pushes the dock off the bottom of the window, which is the worse failure.
     `check-navh.mjs` now asserts fallback >= measured at all five widths, so this cannot drift again. */
  --nav-h: 111px;
  --nav-h-slim: 56px;        /* viewer pages: logo · Log in · Sign up, no promo strip */
  --rail-w: 232px;
  --detail-w: 520px;
  --row-h: 56px;
  --toolbar-h: 52px;
  --filterbar-h: 36px;
  --ctl-sm: 28px;
  --ctl-md: 32px;
  --ctl-lg: 40px;
  --target: 44px;
  /* MA5-8 · THREE measures, chosen and justified in 09-VISUAL-SPEC.md §3a. Every column of running text on this
     site is one of them; `check-measure.mjs` fails on anything outside its band. These are lengths, not widths —
     they are in `ch`, so they hold whatever the surrounding layout does.
       --measure        55–75ch  prose someone reads in sequence, and the ceiling for a prompt body
       --measure-panel  24–52ch  text that is deliberately not the reading column (panels, empties, help, toasts) */
  --measure: 68ch;
  --measure-panel: 44ch;
  --dialog-w: 560px;
  --dialog-w-lg: 960px;
  --palette-w: 640px;
  --page-w: 1120px;          /* landing */
  --viewer-w: 760px;
  --gutter: 16px;            /* phone side gutter */
  --actionbar-h: 64px;       /* viewer sticky bar, mobile save bar, bulk bar */

  --stroke: 1.5;             /* icon stroke, non-scaling */

  /* ---- Focus ---- */
  --focus-w: 2px;
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  /* ---- z ladder (shared nav is sticky at 50, its phone menu at 49: app bars stay below both) ---- */
  --z-base: 0;
  --z-sticky: 40;
  --z-dock: 45;
  --z-scrim: 1040;
  --z-dialog: 1050;
  --z-popover: 1100;
  --z-toast: 1200;

  color-scheme: dark;
}

@media (max-width: 1439.98px) {
  :root { --detail-w: 440px; }
}

@media (min-width: 1024px) {
  :root { --nav-h: 112px; }   /* the nav gains its 1px bottom border here */
}

@media (max-width: 1023.98px) {
  :root { --row-h: 64px; }   /* touch: 44px Copy target inside the row */
}

@media (max-width: 767.98px) {
  :root {
    --nav-h: 133px;   /* see the note at --nav-h: the larger of mock 125 / product 133 */
    --fs-hero: 2rem;        --lh-hero: 2.375rem;   /* 32/38 */
    --fs-head: 1.625rem;    --lh-head: 2rem;       /* 26/32 */
    --fs-display: 1.375rem; --lh-display: 1.75rem; /* 22/28 */
    --row-h: 88px;             /* three lines: title, excerpt, meta */
    --fs-input: 1rem;          /* 16px on touch so iOS never zooms a focused field (inputs only) */
  }
}

/* Reduced motion: no shimmer, no slides. Reveals become a 120ms cross-fade. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 1ms;
    --t-med: 1ms;
    --t-slow: 120ms;
  }
}