/* ==========================================================================
   GAINZ — Design Tokens
   Source of truth: DESIGN-DIRECTION.md (T3)
   All color, type, spacing, and sizing decisions derive from this file.
   ========================================================================== */

:root {
  /* ---------- Palette ---------- */

  /* Base surfaces — anodized blue-steel, not pure black */
  --color-iron:      #0F1620;   /* app background */
  --color-plate:     #1C2533;   /* card / input surface */
  --color-rack:      #2A3548;   /* elevated surface / modal / active input */

  /* Text */
  --color-chalk:     #E8EDF2;   /* primary text — not pure white, slight cool tint */
  --color-chalk-dim: #6B7A8D;   /* secondary text, labels, units */

  /* Accent — used in ONE disciplined place at a time */
  --color-belt:      #D4822A;   /* leather-belt amber — active tab, primary CTA */

  /* PR celebration — only active during PR overlay */
  --color-pr:        #F5F7FA;   /* chalk-cloud flash background */
  --color-pr-glow:   #FF9F1C;   /* radial burn center behind PR number */

  /* Semantic aliases */
  --color-bg:        var(--color-iron);
  --color-surface:   var(--color-plate);
  --color-surface-raised: var(--color-rack);
  --color-text:      var(--color-chalk);
  --color-text-muted: var(--color-chalk-dim);
  --color-accent:    var(--color-belt);

  /* Danger / destructive actions */
  --color-danger:    #C0392B;
  --color-danger-dim: #922B21;

  /* ---------- Typography ---------- */

  /* Role 1 — Display / Data numerals: condensed heavy for weight/rep readability mid-set */
  --font-display: 'Arial Narrow', 'Impact', system-ui, ui-sans-serif, sans-serif;

  /* Role 2 — Body / Interface: system-native for crispest rendering on device */
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, ui-sans-serif, sans-serif;

  /* Role 3 — Utility / timestamps / set indices: monospaced for alignment */
  --font-mono: 'Roboto Mono', 'Courier New', ui-monospace, monospace;

  /* Type scale */
  --text-xs:      0.75rem;    /* 12px — timestamps, micro-labels */
  --text-sm:      0.875rem;   /* 14px — secondary labels */
  --text-base:    1rem;       /* 16px — body copy, nav labels */
  --text-md:      1.125rem;   /* 18px — card titles */
  --text-lg:      1.25rem;    /* 20px — section headers */
  --text-xl:      1.5rem;     /* 24px — screen title */

  /* Data numeral scale — display role only */
  --text-data-sm:  2rem;      /* 32px — small inline numerals */
  --text-data-lg:  2.5rem;    /* 40px — standard weight/rep display */
  --text-data-xl:  4rem;      /* 64px — hero numerals, active set */
  --text-data-pr:  6rem;      /* 96px — PR celebration value */

  /* Line heights */
  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.5;

  /* Font weights */
  --weight-normal:  400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;
  --weight-black:   900;

  /* ---------- Spacing ---------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;

  /* ---------- Sizing ---------- */
  --tap-min:      44px;   /* WCAG 2.2 SC 2.5.8 minimum touch target */
  --nav-height:   56px;   /* bottom nav bar height */
  --safe-bottom:  env(safe-area-inset-bottom, 0px);
  --safe-top:     env(safe-area-inset-top, 0px);

  /* ---------- Shape ---------- */
  --radius-sm:    6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  /* ---------- Motion ---------- */
  --duration-flash:  80ms;
  --duration-slam:  200ms;
  --duration-fade:  300ms;
  --ease-snap: cubic-bezier(0.22, 1, 0.36, 1);   /* fast attack, slight overshoot */
  --ease-out:  cubic-bezier(0.0, 0.0, 0.2, 1.0);

  /* ---------- Z-index scale ---------- */
  --z-base:    0;
  --z-raised:  10;
  --z-nav:     100;
  --z-overlay: 200;
  --z-pr:      999;   /* PR celebration sits above everything */
}