/* ==========================================================================
   PROOF — Design tokens
   --------------------------------------------------------------------------
   Layering: primitives → semantic → component.
   • Presets override semantic tokens via  <html data-preset="…">
     (editorial · gallery · raw · playful · cinematic)
   • Themes override colour tokens via     <html data-theme="…">
     (studio = light · darkroom = dark)
   Both attributes are set on <html>; assets/js/proof.js keeps them in sync
   with the preset/theme switchers and localStorage.
   ========================================================================== */

/* ---- Global: status colours & fluid type scale ---------------------- */
:root {
  --success: #2E6B3A;
  --success-bg: #E3EFE3;
  --warning: #7A5200;
  --warning-bg: #F8EBCF;
  --info: #1D4C89;
  --info-bg: #E1E9F4;
  --error: #9A1747;
  --error-bg: #F7E1E8;
  --t-mega: clamp(72px,16vw,260px);
  --t-display: clamp(56px,8vw,128px);
  --t-h1: clamp(40px,5vw,72px);
  --t-h2: clamp(30px,3.2vw,48px);
  --t-h3: clamp(24px,2vw,32px);
  --t-lead: clamp(20px,1.7vw,24px);
  --t-small: 15px;
  --t-caption: 13px;
}

/* ---- Preset: Editorial (default) ------------------------------------ */
:root,[data-preset="editorial"] {
  --canvas: #F5F2EB;
  --surface: #FFFFFF;
  --ink: #141414;
  --muted: #5B554D;
  --line: #D9D3C7;
  --accent: #D7261E;
  --accent-text: #C21F18;
  --on-accent: #FFFFFF;
  --sheet: #1B1917;
  --sheet-ink: #EEE9E1;
  --sheet-muted: #B8B0A4;
  --edge: #D9A441;
  --ph: #E9E4D9;
  --ph-stripe: #DCD5C7;
  --ph-ink: #4A453E;
  --f-display: "Newsreader",Georgia,serif;
  --f-body: "Albert Sans",system-ui,sans-serif;
  --f-mono: "IBM Plex Mono",ui-monospace,monospace;
  --f-hand: "Caveat",cursive;
  --d-weight: 400;
  --d-track: -0.035em;
  --d-case: none;
  --em-style: italic;
  --radius: 0px;
  --dur: 400ms;
  --ease: cubic-bezier(.2,.7,.1,1);
  --frame-min: 200px;
  --sheet-gap: 32px 20px;
  --frame-pad: 0px;
  --frame-ratio: 3/2;
  --img-filter: none;
  --body-size: 18px;
}

/* ---- Preset: Gallery ------------------------------------------------ */
[data-preset="gallery"] {
  --canvas: #F3F3F1;
  --surface: #FFFFFF;
  --ink: #121212;
  --muted: #565654;
  --line: #DEDEDA;
  --sheet: #E7E7E4;
  --sheet-ink: #121212;
  --sheet-muted: #4E4E4B;
  --edge: #6A6A66;
  --ph: #E0E0DC;
  --ph-stripe: #D4D4CF;
  --ph-ink: #3A3A37;
  --f-display: "Jost",sans-serif;
  --f-body: "Jost",sans-serif;
  --d-weight: 300;
  --d-track: -0.03em;
  --d-case: none;
  --em-style: normal;
  --radius: 0px;
  --dur: 700ms;
  --ease: cubic-bezier(.25,.1,.25,1);
  --frame-min: 230px;
  --sheet-gap: 56px 40px;
  --frame-pad: 14px;
  --frame-ratio: 4/5;
  --img-filter: grayscale(1);
  --body-size: 17px;
}

/* ---- Preset: Raw ---------------------------------------------------- */
[data-preset="raw"] {
  --canvas: #FFFFFF;
  --surface: #FFFFFF;
  --ink: #000000;
  --muted: #2B2B2B;
  --line: #000000;
  --sheet: #000000;
  --sheet-ink: #FFFFFF;
  --sheet-muted: #CFCFCF;
  --edge: #FFFFFF;
  --ph: #EDEDED;
  --ph-stripe: #C8C8C8;
  --ph-ink: #000000;
  --f-display: "Anybody",sans-serif;
  --f-body: "Space Mono",monospace;
  --f-mono: "Space Mono",monospace;
  --d-weight: 800;
  --d-track: -0.03em;
  --d-case: uppercase;
  --em-style: normal;
  --radius: 0px;
  --dur: 120ms;
  --ease: steps(3,end);
  --frame-min: 180px;
  --sheet-gap: 0px;
  --frame-pad: 0px;
  --frame-ratio: 1/1;
  --img-filter: grayscale(1) contrast(1.3);
  --body-size: 16px;
}

/* ---- Preset: Playful ------------------------------------------------ */
[data-preset="playful"] {
  --canvas: #FFF3E2;
  --surface: #FFFFFF;
  --ink: #1F1B3F;
  --muted: #4E4A6B;
  --line: #EBD9C0;
  --sheet: #2C2566;
  --sheet-ink: #FFF3E2;
  --sheet-muted: #D9D2F2;
  --edge: #FFC94A;
  --ph: #FFD9C7;
  --ph-stripe: #FFC6AE;
  --ph-ink: #3A2A55;
  --f-display: "Young Serif",serif;
  --f-body: "Rubik",sans-serif;
  --d-weight: 400;
  --d-track: -0.02em;
  --d-case: none;
  --em-style: normal;
  --radius: 14px;
  --dur: 450ms;
  --ease: cubic-bezier(.34,1.56,.64,1);
  --frame-min: 200px;
  --sheet-gap: 40px 28px;
  --frame-pad: 0px;
  --frame-ratio: 4/5;
  --img-filter: saturate(1.25);
  --body-size: 17px;
}

/* ---- Preset: Cinematic (darkroom-first) ----------------------------- */
[data-preset="cinematic"] {
  --canvas: #0D0C0B;
  --surface: #161412;
  --ink: #EEE9E1;
  --muted: #A59D92;
  --line: #2E2A26;
  --accent: #FF5A4E;
  --accent-text: #FF5A4E;
  --on-accent: #141414;
  --sheet: #000000;
  --sheet-ink: #EEE9E1;
  --sheet-muted: #A59D92;
  --edge: #C98A2E;
  --ph: #201D1A;
  --ph-stripe: #2B2723;
  --ph-ink: #CFC8BD;
  --f-display: "Bodoni Moda",serif;
  --f-body: "Manrope",sans-serif;
  --d-weight: 500;
  --d-track: -0.02em;
  --d-case: none;
  --em-style: italic;
  --radius: 0px;
  --dur: 1000ms;
  --ease: cubic-bezier(.7,0,.2,1);
  --frame-min: 300px;
  --sheet-gap: 28px 24px;
  --frame-pad: 0px;
  --frame-ratio: 2.39/1;
  --img-filter: contrast(1.1);
  --body-size: 17px;
}

/* ---- Theme: Darkroom (any preset) ----------------------------------- */
[data-preset][data-theme="darkroom"] {
  --canvas: #0D0C0B;
  --surface: #161412;
  --ink: #EEE9E1;
  --muted: #A59D92;
  --line: #2E2A26;
  --accent: #FF5A4E;
  --accent-text: #FF5A4E;
  --on-accent: #141414;
  --sheet: #000000;
  --sheet-ink: #EEE9E1;
  --sheet-muted: #A59D92;
  --edge: #C98A2E;
  --ph: #201D1A;
  --ph-stripe: #2B2723;
  --ph-ink: #CFC8BD;
}

/* ---- Theme: Studio on Cinematic ------------------------------------- */
[data-preset="cinematic"][data-theme="studio"] {
  --canvas: #F2EEE7;
  --surface: #FFFFFF;
  --ink: #141414;
  --muted: #5B554D;
  --line: #D9D3C7;
  --accent: #D7261E;
  --accent-text: #C21F18;
  --on-accent: #FFFFFF;
  --sheet: #141210;
  --ph: #E6E0D5;
  --ph-stripe: #D9D2C4;
  --ph-ink: #4A453E;
}

/* ---- Status colours in dark contexts -------------------------------- */
[data-theme="darkroom"],[data-preset="cinematic"]:not([data-theme="studio"]) {
  --success: #7FC48C;
  --success-bg: #15251A;
  --warning: #E8B04A;
  --warning-bg: #2A2112;
  --info: #8DB4F0;
  --info-bg: #141E2D;
  --error: #F27BA3;
  --error-bg: #2C1420;
}