/* =============================================
   DESIGN TOKENS — "MONOCHROME & BONE"
   $100M Global Institutional Standard
   ============================================= */
:root {
  /* === THE PALETTE === */
  /* Obsidian Ink — Deep, rich ink (not flat black) */
  --ink: #080808;
  --ink-90: rgba(8, 8, 8, 0.9);
  --ink-70: rgba(8, 8, 8, 0.7);
  --ink-50: rgba(8, 8, 8, 0.5);
  --ink-30: rgba(8, 8, 8, 0.3);
  --ink-15: rgba(8, 8, 8, 0.15);
  --ink-08: rgba(8, 8, 8, 0.08);
  --ink-04: rgba(8, 8, 8, 0.04);

  /* Gallery Bone — High-end museum wall */
  --bone: #EFEFE9;
  --bone-warm: #E8E8E0;
  --bone-cool: #E5E5DF;
  --bone-deep: #DEDED8;

  /* Bronze Patina — Aged metal, institutional legacy (USE SPARINGLY) */
  --bronze: #8C7851;
  --bronze-light: #A69068;
  --bronze-glow: rgba(140, 120, 81, 0.15);
  --bronze-dim: rgba(140, 120, 81, 0.08);

  /* Architectural Lines */
  --hairline: #D1D1CB;
  --hairline-dark: #C4C4BE;

  /* Legacy mappings (for compatibility) */
  --primary-deep: var(--ink);
  --primary: var(--ink-90);
  --accent: var(--bronze);
  --accent-bright: var(--bronze-light);
  --accent-dim: var(--bronze-dim);
  --highlight: var(--bronze);
  --highlight-dim: var(--bronze-dim);
  --white: #FFFFFF;
  --bg: var(--bone);
  --bg-alt: #FFFFFF;
  --off-white: var(--bone);
  --cream: var(--bone-warm);
  --text-primary: var(--ink);
  --text-secondary: var(--ink-70);
  --text-muted: var(--ink-50);
  --border-light: var(--hairline);

  /* === TYPOGRAPHY === */
  --font-serif: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', 'SF Mono', monospace;

  /* Tight kerning for headlines */
  --tracking-tight: -0.03em;
  --tracking-normal: -0.01em;
  --tracking-wide: 0.12em;

  /* === SHADOWS (Subtle, architectural) === */
  --shadow-subtle:
    0 1px 2px rgba(8, 8, 8, 0.04),
    0 2px 4px rgba(8, 8, 8, 0.02);
  --shadow-card:
    0 1px 3px rgba(8, 8, 8, 0.03),
    0 4px 12px rgba(8, 8, 8, 0.02);
  --shadow-elevated:
    0 2px 4px rgba(8, 8, 8, 0.03),
    0 8px 24px rgba(8, 8, 8, 0.04);
  --shadow-bronze-glow: 0 0 40px rgba(140, 120, 81, 0.12);

  /* Legacy shadow mappings */
  --shadow-neutral: rgba(8, 8, 8, 0.08);
  --shadow-float-sm: var(--shadow-subtle);
  --shadow-float-md: var(--shadow-card);
  --shadow-float-lg: var(--shadow-elevated);

  /* === ARCHITECTURAL RADII (Sharp, minimal) === */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-card: 2px;

  /* === PHASE LABELS (Monochrome with position indicator) === */
  --phase-1: var(--ink);
  --phase-2: var(--ink-90);
  --phase-3: var(--ink-90);
  --phase-4: var(--ink-90);
  --phase-5: var(--ink-90);
  --phase-6: var(--ink-90);
  --phase-7: var(--bronze);

  /* Legacy phase color mappings */
  --phase-prime: var(--ink);
  --phase-complicate: var(--ink-90);
  --phase-position: var(--ink-90);
  --phase-breakout: var(--ink-90);
  --phase-shareback: var(--ink-90);
  --phase-synthesize: var(--ink-90);
  --phase-capture: var(--bronze);

  /* === EASING (Slower, more deliberate) === */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-reveal: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-orbital: cubic-bezier(0.4, 0, 0.6, 1);
  --ease-expand: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-morph: cubic-bezier(0.65, 0, 0.35, 1);

  /* === TIMING (Slow-gate reveal) === */
  --duration-fast: 200ms;
  --duration-normal: 400ms;
  --duration-slow: 800ms;
  --duration-reveal: 1000ms;
}