/* ============================================================
   FLUXATH CRM — Stripe-inspired token overlay
   Phase 1 of stripe-reskin-2026-05-24.

   Layers Stripe's typographic, geometric, elevation, motion, and
   density vocabulary on top of style.css WITHOUT touching the
   FLUXATH color system (brand violet + 12 accent themes stay
   intact). Reskinned components opt in by name (--rad-pill,
   --type-display-lg, --shadow-soft-blue-1, --ease-stripe, etc.);
   un-migrated components stay visually identical.
   ============================================================ */

:root {
  /* ── Stripe rounded scale (additive — existing --radius unchanged) ── */
  --rad-xs:   4px;
  --rad-sm:   6px;
  --rad-md:   8px;
  --rad-lg:   12px;
  --rad-xl:   16px;
  --rad-pill: 9999px;

  /* ── Stripe-style blue-tinted elevation (light mode) ── */
  --shadow-soft-blue-1: 0 1px 3px rgba(0,55,112,.08);
  --shadow-soft-blue-2: 0 8px 24px rgba(0,55,112,.08),
                        0 2px 6px  rgba(0,55,112,.04);
  --shadow-soft-blue-3: 0 24px 48px rgba(0,55,112,.12),
                        0 6px 12px  rgba(0,55,112,.06);

  /* ── Motion ── */
  --ease-stripe:  cubic-bezier(.4, 0, .2, 1);
  --ease-out:     cubic-bezier(.2, 0, 0, 1);
  --ease-in:      cubic-bezier(.4, 0, 1, 1);
  --dur-instant:  80ms;
  --dur-fast:     150ms;
  --dur-med:      220ms;
  --dur-slow:     350ms;

  /* ── Typography presets ──
     Use as `font: var(--type-display-xl)` shorthand for headlines that
     want Stripe's editorial air. Body text stays at the default Inter
     weight unless explicitly migrated. */
  --type-display-xxl: 300 56px/1.03 var(--font-sans);
  --type-display-xl:  300 48px/1.15 var(--font-sans);
  --type-display-lg:  300 32px/1.10 var(--font-sans);
  --type-display-md:  300 26px/1.12 var(--font-sans);
  --type-heading-lg:  300 22px/1.10 var(--font-sans);
  --type-heading-md:  300 20px/1.40 var(--font-sans);
  --type-heading-sm:  300 18px/1.40 var(--font-sans);
  --type-body-lg:     300 16px/1.40 var(--font-sans);
  --type-body-md:     300 15px/1.40 var(--font-sans);
  --type-body-tab:    300 14px/1.40 var(--font-sans);
  --type-button-md:   400 16px/1.00 var(--font-sans);
  --type-button-sm:   400 14px/1.00 var(--font-sans);
  --type-caption:     400 13px/1.40 var(--font-sans);
  --type-micro:       300 11px/1.40 var(--font-sans);
  --type-micro-cap:   400 10px/1.15 var(--font-sans);

  /* ── Display letter-spacing (negative tracking, Stripe's typographic signature) ── */
  --tracking-display-xxl: -1.4px;
  --tracking-display-xl:  -.96px;
  --tracking-display-lg:  -.64px;
  --tracking-display-md:  -.26px;
  --tracking-heading-lg:  -.22px;
  --tracking-heading-md:  -.20px;
  --tracking-tabular:     -.42px;
  --tracking-caption:     -.39px;
  --tracking-micro-cap:    .10px;

  /* ── Font feature settings ── */
  --font-feat-base: "ss01";
  --font-feat-num:  "tnum", "ss01";

  /* ── Foreground on colored surfaces ──
     Defined as tokens (not raw #fff) so a future inverted theme can
     redefine without touching every primitive. White is correct on both
     themes today since brand violet + accent stay vivid in dark mode. */
  --ink-on-accent:  #ffffff;
  --ink-on-brand:   #ffffff;
  --toggle-knob-bg: #ffffff;

  /* ── Density-aware spacing ──
     Default = "comfortable" (Stripe's default rhythm).
     [data-density="compact"] trims row paddings for power-user routes. */
  --row-pad-y:   12px;
  --row-pad-x:   16px;
  --cell-pad-y:  10px;
  --cell-pad-x:  12px;
  --stack-gap:   12px;
  --section-gap: 32px;
}

/* ── Compact density overrides ── */
[data-density="compact"] {
  --row-pad-y:   8px;
  --row-pad-x:   12px;
  --cell-pad-y:  6px;
  --cell-pad-x:  10px;
  --stack-gap:   8px;
  --section-gap: 24px;
}

/* ── Dark-theme elevation overrides ──
   Blue-tinted shadows lose contrast on dark surfaces; substitute
   higher-opacity black-keyed shadows. */
[data-theme="dark"] {
  --shadow-soft-blue-1: 0 1px 3px rgba(0,0,0,.40);
  --shadow-soft-blue-2: 0 8px 24px rgba(0,0,0,.45),
                        0 2px 6px  rgba(0,0,0,.30);
  --shadow-soft-blue-3: 0 24px 48px rgba(0,0,0,.55),
                        0 6px 12px  rgba(0,0,0,.30);
}

/* ── Global font-feature setting (ss01 stylistic set) ──
   The single most distinctive token in the Stripe overlay. Inter ships
   ss01 (single-story `a` + related glyphs); enabling it across the
   document is the most efficient way to make the reskin "feel Stripe-y"
   without per-component migration. */
html { font-feature-settings: var(--font-feat-base); }

/* ── Tabular-figure opt-in for numeric cells ── */
.num, .tnum {
  font-feature-settings: var(--font-feat-num);
  font-variant-numeric: tabular-nums;
}