/* qurl v2 · "Proof" design system · tokens
   Ink on paper, one red line. Colours are named for the print shop they come from.
   Components read ROLE tokens (second block), never palette values.
   Dark mode is explicit: set data-theme="dark" on <html>. Printed objects (codes, cards, menus)
   stay ink-on-white in both themes, because inverted codes fail on some scanners. */

/* Fonts: self-hosted copies of the Google Fonts stand-ins (SIL Open Font License, see fonts/OFL-*.txt), latin and latin-ext only.
   Loading them from Google would send every visitor's IP address to Google, including families who scan a code (review 2, N-03). */
/* Archivo, italic, latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('fonts/archivo-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Archivo, italic, latin */
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('fonts/archivo-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Archivo, normal, latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('fonts/archivo-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Archivo, normal, latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('fonts/archivo-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Martian Mono, normal, latin-ext */
@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  font-display: swap;
  src: url('fonts/martian-mono-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Martian Mono, normal, latin */
@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  font-display: swap;
  src: url('fonts/martian-mono-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- Palette ---- */
  --ink: #111214;          /* text, primary actions, structure lines, QR modules by default */
  --ink-2: #33373D;        /* strong secondary text, hover on ink */
  --muted: #5B6169;        /* secondary text · 6.25 : 1 on paper */
  --faint: #7C828A;        /* control outlines, disabled text · 3.88 : 1 on paper, 3.28 on desk: form borders pass 3 : 1 everywhere (BR-08) */
  --line: #B3B9C0;         /* panel outlines · 2 : 1 on paper, crisper than v2.0 (BR-08) */
  --rule: #E2E4E7;         /* row dividers */
  --paper: #FFFFFF;        /* panels, printed objects */
  --sheet: #F6F6F7;        /* hover rows, quiet fills */
  --desk: #EBECEE;         /* app ground, alternate marketing bands */

  --red: #CB290C;          /* three jobs: the curl and its route, one accent button per screen, the mark's module · 5.44 : 1 on paper, 4.6 on desk */
  --red-deep: #A8200A;     /* accent hover */
  --red-tint: #FCE9E5;
  --guide: #2A64C8;        /* non-repro blue: dimension lines, guides, focus, designer notes · 4.73 : 1 on desk, 4.8 on its tint */
  --guide-tint: #E7EEFB;

  --success: #1C7A3A;  --success-tint: #E4F2E8;
  --warning: #9A5A00;  --warning-tint: #FBF0DD;
  --error:   #B0103A;  --error-tint:   #F9E3E9;   /* crimson, kept apart from the brand red; always with a word */

  /* Campaign and chart colours: categorical, for campaigns and data only (never rules, buttons or status).
     Validated with the dataviz six checks (validate_palette.js, 30 Sep 2026): the documented reference hues,
     order chosen by enumeration. Adjacent: worst CVD ΔE 16.3 light / 13.0 dark, normal-vision 19.6 / 19.3.
     First three slots also pass all-pairs (maps, small multiples): cap those forms at three colours.
     c2, c3 and c6 sit under 3 : 1 on paper, so they always ship with a visible label or a table view. */
  --c1: #2A78D6;  /* blue    */
  --c2: #EDA100;  /* yellow  */
  --c3: #E87BA4;  /* magenta */
  --c4: #008300;  /* green   */
  --c5: #4A3AA7;  /* violet  */
  --c6: #1BAF7A;  /* aqua    */

  /* ---- Sample customer brand kits (fixtures, not qurl colours). Used by mockups of customers' printed objects and scan pages. ---- */
  --smp-navy: #1F2A44;  --smp-gold: #C9A227;                        /* St Mary’s Prep */
  --vireo-brown: #3B2A20; --vireo-terra: #C4532B;                     /* Vireo Café */
  --hf-plum: #4B1F45;   --hf-blush: #F3D6DC; --hf-rose: #C9748C;    /* Hartley Flowers */
  --wf-green: #1E4D3A;  --wf-amber: #E8A33D;                         /* Winter Fair, Home's sample poster */

  /* ---- Roles ---- */
  --bg: var(--desk);
  --surface: var(--paper);
  --surface-2: var(--sheet);
  --text: var(--ink);
  --text-2: var(--muted);
  --text-3: var(--faint);
  --border: var(--line);
  --border-strong: var(--ink);
  --divider: var(--rule);
  --control: var(--faint);
  --action: var(--ink);
  --action-hover: var(--ink-2);
  --on-action: #FFFFFF;
  --accent: var(--red);
  --accent-hover: var(--red-deep);
  --on-accent: #FFFFFF;
  --focus: var(--guide);
  --selected: var(--paper);
  --inverse: var(--ink);
  --on-inverse: #F2F3F4;
  --on-inverse-2: #A6ACB3;

  /* Printed objects: constant across themes */
  --print-paper: #FFFFFF;
  --print-ink: #111214;
  --print-shadow: 0 1px 1px rgba(17,18,20,.10), 0 14px 32px rgba(17,18,20,.14);

  /* ---- Type ---- */
  --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  /* Stand-ins from Google Fonts. Production: licence one grotesk + mono family (BR-02); swap these two lines. */
  --wdth-display: 118;
  --wdth-head: 110;
  --wdth-ui: 100;
  --wdth-mono: 87.5;

  /* ---- Space (4-based) ---- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px;
  --s7: 32px; --s8: 40px; --s9: 48px; --s10: 64px; --s11: 88px; --s12: 120px;
  --gutter: clamp(16px, 4vw, 48px);
  --wrap: 1240px;

  /* ---- Sizes ---- */
  --h-control: 40px;
  --h-control-lg: 52px;
  --tap: 44px;             /* minimum tap target on phones */
  --appbar: 60px;
  --tabbar: 64px;

  /* ---- The curl ---- */
  --curl-w: 2px;
  --curl-r: 16px;          /* the one bend radius */
  --module: 6px;           /* the square that ends a curl, and status squares */

  /* ---- Elevation ---- */
  --shadow-pop: 0 0 0 1px var(--ink), 0 12px 24px rgba(17,18,20,.12);
  --shadow-sheet: 0 1px 2px rgba(17,18,20,.08), 0 20px 44px rgba(17,18,20,.16);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 120ms;
  --t-route: 620ms;        /* the curl redraw */
  --t-stamp: 180ms;        /* the saved stamp */
  --t-enter: 200ms;        /* content settling in: a step, an opened section, a new rule */
  --t-move: 200ms;         /* rows gliding to a new place (Q.flip) */
  --ease-move: cubic-bezier(.77, 0, .175, 1);  /* movement on screen; --ease is for things arriving */
}

:root[data-theme="dark"] {
  --ink: #F2F3F4;
  --ink-2: #D5D8DC;
  --muted: #A6ACB3;
  --faint: #737A82;
  --line: #3E434A;
  --rule: #26292D;
  --paper: #18191B;
  --sheet: #1F2124;
  --desk: #0F1011;
  --red: #FF5B3F;
  --red-deep: #FF7A62;
  --red-tint: #3A1B15;
  --guide: #7DA8F0;
  --guide-tint: #16233A;
  --success: #5BBF7A;  --success-tint: #13291A;
  --warning: #E0A04A;  --warning-tint: #2E2210;
  --error:   #FF6B8A;  --error-tint:   #33141C;
  --c1: #3987E5; --c2: #C98500; --c3: #D55181; --c4: #008300; --c5: #9085E9; --c6: #199E70;
  --action: #F2F3F4;
  --action-hover: #FFFFFF;
  --on-action: #111214;
  --on-accent: #111214;
  --inverse: #F2F3F4;
  --on-inverse: #111214;
  --on-inverse-2: #4A4F56;
  --shadow-pop: 0 0 0 1px var(--ink), 0 12px 24px rgba(0,0,0,.5);
  --shadow-sheet: 0 0 0 1px var(--line), 0 20px 44px rgba(0,0,0,.55);
  color-scheme: dark;
}