/* Atelia design tokens: Atelier (atelier) — An architect's studio: warm tracing paper, terracotta pencil, calm and considered.
   Fonts (free, Google Fonts): load in app/layout.js with:
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..700&family=Instrument+Sans:wght@400..700&family=JetBrains+Mono:wght@400;500&display=swap">
   All text pairs checked against WCAG 2.2 AA (see CONTRAST.md). */
/* Atelia themes (d90+ "Washed Pebble and themes", JA via Atelia UI Guy). Generated by /workspace/atelia-palette/built/work/gen_tokens.py
   from /workspace/atelia-palette/tokens.css (contrast: /workspace/atelia-palette/notes.md, 29 pairs per palette, all AA).
   Washed Pebble is the default (:root). <html data-theme> is set before first paint by lib/themes.js (PREPAINT).
   d95: the "Today" theme was removed (JA t378u); nothing else used its block.
   Film end titles/dissolves (bin/endcard.mjs, bin/stitch-clips.mjs) are NOT themed: they stay on brand cream #F4EFE6. */
/* Washed Pebble */
:root,[data-theme="washed"]{--color-bg:#EBE9E5;--color-surface:#F7F6F3;--color-surface-2:#E1E6E1;--color-raised:#FFFFFF;--color-text:#2B2523;--color-text-2:#5A524F;--color-muted:#6A6260;--color-accent:#7D6460;--color-accent-hover:#6A5350;--color-selection:rgb(125 100 96 / .22);--color-accent-press:#5D4946;--color-on-accent:#FFFFFF;--color-accent-soft:#E7DFDC;--color-link:#6E5652;--color-success:#46694F;--color-warning:#7D5C1A;--color-error:#A23F38;--color-border:#D6D3CD;--color-border-strong:#87807C;--color-focus:#2B2523;--stone-hi:#87706D;--stone-lo:#705A56;--sh:60 44 40;--shade:rgb(0 0 0 / .14);--dent:0 0 0;--sky-top:#C2CBC3;--sky-bot:#E4E7E2;--stage-sky:#DCE1DB;--stage-ground:#E9E8E3;--select:#7D6460;--select-halo:#FFFFFF;--bubble:#E1E6E1;--pill:#EAE2D8;--toast-bg:#2B2523;--toast-ink:#F7F6F3;--toast-action:#D9C2BC;--page-glow:#F7F6F3;--img-well:#F1F0EC;--measure:#2F5D8A;--paper:235 233 229;color-scheme:light}
/* Wet Stone */
[data-theme="wet"]{--color-bg:#1F1B1A;--color-surface:#292423;--color-surface-2:#38312F;--color-raised:#332D2B;--color-text:#EEE8E3;--color-text-2:#C3B9B2;--color-muted:#A3988F;--color-accent:#C9A39A;--color-accent-hover:#D6B4AC;--color-selection:rgb(201 163 154 / .22);--color-accent-press:#BB948B;--color-on-accent:#1F1B1A;--color-accent-soft:#3D3230;--color-link:#D4B0A7;--color-success:#9CC0A5;--color-warning:#D9B472;--color-error:#EE9B90;--color-border:#3D3634;--color-border-strong:#847B75;--color-focus:#EEE8E3;--stone-hi:#CEACA4;--stone-lo:#B5938B;--sh:0 0 0;--shade:rgb(255 255 255 / .12);--dent:0 0 0;--sky-top:#3F4442;--sky-bot:#26221F;--stage-sky:#2E2D2A;--stage-ground:#3A3532;--select:#A85C50;--select-halo:#FFFFFF;--bubble:#38312F;--pill:#332D2B;--toast-bg:#EEE8E3;--toast-ink:#1F1B1A;--toast-action:#7A564F;--page-glow:#292423;--img-well:#E9E4E0;--measure:#9DB8D6;--paper:31 27 26;color-scheme:dark}
/* Bleached Shore */
[data-theme="bleached"]{--color-bg:#F5F5F2;--color-surface:#FCFCFA;--color-surface-2:#EBEFEB;--color-raised:#FFFFFF;--color-text:#252724;--color-text-2:#545A54;--color-muted:#646A64;--color-accent:#4D6A5A;--color-accent-hover:#3F594A;--color-selection:rgb(77 106 90 / .22);--color-accent-press:#364E40;--color-on-accent:#FFFFFF;--color-accent-soft:#E1E9E3;--color-link:#43604F;--color-success:#2F6B45;--color-warning:#7F5E12;--color-error:#A8392F;--color-border:#E0E2DD;--color-border-strong:#838983;--color-focus:#252724;--stone-hi:#5B7667;--stone-lo:#455F51;--sh:34 46 40;--shade:rgb(0 0 0 / .14);--dent:0 0 0;--sky-top:#D9E2DC;--sky-bot:#F2F3EF;--stage-sky:#E6EBE6;--stage-ground:#F3F3EF;--select:#4D6A5A;--select-halo:#FFFFFF;--bubble:#EBEFEB;--pill:#EFEDE7;--toast-bg:#252724;--toast-ink:#F5F5F2;--toast-action:#B8D2C1;--page-glow:#FCFCFA;--img-well:#F4F4F1;--measure:#2F5D8A;--paper:245 245 242;color-scheme:light}
/* Terracotta on Pebble */
[data-theme="terracotta"]{--color-bg:#ECEAE6;--color-surface:#F8F7F4;--color-surface-2:#E3E6E1;--color-raised:#FFFFFF;--color-text:#25201D;--color-text-2:#58514C;--color-muted:#68605B;--color-accent:#A8471F;--color-accent-hover:#8A3815;--color-selection:rgb(168 71 31 / .22);--color-accent-press:#7A3112;--color-on-accent:#FFFFFF;--color-accent-soft:#EEDFD6;--color-link:#9A4019;--color-success:#46694F;--color-warning:#7D5C1A;--color-error:#A8263B;--color-border:#D7D4CE;--color-border-strong:#87807C;--color-focus:#25201D;--stone-hi:#AF5631;--stone-lo:#97401C;--sh:74 32 12;--shade:rgb(0 0 0 / .14);--dent:0 0 0;--sky-top:#C9D1CB;--sky-bot:#ECEAE6;--stage-sky:#DCE0DB;--stage-ground:#ECEAE5;--select:#A8471F;--select-halo:#FFFFFF;--bubble:#E3E6E1;--pill:#E8E1D7;--toast-bg:#25201D;--toast-ink:#F8F7F4;--toast-action:#EFA986;--page-glow:#F8F7F4;--img-well:#F1F0EC;--measure:#2F5D8A;--paper:236 234 230;color-scheme:light}
/* Lichen on Rose */
[data-theme="lichen"]{--color-bg:#E8DCD7;--color-surface:#F5EEEB;--color-surface-2:#EFE3DF;--color-raised:#FCF9F8;--color-text:#2A1E1C;--color-text-2:#5C4844;--color-muted:#6B5753;--color-accent:#34503F;--color-accent-hover:#2A4233;--color-selection:rgb(52 80 63 / .22);--color-accent-press:#23382B;--color-on-accent:#F5EEEB;--color-accent-soft:#D8E0D9;--color-link:#2F4A3A;--color-success:#34503F;--color-warning:#7A5614;--color-error:#A0302C;--color-border:#D7C6C0;--color-border-strong:#8F7872;--color-focus:#2A1E1C;--stone-hi:#445E4E;--stone-lo:#2F4839;--sh:42 28 26;--shade:rgb(0 0 0 / .14);--dent:0 0 0;--sky-top:#C9D2C8;--sky-bot:#EBE1DC;--stage-sky:#DDDDD4;--stage-ground:#EDE3DE;--select:#2F6B4A;--select-halo:#FFFFFF;--bubble:#EFE3DF;--pill:#F0E3DE;--toast-bg:#2A1E1C;--toast-ink:#F5EEEB;--toast-action:#B9D0BF;--page-glow:#F5EEEB;--img-well:#F3ECE9;--measure:#2F5D8A;--paper:232 220 215;color-scheme:light}
:root {
  /* colour: see the theme blocks above (Washed Pebble = :root default) */
  /* fonts */
  --font-display: 'Fraunces', ui-sans-serif, system-ui, sans-serif;
  --font-ui: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  /* type ramp: size / line-height / weight / tracking */
  --type-display-font: var(--font-display); --type-display-size: 3.5rem; --type-display-lh: 60px; --type-display-weight: 380; --type-display-tracking: -0.02em;
  --type-h1-font: var(--font-display); --type-h1-size: 2.25rem; --type-h1-lh: 44px; --type-h1-weight: 420; --type-h1-tracking: -0.01em;
  --type-h2-font: var(--font-ui); --type-h2-size: 1.5rem; --type-h2-lh: 32px; --type-h2-weight: 600; --type-h2-tracking: -0.01em;
  --type-h3-font: var(--font-ui); --type-h3-size: 1.125rem; --type-h3-lh: 26px; --type-h3-weight: 600; --type-h3-tracking: 0;
  --type-body-font: var(--font-ui); --type-body-size: 1rem; --type-body-lh: 24px; --type-body-weight: 400; --type-body-tracking: 0;
  --type-small-font: var(--font-ui); --type-small-size: 0.875rem; --type-small-lh: 20px; --type-small-weight: 400; --type-small-tracking: 0;
  --type-caption-font: var(--font-ui); --type-caption-size: 0.75rem; --type-caption-lh: 16px; --type-caption-weight: 600; --type-caption-tracking: 0.06em;
  --type-mono-font: var(--font-mono); --type-mono-size: 0.8125rem; --type-mono-lh: 20px; --type-mono-weight: 400; --type-mono-tracking: 0;
  /* extra steps used by viewer chrome (15px) and micro labels; nearest-step replacements land here */
  --type-ui-size: 0.9375rem; --type-ui-lh: 22px; --type-ui-weight: 400; --type-ui-tracking: 0;
  --type-micro-size: 0.6875rem; --type-micro-lh: 16px; --type-micro-weight: 600; --type-micro-tracking: 0.04em;
  --type-tiny-size: 0.625rem; --type-tiny-lh: 14px; --type-tiny-weight: 600; --type-tiny-tracking: 0.04em;
  /* landing aliases: map onto --type-* where they match. --t-body stays 1.0625rem (the landing body look). */
  --t-cap: var(--type-small-size);
  --t-body: 1.0625rem;
  --t-lg: 1.1875rem;
  --t-h3: 1.25rem;
  --t-h2: clamp(2.25rem, 4.6vw, 4.25rem);
  --t-display: clamp(3.25rem, 7.4vw, 7.75rem);
  --t-run: var(--type-micro-size);
  /* Fraunces optical size / softness. Landing display is 56; viewer .v-serif is 144 — a taste call, listed in DESIGN.md. */
  --opsz-display: 56;
  --opsz-viewer: 144;
  --opsz-mark: 36;
  --opsz-wordmark: 28;
  --opsz-heading: 40;
  --soft-display: 100;
  --soft-ui: 50;
  /* spacing: 4px base, 8pt rhythm */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  /* radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  /* elevation: one scale (d97). --shadow-1/2/3 retired; --card-shadow points at --sh-float. */
  /* motion */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 360ms;
  --motion-ease: cubic-bezier(0.2, 0, 0, 1);
  --motion-enter: cubic-bezier(0.05, 0.7, 0.1, 1);
  /* d79 motion pass: easing */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);       /* enters: most of the move early, soft landing */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);            /* exits: gentle start, leaves quickly */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);      /* hover, state, things that move on screen */
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);     /* full-height sheets and drawers */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);     /* camera glide and 3D fades */
  /* durations (enter / exit) */
  --dur-press: 100ms;
  --dur-micro: 120ms;
  --dur-text: 160ms;
  --dur-menu: 180ms;  --dur-menu-out: 120ms;
  --dur-toast: 220ms; --dur-toast-out: 160ms;
  --dur-list: 200ms;  --dur-list-out: 140ms;
  --dur-panel: 260ms; --dur-panel-out: 180ms;
  --dur-sheet: 280ms; --dur-sheet-out: 200ms;
  --dur-fade-page: 240ms;
  --dur-count: 500ms;   /* rolling numbers */
  --dur-hero: 900ms;    /* landing hero enter */
  /* distances */
  --rise: 4px; --rise-lg: 8px; --scale-in: .98; --press: .97;
  /* aliases: --motion-ease is the standard curve; --motion-enter now settles sooner */
  --motion-ease: var(--ease-standard); --motion-enter: var(--ease-out);
  /* component tokens */
  --heading-font: var(--font-display);
  --page-bg: radial-gradient(1200px 600px at 85% -10%, var(--page-glow) 0%, transparent 60%), var(--color-bg);
  --card-bg: var(--color-surface);
  --card-border: 1px solid var(--color-border);
  --card-shadow: var(--sh-float);
  --card-radius: var(--radius-lg);
  --chip-radius: var(--radius-md);
  --chip-bg: var(--color-surface);
  --chip-border: 1px solid var(--color-border-strong);
  --chip-fg: var(--color-text);
  --chip-sel-bg: var(--color-accent-soft);
  --chip-sel-border: 1.5px solid var(--color-accent);
  --chip-sel-fg: var(--color-text);
  --chip-height: 40px;
  --btn-radius: var(--radius-md);
  --btn-height-sm: 32px;
  --btn-height: 44px;          /* md */
  --btn-height-md: var(--btn-height);
  --btn-height-lg: 52px;
  --input-radius: var(--radius-md);
  --input-bg: var(--color-surface);
  --eyebrow-color: var(--color-accent);
  --eyebrow-font: var(--font-ui);
  --eyebrow-transform: uppercase;
  --bubble-ai-bg: transparent;
  --bubble-me-bg: var(--color-surface-2);
  --focus-ring: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--color-focus);
  /* d97: one shadow system (Benji #6). The edge line lives inside the shadow as a 0-blur ring, so boxes never change size. */
  --ring: rgb(var(--sh) / .14);
  --sh-card:  0 0 0 1px var(--ring), 0 1px 2px rgb(var(--sh) / .05);
  --sh-float: 0 0 0 1px var(--ring), 0 4px 16px rgb(var(--sh) / .08), 0 12px 32px -4px rgb(var(--sh) / .10);
  --sh-lift:  0 0 0 1px var(--ring), 0 12px 28px -6px rgb(var(--sh) / .22), 0 6px 12px -6px rgb(var(--sh) / .12);
  --sh-thumb: 0 0 0 1px var(--color-border-strong), 0 1px 2px rgb(var(--sh) / .12);   /* d99: the chosen-segment ring uses the stronger border, at least 3:1 against the track in every theme */
  /* z-index scale (viewer chrome + shared overlays) */
  --z-base: 1;
  --z-labels: 2;
  --z-tape: 3;
  --z-scale: 4;
  --z-dock: 5;
  --z-plantools: 6;
  --z-pop: 7;
  --z-toast: 8;
  --z-load: 9;
  --z-skip: 20;
  --z-overlay: 30;
  --z-snip: 900;
  --z-modal: 1000;
  --z-tip: 2147483000;
  /* overlay layout zones: dock at the floor, scale/north above it, toasts above that, plan tools in the top band.
     --inset-toast is always above the scale/north zone so a toast never covers the bar, on every size. */
  --zone-gap: 20px;   /* clears --sh-float under the toast so it never paints on the scale */
  --zone-dock-bottom: 20px;
  --zone-dock-h: 56px;
  --zone-nav-h: 68px;
  --zone-scale-h: 28px;
  --zone-toast-h: 44px;
  --zone-plantools-top: 20px;
  --zone-plantools-h: 48px;
  --inset-dock: calc(var(--zone-dock-bottom) + env(safe-area-inset-bottom, 0px));
  --inset-scale: calc(var(--inset-dock) + var(--zone-dock-h) + 20px);
  --inset-toast: calc(var(--inset-scale) + var(--zone-scale-h) + var(--zone-gap));
  --inset-toast-idle: var(--inset-scale);
  --inset-plantools: var(--zone-plantools-top);
}
/* in the dark, depth comes from the lighter raised surface; the ring is a faint light line */
[data-theme="wet"]{--ring:rgb(255 255 255 / .09)}
/* d79: reduced motion = no movement or scale, soft fades of 120 ms or less (JA t54u); loops stop in their own rules */
@media (prefers-reduced-motion: reduce) {
  :root { --rise: 0px; --rise-lg: 0px; --scale-in: 1; --press: 1;
    --motion-slow: 120ms; --motion-base: 120ms;
    --dur-menu: 120ms; --dur-toast: 120ms; --dur-list: 120ms; --dur-panel: 120ms; --dur-sheet: 120ms; --dur-fade-page: 120ms; --dur-text: 120ms;
    --dur-menu-out: 90ms; --dur-toast-out: 90ms; --dur-list-out: 90ms; --dur-panel-out: 90ms; --dur-sheet-out: 90ms;
    --dur-count: 120ms; --dur-hero: 120ms; }
}

/* d101: text selection, an accent tint (about 22%) per theme; selected text stays ink so it reads on every surface */
::selection{background:var(--color-selection);color:var(--color-text)}