/*
 * V1-VISUAL-DESIGN-TOKENS-1.0 — Premium-M2 (HYP-OPS-204)
 *
 * Premium design tokens for the FEX shell. PREFIX: --p-*. These tokens
 * COEXIST with the legacy `--navy / --fex-* / --fs-* / --sp-* / --rd-*`
 * variables in client_v2.html — they do NOT redefine or shadow any
 * existing variable. Premium-M3 (Editorial typography), Premium-M4
 * (Premium cockpit cards) and Premium-M5 (Micro-interactions) build on
 * top of THIS foundation.
 *
 * Premium discipline (restraint, not maximalism):
 *   - 4 ink / 4 paper neutrals (no 50-step grey gradient).
 *   - 4 accents only (clinical / good / warn / stop), each in 2 weights.
 *   - 8-step spacing scale on a 4 px base.
 *   - 5 radii (xs/sm/md/lg/pill).
 *   - 4 shadows + 1 focus ring (NO Material elevation default).
 *   - 4 motion easings + 4 durations (cubic-béziers custom; restrained).
 *
 * Forbidden by construction:
 *   - NO glass-morphism gradients.
 *   - NO neon / saturated rainbow accents.
 *   - NO Google-Material elevation auto-blur.
 *   - NO inline `style="font-family: …"` style sheets (typography is
 *     Premium-M3's job; THIS file holds tokens, not type-stack rules).
 *
 * Defense: every `--p-*` token name is unique to this file. The
 * Premium-M2 smoke pins the presence of each named token + that no
 * `--p-*` collisions exist in client_v2.html.
 */

:root {
  /* ─── PALETTE — ink (text + structural) ──────────────────────── */
  --p-ink-900: #0B1320;   /* heaviest text, headlines */
  --p-ink-700: #1F2A40;   /* body text */
  --p-ink-500: #4D5A75;   /* secondary text, metadata */
  --p-ink-300: #93A0BB;   /* tertiary text, captions */

  /* ─── PALETTE — paper (surfaces + structural lines) ──────────── */
  --p-paper-50:  #FBFCFE; /* lightest surface, cards on canvas */
  --p-paper-100: #F4F6FB; /* canvas */
  --p-paper-200: #E8EDF5; /* subtle dividers */
  --p-paper-300: #C8D1E1; /* primary dividers */

  /* ─── PALETTE — accents (4 only, each in 2 weights) ──────────── */
  --p-accent-clinical:        #1B2D5C; /* navy (legacy --navy parity) */
  --p-accent-clinical-soft:   #E5EBF6;
  --p-accent-good:            #157A44; /* clinically positive */
  --p-accent-good-soft:       #E4F1EA;
  --p-accent-warn:            #9C5B0A; /* attention, NOT alarm */
  --p-accent-warn-soft:       #FBEDD8;
  --p-accent-stop:            #A1281C; /* boundary stop (not "danger") */
  --p-accent-stop-soft:       #F7E2DF;

  /* ─── SPACING — 4 px base, modular 8-step scale ──────────────── */
  --p-space-1:  4px;
  --p-space-2:  8px;
  --p-space-3:  12px;
  --p-space-4:  16px;
  --p-space-5:  24px;
  --p-space-6:  32px;
  --p-space-7:  48px;
  --p-space-8:  64px;

  /* ─── RADII — 5 (xs/sm/md/lg/pill) ───────────────────────────── */
  --p-radius-xs:   2px;
  --p-radius-sm:   4px;
  --p-radius-md:   8px;
  --p-radius-lg:   12px;
  --p-radius-pill: 9999px;

  /* ─── SHADOWS — 4 sutiles, ink-tinted (no Material auto-elevation) */
  --p-shadow-0: 0 0 0 1px rgba(11,19,32,.04);
  --p-shadow-1: 0 1px 2px rgba(11,19,32,.06),
                0 1px 4px rgba(11,19,32,.04);
  --p-shadow-2: 0 4px 12px rgba(11,19,32,.08),
                0 2px 4px rgba(11,19,32,.04);
  --p-shadow-3: 0 16px 40px rgba(11,19,32,.14),
                0 4px 12px rgba(11,19,32,.06);
  --p-shadow-focus: 0 0 0 2px var(--p-paper-50),
                    0 0 0 4px var(--p-accent-clinical);

  /* ─── MOTION — custom cubic-béziers + durations ──────────────── */
  --p-ease-enter:       cubic-bezier(.16,.84,.44,1);
  --p-ease-exit:        cubic-bezier(.4,.0,1,1);
  --p-ease-emphasized:  cubic-bezier(.2,.0,0,1);
  --p-ease-sharp:       cubic-bezier(.45,.05,.55,.95);
  --p-dur-xs:  100ms;
  --p-dur-sm:  160ms;
  --p-dur-md:  240ms;
  --p-dur-lg:  360ms;

  /* ─── DENSITY — premium type rhythm (line-height anchors) ────── */
  --p-line-tight:  1.15;
  --p-line-snug:   1.35;
  --p-line-body:   1.55;
  --p-line-loose:  1.7;
}

/*
 * Prefer-reduced-motion: collapse motion durations to 0 ms so Premium-M5
 * micro-interactions become instantaneous (no fade-in, no scale-in).
 * Tokens remain defined so downstream consumers do not need branching;
 * the duration override is what neutralises the effect.
 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --p-dur-xs: 0ms;
    --p-dur-sm: 0ms;
    --p-dur-md: 0ms;
    --p-dur-lg: 0ms;
  }
}