/* ============================================================
   VITAMED · DESIGN TOKENS
   Single source of truth for the brand. Import first.
   Warm-neutral paper + vermilion accent, technical mono type.
   ============================================================ */

:root {
  /* ---------- WARM NEUTRAL RAMP ---------- */
  --w-25:  #FBF8F2;  /* lightest paper         */
  --w-50:  #F2ECE1;  /* bone — primary page bg */
  --w-100: #E7DECF;  /* sunken fill / tint     */
  --w-200: #D8CFBE;  /* hairline borders       */
  --w-300: #BCB1A0;  /* strong borders         */
  --w-400: #8F7C61;  /* muted text on dark     */
  --w-500: #6E6457;  /* muted text on light    */
  --w-700: #3A332D;  /* soft ink               */
  --w-850: #262019;  /* elevated dark surface  */
  --w-900: #201B16;  /* dark surface           */
  --w-950: #1A1714;  /* INK — text & dark bg   */

  /* ---------- ACCENT · VERMILION ---------- */
  --accent-50:  #FBE7E0;
  --accent-100: #F5CDBF;
  --accent:     #E14A28;
  --accent-600: #C63F20;
  --accent-700: #A5341A;

  /* ---------- SIGNAL (status only, never decoration) ---------- */
  --ok:      #3F7D4E;
  --ok-tint: #E4EFE4;
  --warn:    #A5341A;

  /* ---------- SEMANTIC ROLES ---------- */
  --bg:               var(--w-50);
  --bg-paper:         var(--w-25);
  --surface:          var(--w-25);
  --surface-sunken:   var(--w-100);
  --bg-invert:        var(--w-950);
  --surface-invert:   var(--w-850);

  --text:             var(--w-950);
  --text-muted:       var(--w-700);
  --text-faint:       var(--w-500);
  --text-invert:      var(--w-50);
  --text-invert-muted:var(--w-300);

  --border:           var(--w-200);
  --border-strong:    var(--w-300);
  --border-invert:    rgba(242,236,225,.16);

  --brand:            var(--accent);
  --brand-hover:      var(--accent-600);
  --brand-ink:        var(--accent-700);
  --focus-ring:       var(--accent);

  /* ---------- TYPEFACES ---------- */
  --font-display: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-sans:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- TYPE SCALE ---------- */
  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --text-4xl:  3rem;
  --text-5xl:  4rem;

  /* ---------- WEIGHTS ---------- */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* ---------- LINE HEIGHT ---------- */
  --leading-tight:   1.04;
  --leading-snug:    1.22;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ---------- TRACKING ---------- */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-label:  0.18em;

  /* ---------- SPACE (4px base) ---------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;

  /* ---------- RADIUS ---------- */
  --radius-sm:  3px;
  --radius-md:  6px;
  --radius-lg:  10px;
  --radius-xl:  16px;
  --radius-pill:999px;

  /* ---------- BORDERS ---------- */
  --border-1: 1px solid var(--border);
  --border-2: 1.5px solid var(--text);

  /* ---------- SHADOWS (crafted, never glowy) ---------- */
  --shadow-xs: 0 1px 2px rgba(26,23,20,.06);
  --shadow-sm: 0 2px 8px rgba(26,23,20,.07);
  --shadow-md: 0 8px 28px rgba(26,23,20,.10);
  --shadow-lg: 0 20px 56px rgba(26,23,20,.16);

  /* ---------- MOTION ---------- */
  --dur-fast:  120ms;
  --dur-base:  220ms;
  --dur-slow:  420ms;
  --ease:      cubic-bezier(.2,.7,.3,1);

  /* ---------- LAYOUT ---------- */
  --container:  1180px;
  --container-narrow: 760px;
  --gutter: var(--space-5);
}