/**
 * 3DPE Design Tokens — primitives only
 * Locked: 2026-04-22
 *
 * These are pure scales (mathematics, not design choices). They flow into every
 * component via CSS custom property reference — never hardcode raw values.
 *
 * NOT in this file: button styles, card styles, form styles, etc. Those are
 * Phase 2 component patterns and will be sketched as v1 defaults once real
 * pages reveal the constraints. See brand-guidelines.html "Extending the system"
 * for the proposal/extension process.
 */

:root {
  /* ============================================================
     BRAND COLOUR RGB COMPONENTS
     ============================================================
     Needed so shadow/focus tokens can reference brand colours with
     dynamic alpha. If the brand colour ever changes, shadows update
     automatically — no hardcoded RGB drift.
   */
  --purple-900-rgb: 58, 37, 73;    /* #3a2549 */
  --mint-400-rgb:   14, 231, 191;  /* #0ee7bf */
  --ink-rgb:        12, 17, 26;    /* #0c111a */

  /* ============================================================
     SPACING — 4px base unit, geometric-ish progression
     ============================================================
     Use everywhere there's a gap, padding, margin, or position.
     Never write `padding: 12px` — write `padding: var(--space-3)`.
     Rem-based so user browser font-size preferences are respected
     (accessibility: users who increase root font-size get proportional spacing).
   */
  --space-0:  0;
  --space-1:  0.25rem;   /*  4px · hairline gap, icon-text spacing */
  --space-2:  0.5rem;    /*  8px · tight cluster (buttons, chips) */
  --space-3:  0.75rem;   /* 12px · related items (form rows) */
  --space-4:  1rem;      /* 16px · BASE — paragraph rhythm, body padding */
  --space-5:  1.5rem;    /* 24px · card padding, list item gap */
  --space-6:  2rem;      /* 32px · section padding inside cards */
  --space-7:  3rem;      /* 48px · between-section gap, card-to-card */
  --space-8:  4rem;      /* 64px · major section breaks */
  --space-9:  6rem;      /* 96px · hero padding, page-level breathing */
  --space-10: 8rem;      /* 128px · maximum vertical break (rare) */

  /* ============================================================
     BORDER RADIUS — 4 step + pill
     ============================================================
     Smaller for interactive elements (buttons, inputs), bigger for
     content containers (cards, sections, hero blocks).
   */
  --radius-0: 0;
  --radius-1: 4px;     /* tight · buttons, inputs, badges */
  --radius-2: 8px;     /* small · chips, small cards */
  --radius-3: 12px;    /* medium · standard card */
  --radius-4: 16px;    /* large · feature cards, modal dialogs */
  --radius-5: 24px;    /* xl · hero blocks, image masks */
  --radius-pill: 9999px; /* full circle / pill — avatars, status dots */

  /* ============================================================
     SHADOW — purple-tinted (not generic grey) so cards feel branded
     ============================================================
     Each elevation = realistic light source from above + slight ambient.
     Tints use --purple-900 base so shadows blend with the brand palette.
   */
  --shadow-subtle:
    0 1px 2px rgba(var(--purple-900-rgb), 0.04),
    0 1px 1px rgba(var(--purple-900-rgb), 0.03);

  --shadow-soft:
    0 2px 8px rgba(var(--purple-900-rgb), 0.06),
    0 1px 3px rgba(var(--purple-900-rgb), 0.04);

  --shadow-lift:
    0 8px 24px rgba(var(--purple-900-rgb), 0.10),
    0 2px 6px rgba(var(--purple-900-rgb), 0.05);

  --shadow-overlay:
    0 24px 48px rgba(var(--ink-rgb), 0.20),
    0 12px 24px rgba(var(--ink-rgb), 0.12);

  --shadow-focus: 0 0 0 3px rgba(var(--mint-400-rgb), 0.40);
  /* mint focus ring — keyboard accessibility default for buttons + inputs */

  /* ============================================================
     Z-INDEX — explicit scale, no ad-hoc 9999s
     ============================================================
     Always reference these. Never write a literal z-index.
   */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;  /* modal backdrop / page dimming */
  --z-modal:    400;  /* modal panel itself */
  --z-toast:    500;  /* top-of-stack notifications */
  --z-tooltip:  600;  /* always-above: only tooltips ride here */
}

/* ---------- spacing scale also exposed as utility classes (optional) ---------- */
.gap-1  { gap: var(--space-1); }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-5  { gap: var(--space-5); }
.gap-6  { gap: var(--space-6); }
.gap-7  { gap: var(--space-7); }
.gap-8  { gap: var(--space-8); }

/* ---------- shadow utility classes ---------- */
.shadow-subtle  { box-shadow: var(--shadow-subtle); }
.shadow-soft    { box-shadow: var(--shadow-soft); }
.shadow-lift    { box-shadow: var(--shadow-lift); }
.shadow-overlay { box-shadow: var(--shadow-overlay); }

/* ---------- focus ring (apply to interactive elements that need it) ---------- */
.focus-ring:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}