/* ══════════════════════════════════════════════════════════════
   MAISON · LV × IBM — shared design tokens
   ══════════════════════════════════════════════════════════════
   Single source of truth for both the real prototype (app/index.html)
   and its documentation (component-library.html). Both files <link>
   this stylesheet instead of declaring their own copy of these values —
   see component-library-standards.md Part 0 and the 2026-07-17 rebuild
   for why: two independent hand-copies of the same tokens drifted apart
   repeatedly across sessions with nothing to catch it. A shared file
   makes that class of drift structurally impossible — there is only one
   declaration left to edit, and editing it updates both pages at once.

   Do NOT add documentation-only "shell chrome" tokens here (sidebar
   width, documentation-page-only accent colors, etc.) — those belong in
   component-library.html's own local LAYER 0 block, since they aren't
   part of the real product and app/index.html has no use for them.
   Only tokens that are genuinely real, declared, and used in the actual
   app belong in this file.
   ══════════════════════════════════════════════════════════════ */

@font-face { font-family: 'Radikal'; src: url('assets/fonts/Radikal-Font/Radikal Light.woff2')   format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Radikal'; src: url('assets/fonts/Radikal-Font/Radikal Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Radikal'; src: url('assets/fonts/Radikal-Font/Radikal Medium.woff2')  format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Radikal'; src: url('assets/fonts/Radikal-Font/Radikal Bold.woff2')    format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Radikal'; src: url('assets/fonts/Radikal-Font/Radikal Black.woff2')   format('woff2'); font-weight: 900; font-display: swap; }

:root {
  --cream:        #D4B896;
  --cream-soft:   #E8D5B7;
  --navy-deep:    #001A49;
  --navy-1:       #0E1430;
  --navy-2:       #14193F;
  --surface:      #181D45;
  --surface-2:    #1F254F;
  --line:         rgba(212,184,150,0.10);
  --line-2:       rgba(212,184,150,0.22);
  --text:         #F5F0E6;
  --muted:        rgba(245,240,230,0.62);
  --dim:          rgba(245,240,230,0.52);
  --ok:           #9CC8A0;
  --warn:         #E8C28A;
  --alert:        #E89F8A;

  /* Motion — each curve is genuinely single-use in the app (bag-react glow,
     screen transition, push banner) but was hardcoded 5+2+2+3 times across
     component-library.html itself, a real intra-file drift risk. Named here
     so the library can reference one declaration instead of retyping the
     literal value. Durations stay inline — only the curves repeat. */
  --ease-sine:        cubic-bezier(0.37, 0, 0.63, 1);   /* Sine in-out — bag-react glow pulse */
  --ease-out-quint:   cubic-bezier(0.22, 0.61, 0.36, 1); /* Out Quint — screen transition transform */
  --ease-out-cubic:   cubic-bezier(0.33, 1, 0.68, 1);    /* Out Cubic — screen transition opacity */
  --ease-weighted:    cubic-bezier(0.32, 0.72, 0, 1);    /* Weighted Finish — push banner */
}