/*
 * web2print studio design tokens. Everything visual in the SPA reads from here.
 *
 * Direction: "proof room". The product exists to put artwork on garments and
 * paper, so the interface borrows the print floor rather than SaaS chrome:
 *   - neutrals are the cool greys of a D50 viewing booth, so artwork colors read true;
 *   - the three process inks are functional, never decorative:
 *       cyan    = the action you can take
 *       magenta = registration: focus, selection, where the eye should land
 *       yellow  = highlighter: values you changed and have not rendered/saved
 *   - artwork always sits on a ground (garment color) with crop marks.
 * Type is one family, Archivo: expanded width for display, normal width for UI.
 */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin.woff2") format("woff2-variations");
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2-variations");
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;
  /* neutrals: viewing booth */
  --booth: #E6E8EB;      /* app ground */
  --sheet: #FFFFFF;      /* working surfaces */
  --sheet-2: #F4F5F7;    /* recessed: inputs, wells */
  --rule: #D2D6DC;
  --rule-strong: #A9B0BA;
  --ink: #15171B;        /* primary text */
  --ink-2: #4B515C;      /* secondary text */
  --ink-3: #6E7581;      /* tertiary, still AA on sheet */
  /* process inks */
  --cyan: #0086C3;  --cyan-ink: #006E9F;  --cyan-wash: #E1F2FA;  --on-cyan: #FFFFFF;
  --magenta: #D1006C;  --magenta-wash: #FBE3EF;
  --yellow: #FFE600;  --yellow-wash: #FFF7B3;
  /* states */
  /* one hue per app in charts (CVD-checked: every pair >= 10 OKLab dE under protan/deutan/tritan) */
  --app-templates: #0086C3;  --app-prepress: #D1006C;  --app-imposition: #A67C00;
  --ok: #157A4A;  --ok-wash: #DDF2E7;
  --fail: #B42318; --fail-wash: #FBE4E1;
  --warn: #A64B00; --warn-wash: #FDEBD8;
  /* the mat the artwork sits on when no garment is chosen */
  --mat: #D9DCE0;
  --paper: #FFFFFF;
  --crop: #15171B;

  /* type */
  --font: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --wide: 125%;  --normal: 100%;  --narrow: 85%;
  --t-12: 0.75rem; --t-13: 0.8125rem; --t-15: 0.9375rem; --t-19: 1.1875rem;
  --t-24: 1.5rem; --t-30: 1.875rem; --t-38: 2.375rem; --t-48: 3rem;
  --lh-tight: 1.1; --lh: 1.45;

  /* space: 4px base */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

  /* shape: radius follows hierarchy (controls < panels), shadows only for things that float */
  --r-control: 6px; --r-panel: 3px; --r-pill: 999px;
  --lift: 0 1px 2px rgb(21 23 27 / .08), 0 8px 24px -8px rgb(21 23 27 / .18);
  --lift-high: 0 2px 4px rgb(21 23 27 / .10), 0 24px 64px -16px rgb(21 23 27 / .35);

  /* motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --fast: 120ms; --med: 220ms; --slow: 420ms;

  /* layout */
  --rail: 68px; --editor: 360px; --top: 56px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --booth: #08090A; --sheet: #121418; --sheet-2: #1A1D22;
    --rule: #272B32; --rule-strong: #3B414B;
    --ink: #ECEEF1; --ink-2: #A7AEB8; --ink-3: #868E99;
    --cyan: #33B1E6; --cyan-ink: #6CC7EE; --cyan-wash: #0C2A38; --on-cyan: #04131B;
    --magenta: #FF4DA6; --magenta-wash: #3A0C22;
    --yellow: #FFE94D; --yellow-wash: #3A3505;
    --ok: #4CC38A; --ok-wash: #0D2A1C; --fail: #FF7B6E; --fail-wash: #3A1210; --warn: #F5A524; --warn-wash: #3A2606;
    --mat: #2A2E34; --crop: #ECEEF1; --paper: #E8E9EB;
    --app-templates: #33B1E6; --app-prepress: #FF4DA6; --app-imposition: #E0B400;
    --lift: 0 1px 2px rgb(0 0 0 / .5), 0 8px 24px -8px rgb(0 0 0 / .6);
    --lift-high: 0 2px 4px rgb(0 0 0 / .5), 0 24px 64px -16px rgb(0 0 0 / .8);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --booth: #08090A; --sheet: #121418; --sheet-2: #1A1D22;
  --rule: #272B32; --rule-strong: #3B414B;
  --ink: #ECEEF1; --ink-2: #A7AEB8; --ink-3: #868E99;
  --cyan: #33B1E6; --cyan-ink: #6CC7EE; --cyan-wash: #0C2A38; --on-cyan: #04131B;
  --magenta: #FF4DA6; --magenta-wash: #3A0C22;
  --yellow: #FFE94D; --yellow-wash: #3A3505;
  --ok: #4CC38A; --ok-wash: #0D2A1C; --fail: #FF7B6E; --fail-wash: #3A1210; --warn: #F5A524; --warn-wash: #3A2606;
  --mat: #2A2E34; --crop: #ECEEF1; --paper: #E8E9EB;
  --app-templates: #33B1E6; --app-prepress: #FF4DA6; --app-imposition: #E0B400;
  --lift: 0 1px 2px rgb(0 0 0 / .5), 0 8px 24px -8px rgb(0 0 0 / .6);
  --lift-high: 0 2px 4px rgb(0 0 0 / .5), 0 24px 64px -16px rgb(0 0 0 / .8);
}

@media (prefers-reduced-motion: reduce) {
  :root { --fast: 0ms; --med: 0ms; --slow: 0ms; }
}