/* ---------------------------------------------------------------------------
   VEYCA - design tokens

   The identity is strictly monochrome: the logo is a white outline mark on
   black, with no brand colour anywhere. Nothing here invents one. The only
   colour on the page is the red the real control panel itself shows for
   standby and mute - it is the device's colour, not the brand's. If a brand
   accent is ever chosen, --accent below is the single place to put it.
   --------------------------------------------------------------------------- */

/* Die Schrift steht eingebettet in css/font.css - über file:// blockiert der
   Browser eine verlinkte Schrift als Cross-Origin-Anfrage, und die Seite muss
   sich per Doppelklick öffnen lassen.

   Nur der Schnitt «latin» wird geladen. Geprüft: kein Zeichen auf der Seite
   liegt ausserhalb davon. Kommen einmal Texte mit osteuropäischer Diakritik
   dazu, gehört archivo-var-latin-ext.woff2 wieder eingebunden - dann aber
   ebenfalls eingebettet, sonst bricht es über file:// wieder weg. */
:root {
  /* surfaces --------------------------------------------------------------- */
  --bg:            #000000;
  --bg-elev:       #0a0a0b;
  --surface:       #121316;
  --surface-2:     #17181c;

  /* lines - hairlines carry the outline language of the logo mark ---------- */
  --line:          rgba(255, 255, 255, 0.13);
  --line-strong:   rgba(255, 255, 255, 0.28);
  --line-bright:   rgba(255, 255, 255, 0.55);

  /* ink -------------------------------------------------------------------- */
  --ink:           #ffffff;
  --ink-2:         rgba(255, 255, 255, 0.72);
  --ink-3:         rgba(255, 255, 255, 0.46);
  --ink-4:         rgba(255, 255, 255, 0.28);
  --accent:        var(--ink);          /* deliberately not a colour, see above */

  /* the control panel's own palette, taken from the real device ------------ */
  --panel-bg:      #1a1a1a;
  --panel-bar:     #0d0d0d;
  --panel-line:    #2a2a2a;
  --panel-tile:    #353941;
  --panel-active:  #e7e8eb;
  --panel-ink-on:  #000000;
  --panel-standby: #ea3323;

  /* type ------------------------------------------------------------------- */
  --font: 'Archivo', 'Archivo Fallback', system-ui, -apple-system, 'Segoe UI',
          Roboto, Helvetica, Arial, sans-serif;

  --step-display: clamp(2.6rem, 6.6vw, 6rem);
  --step-h2:      clamp(1.9rem, 3.8vw, 3.25rem);
  --step-h3:      clamp(1.15rem, 1.5vw, 1.4rem);
  --step-lead:    clamp(1.02rem, 1.35vw, 1.3rem);
  --step-body:    clamp(0.95rem, 1.02vw, 1.02rem);
  --step-small:   0.82rem;
  --step-eyebrow: 0.72rem;

  /* the logo's wide tracking, echoed on every uppercase label */
  --track-wide:   0.24em;
  --track-display: 0.005em;

  /* space ------------------------------------------------------------------ */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;    --s-11: 10rem;

  --section-y: clamp(4.5rem, 10vw, 9rem);
  --gutter:    clamp(1.25rem, 4.2vw, 4rem);
  --measure:   68ch;
  --maxw:      1440px;

  /* motion ----------------------------------------------------------------- */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 160ms;  --dur-2: 320ms;  --dur-3: 620ms;

  --radius:    2px;   /* the brand draws with straight hairlines, not soft cards */
  --radius-lg: 3px;
}

/* Metric-matched fallback so the swap from system sans to Archivo does not
   reflow the page. Values from Archivo's own hhea/OS-2 metrics. */
@font-face {
  font-family: 'Archivo Fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  ascent-override: 94%;
  descent-override: 24%;
  line-gap-override: 0%;
  size-adjust: 101%;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; }
}