/* ============================================================================
   SPITI — DESIGN TOKENS  (copied verbatim from artifacts/identity/design-tokens.css)
   Author: Elodie Rensen — Brand & Identity.  This file IS the app's skin.
   The app wears exactly this system. Do not edit here; edit the identity source
   and re-copy so identity and app never drift.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   FONT FACES — NO RUNTIME NETWORK FETCH (this part is true today).
   The three fonts.googleapis.com <link> tags are removed from view.js and
   auth-routes.js, so the app never reaches out to Google (or anywhere) for a
   font at request time. That is the load-bearing fix.

   OFFLINE SELF-HOSTING IS NOT YET COMPLETE. The @font-face rules below are
   local()-first, then a self-hosted woff2 in ./fonts/. But the woff2 binaries
   are NOT committed to this repo (they cannot be authored as text). So today:
     · a machine with these OFL faces INSTALLED renders true via local();
     · a bare/offline server with neither the faces installed nor the woff2
       files dropped in falls back to the same-genre system serif/sans in each
       stack — i.e. the Spiti wordmark would render in a system serif, not
       Cormorant Garamond.
   To make offline rendering genuinely true, drop the twelve woff2 files into
   public/fonts/ with the exact names referenced below (see public/fonts/README.md
   and RUN.md's font step). Once present, /fonts/*.woff2 resolves and every
   machine renders true, online or off. Family names match the token stacks
   below exactly, so nothing shifts when the files arrive.
   The four faces: Cormorant Garamond (300/400/500 + 300/400 italics),
   Inter (400/500/600), Newsreader (400 + 400 italic), IBM Plex Mono (400/500).
   ---------------------------------------------------------------------------- */
@font-face{ font-family:'Cormorant Garamond'; font-style:normal; font-weight:300; font-display:swap;
  src: local('Cormorant Garamond Light'), local('CormorantGaramond-Light'), local('Cormorant Garamond'), url('fonts/cormorant-garamond-300.woff2') format('woff2'); }
@font-face{ font-family:'Cormorant Garamond'; font-style:normal; font-weight:400; font-display:swap;
  src: local('Cormorant Garamond'), local('CormorantGaramond-Regular'), url('fonts/cormorant-garamond-400.woff2') format('woff2'); }
@font-face{ font-family:'Cormorant Garamond'; font-style:normal; font-weight:500; font-display:swap;
  src: local('Cormorant Garamond Medium'), local('CormorantGaramond-Medium'), url('fonts/cormorant-garamond-500.woff2') format('woff2'); }
@font-face{ font-family:'Cormorant Garamond'; font-style:italic; font-weight:300; font-display:swap;
  src: local('Cormorant Garamond Light Italic'), local('CormorantGaramond-LightItalic'), url('fonts/cormorant-garamond-300italic.woff2') format('woff2'); }
@font-face{ font-family:'Cormorant Garamond'; font-style:italic; font-weight:400; font-display:swap;
  src: local('Cormorant Garamond Italic'), local('CormorantGaramond-Italic'), url('fonts/cormorant-garamond-400italic.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src: local('Inter Regular'), local('Inter-Regular'), local('Inter'), url('fonts/inter-400.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap;
  src: local('Inter Medium'), local('Inter-Medium'), url('fonts/inter-500.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src: local('Inter SemiBold'), local('Inter-SemiBold'), url('fonts/inter-600.woff2') format('woff2'); }
@font-face{ font-family:'Newsreader'; font-style:normal; font-weight:400; font-display:swap;
  src: local('Newsreader Regular'), local('Newsreader-Regular'), local('Newsreader'), url('fonts/newsreader-400.woff2') format('woff2'); }
@font-face{ font-family:'Newsreader'; font-style:italic; font-weight:400; font-display:swap;
  src: local('Newsreader Italic'), local('Newsreader-Italic'), url('fonts/newsreader-400italic.woff2') format('woff2'); }
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src: local('IBM Plex Mono'), local('IBMPlexMono'), url('fonts/ibm-plex-mono-400.woff2') format('woff2'); }
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src: local('IBM Plex Mono Medium'), local('IBMPlexMono-Medium'), url('fonts/ibm-plex-mono-500.woff2') format('woff2'); }

:root {
  --oc-ivory:#F6F1E7; --oc-cream:#EFE8DA; --oc-parchment:#E7DECD; --oc-shell:#FBF8F1;
  --oc-ink:#23201B; --oc-ink-soft:#46413A; --oc-ink-muted:#6E675C; --oc-ink-faint:#9A9284;
  --oc-brass:#A8873E; --oc-brass-deep:#806528; --oc-brass-soft:#C9AE72; --oc-brass-veil:#EDE3CB;
  --oc-line:#DCD3C1; --oc-line-strong:#C4B9A2;

  --status-approved:#5E7355; --status-pending:#A8873E; --status-warning:#B0812F;
  --status-urgent:#A24B3B; --status-declined:#8A6F6A; --status-info:#4E6472;
  --status-approved-bg:#E7EAE0; --status-warning-bg:#F3E9D2; --status-urgent-bg:#F0E0DA; --status-info-bg:#E4EAED;

  --brand-primary:var(--oc-ink); --brand-primary-ink:var(--oc-ivory);
  --brand-accent:var(--oc-brass); --brand-accent-ink:var(--oc-ivory);
  --brand-ground:var(--oc-ivory); --brand-ground-alt:var(--oc-cream);
  --brand-line:var(--oc-line); --brand-hero-overlay:rgba(35,32,27,.42);
  --brand-name:"OC Special"; --brand-lockup-gap:0.9em; --brand-signature-scale:0.62;
  --brand-signature-ink:var(--oc-ink-muted); --brand-archetype:"house";

  --font-display:"Cormorant Garamond","Cormorant",Georgia,"Iowan Old Style","Times New Roman",serif;
  --font-body:"Inter","Inter var",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-read:"Newsreader",Georgia,"Iowan Old Style","Times New Roman",serif;
  --font-mono:"IBM Plex Mono","SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;

  --fw-display:300; --fw-display-med:500; --fw-body:400; --fw-body-med:500; --fw-body-semi:600;

  --step--2:0.694rem; --step--1:0.833rem; --step-0:1.000rem; --step-1:1.266rem;
  --step-2:1.602rem; --step-3:2.027rem; --step-4:2.566rem; --step-5:3.247rem; --step-6:4.110rem;
  --lh-tight:1.08; --lh-snug:1.28; --lh-body:1.62; --lh-data:1.40;
  --tracking-wordmark:0.08em; --tracking-kicker:0.22em; --tracking-tight:-0.01em;

  --space-3xs:0.25rem; --space-2xs:0.5rem; --space-xs:0.75rem; --space-s:1rem; --space-m:1.5rem;
  --space-l:2.25rem; --space-xl:3.5rem; --space-2xl:5.5rem; --space-3xl:8rem;
  --radius-xs:3px; --radius-s:5px; --radius-m:8px; --radius-l:14px; --radius-pill:999px;
  --control-h:44px; --control-h-sm:36px; --field-pad-x:1rem; --row-h:56px; --gutter:2.25rem; --measure:66ch;

  --shadow-0:none;
  --shadow-1:0 1px 2px rgba(35,32,27,0.05),0 1px 1px rgba(35,32,27,0.04);
  --shadow-2:0 2px 8px rgba(35,32,27,0.06),0 4px 16px rgba(35,32,27,0.05);
  --shadow-3:0 6px 24px rgba(35,32,27,0.08),0 12px 40px rgba(35,32,27,0.06);
  --shadow-inset:inset 0 0 0 1px var(--oc-line);
  --ring-focus:0 0 0 3px var(--oc-brass-veil),0 0 0 1px var(--oc-brass);

  --ease-standard:cubic-bezier(0.22,0.61,0.36,1); --ease-entrance:cubic-bezier(0.16,1,0.30,1);
  --ease-exit:cubic-bezier(0.55,0,0.55,0.2);
  --dur-fast:140ms; --dur-base:240ms; --dur-slow:420ms; --dur-stagger:60ms;
  --z-base:0; --z-raised:10; --z-nav:100; --z-overlay:1000; --z-toast:1100;
}

[data-density="spacious"]{
  --space-s:1rem; --space-m:1.5rem; --space-l:2.25rem; --space-xl:3.5rem; --space-2xl:5.5rem;
  --control-h:44px; --control-h-sm:36px; --row-h:60px; --gutter:2.5rem; --radius-m:8px; --radius-l:14px;
  --ui-body:var(--step-0); --ui-label:var(--step--1); --ui-h:var(--step-3);
}
[data-density="efficient"]{
  --space-3xs:0.2rem; --space-2xs:0.375rem; --space-xs:0.5rem; --space-s:0.75rem; --space-m:1rem;
  --space-l:1.5rem; --space-xl:2.25rem; --space-2xl:3.5rem; --space-3xl:5rem;
  --control-h:32px; --control-h-sm:26px; --field-pad-x:0.625rem; --row-h:38px; --gutter:1.25rem;
  --radius-xs:2px; --radius-s:3px; --radius-m:5px; --radius-l:8px;
  --ui-body:var(--step--1); --ui-label:var(--step--2); --ui-h:var(--step-2); --lh-body:1.45; --lh-data:1.32;
}

[data-brand="lv"],[data-brand="maison"]{
  --brand-archetype:"maison"; --brand-primary:#3B2A18; --brand-primary-ink:#F4ECDD;
  --brand-accent:#B8862F; --brand-accent-ink:#241A0E; --brand-ground:#F4ECDD; --brand-ground-alt:#EAE0CC;
  --brand-line:#D8C8A8; --brand-hero-overlay:linear-gradient(180deg,rgba(59,42,24,0) 30%,rgba(59,42,24,0.55) 100%);
  --brand-name:"Louis Vuitton"; --brand-signature-scale:0.58;
}
[data-brand="jeweler"]{
  --brand-archetype:"jeweler"; --brand-primary:#1A1D22; --brand-primary-ink:#F2F3F4;
  --brand-accent:#8C93A0; --brand-accent-ink:#14171B; --brand-ground:#F3F3F1; --brand-ground-alt:#E8E9E7;
  --brand-line:#D5D6D4; --brand-hero-overlay:linear-gradient(180deg,rgba(26,29,34,0) 30%,rgba(26,29,34,0.50) 100%);
  --brand-name:"the Maison"; --brand-signature-scale:0.60;
}
[data-brand="auto"]{
  --brand-archetype:"auto"; --brand-primary:#202325; --brand-primary-ink:#EEF0F1;
  --brand-accent:#7A2E2A; --brand-accent-ink:#F3E9E7; --brand-ground:#EEEEEC; --brand-ground-alt:#E1E2E0;
  --brand-line:#CBCCCA; --brand-hero-overlay:linear-gradient(180deg,rgba(32,35,37,0) 30%,rgba(32,35,37,0.52) 100%);
  --brand-name:"the Marque"; --brand-signature-scale:0.62; --tracking-tight:-0.02em;
}

@media (prefers-reduced-motion:reduce){
  :root{--dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms;--dur-stagger:0ms;
    --ease-standard:linear;--ease-entrance:linear;--ease-exit:linear;}
  *,*::before,*::after{animation-duration:0.001ms!important;animation-iteration-count:1!important;
    transition-duration:0.001ms!important;scroll-behavior:auto!important;}
}

:where(html){font-family:var(--font-body);font-size:100%;color:var(--oc-ink-soft);
  background:var(--oc-ivory);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
:where(body){margin:0;line-height:var(--lh-body);}
:where(h1,h2,h3,.display){font-family:var(--font-display);font-weight:var(--fw-display);
  color:var(--oc-ink);line-height:var(--lh-tight);letter-spacing:var(--tracking-tight);}
:where(a){color:var(--oc-brass);text-underline-offset:0.14em;}
:where(:focus-visible){outline:none;box-shadow:var(--ring-focus);border-radius:var(--radius-s);}
:where(code,.mono,.data){font-family:var(--font-mono);font-variant-numeric:tabular-nums;}

.spiti-wordmark{font-family:var(--font-display);font-weight:var(--fw-display);
  letter-spacing:var(--tracking-wordmark);color:var(--oc-ink);font-feature-settings:"liga" 1,"dlig" 1;}
.spiti-lockup{display:inline-flex;align-items:baseline;gap:var(--brand-lockup-gap);}
.spiti-lockup .oc-signature{font-family:var(--font-body);font-weight:var(--fw-body);
  font-size:calc(1em * var(--brand-signature-scale));letter-spacing:var(--tracking-kicker);
  text-transform:uppercase;color:var(--brand-signature-ink);}