/**
 * PROEX DESIGN TOKENS
 * Philosophy: Light Quiet Luxury · Editorial · Institutional Data Intelligence
 * Strict: 80-90% White/Off-white/Black/Grey | ~5% Bronze | ~1% Rare Burgundy
 */

:root {
  /* ==========================================================================
     1. COLOR SYSTEM (LIGHT QUIET LUXURY)
     ========================================================================== */
  --canvas-pure: #FFFFFF;
  --canvas-soft: #FAF9F6;
  --canvas-warm: #F6F4EF;
  --canvas-subtle: #F0EDE6;

  /* Ink / Typography */
  --ink-primary: #171717;      /* Headlines & high-contrast elements */
  --ink-secondary: #222222;    /* Reading body copy */
  --ink-muted: #707070;        /* Secondary copy, captions, subtexts */
  --ink-tertiary: #8A8A8A;     /* Micro-labels, meta information */
  --ink-faint: #BFBCB5;        /* Disabled / subtle indicators */

  /* Borders & Dividers */
  --border: #E8E5DF;           /* Primary light structural divider */
  --border-subtle: rgba(23, 23, 23, 0.06);
  --border-strong: rgba(23, 23, 23, 0.14);

  /* Accents (~5% Bronze, ~1% Burgundy) */
  --bronze: #B28A52;           /* Primary luxury bronze accent */
  --bronze-soft: #C19B62;      /* Hover states & softer accents */
  --bronze-ghost: rgba(178, 138, 82, 0.10);
  --bronze-subtle: rgba(178, 138, 82, 0.22);
  --burgundy: #72131B;         /* High-value strategic CTA only */

  /* Status Tokens (Subtle & Editorial) */
  --status-up: #2E7D32;
  --status-up-bg: rgba(46, 125, 50, 0.08);
  --status-verified: #B28A52;
  --status-verified-bg: rgba(178, 138, 82, 0.08);

  /* ==========================================================================
     2. TYPOGRAPHY SYSTEM
     ========================================================================== */
  --font-serif: "Newsreader", Georgia, serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Font Sizes */
  --text-hero: clamp(38px, 4.4vw, 64px);
  --text-h1: clamp(30px, 3vw, 44px);
  --text-h2: clamp(22px, 2vw, 32px);
  --text-h3: clamp(17px, 1.3vw, 21px);
  --text-body: 15px;
  --text-sub: 13.5px;
  --text-caption: 12px;
  --text-eyebrow: 11px;

  /* Line Heights */
  --leading-tight: 1.12;
  --leading-snug: 1.25;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  /* Letter Spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.04em;
  --tracking-eyebrow: 0.14em;

  /* ==========================================================================
     3. LAYOUT & SPACING SYSTEM
     ========================================================================== */
  --container-max: 1360px;
  --container-pad: clamp(20px, 3.2vw, 48px);

  /* Vertical Section Spacing (Tightened by 25-35% to eliminate dead-space) */
  --section-pad: clamp(52px, 5.2vw, 86px);
  --section-pad-sm: clamp(32px, 3.4vw, 54px);

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

  /* Border Radii */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 9999px;

  /* ==========================================================================
     4. MOTION & ELEVATION
     ========================================================================== */
  --ease-editorial: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-proex: cubic-bezier(0.16, 1, 0.3, 1);

  --motion-fast: 180ms;
  --motion-ui: 260ms;
  --motion-medium: 600ms;
  --motion-slow: 900ms;
  --motion-scene: 1200ms;
  --duration-micro: 200ms;
  --duration-text: 700ms;
  --duration-image: 850ms;
  --duration-line: 1600ms;

  --shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.04);
  --shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.06);

  /* Z-Index Layers */
  --z-base: 1;
  --z-overlay: 10;
  --z-sticky: 100;
  --z-header: 1000;
  --z-modal: 2000;
}

/* Tabular numbers for financial and metric data */
.proex-tabular,
.proex-num {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}