/* ================================================
   vairee design system — tokens
   Single source of truth for all design variables.
   NEVER override these in component CSS.
   ================================================ */
 
:root {
  /* ── Backgrounds ── */
  --bg-0:         #050407;      /* page base — near black, warm undertone */
  --bg-1:         #0a0807;      /* alternate dark surface */
  --bg-paper:     #F5F1EB;      /* hiring panel — warm parchment white */
 
  /* ── Paper (on dark surfaces) ── */
  --paper:        #ECE3D2;      /* primary text on dark */
  --paper-2:      rgba(236, 227, 210, 0.66);
  --paper-3:      rgba(236, 227, 210, 0.36);
  --paper-4:      rgba(236, 227, 210, 0.16);
  --paper-5:      rgba(236, 227, 210, 0.08);
 
  /* ── Ink (on light surfaces) ── */
  --ink:          #15110d;      /* primary text on light */
  --ink-2:        #4a443c;      /* secondary text on light */
  --ink-3:        #8a8377;      /* tertiary / muted on light */
 
  /* ── Orange — RESERVED. Use only the 3 approved instances. ── */
  --orange:       #FA8714;      /* 1: wordmark dot, 2: active state-dot, 3: hiring CTA */
 
  /* ── Typography ── */
  --font-display: "strenuous", "Lato", system-ui, sans-serif;
  --font-body:    "Lato", system-ui, sans-serif;
 
  /* ── Spacing ── */
  --sp-xs:  0.25rem;
  --sp-sm:  0.5rem;
  --sp-md:  1rem;
  --sp-lg:  2rem;
  --sp-xl:  4rem;

  /* ── Layout (mobile-first defaults) ── */
  --nav-h:        52px;
  --touch-min:    48px;
  --page-pad-x:   max(16px, env(safe-area-inset-left, 0px));
  --page-pad-r:   max(16px, env(safe-area-inset-right, 0px));
  --safe-top:     env(safe-area-inset-top, 0px);
  --safe-bottom:  env(safe-area-inset-bottom, 0px);
  --path-bar-h:   52px;
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
 
  /* ── Radius ── */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   20px;
}