/* ============================================================================
   PaperMag Pro — Design Tokens v2.0
   ----------------------------------------------------------------------------
   Single source of truth. Every color, type size, spacing unit, shadow,
   radius, and motion curve used by the theme resolves through a CSS custom
   property defined in this file. Component CSS MUST NOT contain hardcoded
   hex values or magic numbers — reference a token instead.
   Loaded before every other stylesheet via enqueue priority 1.
   ============================================================================ */

:root {

  /* ------------------------------------------------------------------------
     1. COLOR — Zinc-based neutrals + Indigo/Cyan brand + semantic
     ------------------------------------------------------------------------ */

  /* Zinc scale (neutral greys, warmer than slate) */
  --pm-zinc-50:  #FAFAFA;
  --pm-zinc-100: #F4F4F5;
  --pm-zinc-200: #E4E4E7;
  --pm-zinc-300: #D4D4D8;
  --pm-zinc-400: #A1A1AA;
  --pm-zinc-500: #71717A;
  --pm-zinc-600: #52525B;
  --pm-zinc-700: #3F3F46;
  --pm-zinc-800: #27272A;
  --pm-zinc-900: #18181B;
  --pm-zinc-950: #09090B;

  /* Brand — Indigo primary */
  --pm-indigo-50:  #EEF2FF;
  --pm-indigo-100: #E0E7FF;
  --pm-indigo-400: #818CF8;
  --pm-indigo-500: #6366F1;
  --pm-indigo-600: #4F46E5;  /* primary */
  --pm-indigo-700: #4338CA;
  --pm-indigo-900: #312E81;

  /* Brand — Cyan accent */
  --pm-cyan-400: #22D3EE;
  --pm-cyan-500: #06B6D4;  /* accent */
  --pm-cyan-600: #0891B2;

  /* Semantic */
  --pm-success: #10B981;
  --pm-warning: #F59E0B;
  --pm-danger:  #EF4444;

  /* Aliases — component-level semantic colors (light mode defaults) */
  --pm-color-bg:          var(--pm-zinc-50);
  --pm-color-bg-alt:      #FFFFFF;
  --pm-color-surface:     #FFFFFF;
  --pm-color-surface-alt: var(--pm-zinc-100);
  --pm-color-text:        var(--pm-zinc-900);
  --pm-color-text-muted:  var(--pm-zinc-600);
  --pm-color-text-subtle: var(--pm-zinc-500);
  --pm-color-border:      var(--pm-zinc-200);
  --pm-color-border-strong: var(--pm-zinc-300);
  --pm-color-primary:     var(--pm-indigo-600);
  --pm-color-primary-hover: var(--pm-indigo-700);
  --pm-color-accent:      var(--pm-cyan-500);
  --pm-color-link:        var(--pm-indigo-600);
  --pm-color-header-bg:   #FFFFFF;

  /* ------------------------------------------------------------------------
     2. TYPOGRAPHY — IBM Plex Sans (heads) + Crimson Pro (body) + Inter (UI)
     Google Fonts enqueued in functions.php; JetBrains Mono is conditionally
     loaded on single posts only. Fallback chains are intentional — never
     leave a single-family declaration.
     ------------------------------------------------------------------------ */

  /* Canonical font tokens (project naming convention: --pm-font-*) */
  --pm-font-heading: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pm-font-body:    "Crimson Pro", Georgia, "Times New Roman", serif;
  --pm-font-ui:      "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pm-font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Aliases under canonical --font-* names (referenced by component CSS sweep) */
  --font-heading: var(--pm-font-heading);
  --font-body:    var(--pm-font-body);
  --font-ui:      var(--pm-font-ui);
  --font-mono:    var(--pm-font-mono);

  /* Fluid type scale (clamp min, mid-vw, max) */
  --pm-text-xs:   clamp(0.75rem, 0.72rem + 0.09vw, 0.8125rem);
  --pm-text-sm:   clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --pm-text-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --pm-text-lg:   clamp(1.125rem, 1.09rem + 0.18vw, 1.1875rem);
  --pm-text-xl:   clamp(1.25rem, 1.2rem + 0.24vw, 1.375rem);
  --pm-text-2xl:  clamp(1.5rem, 1.4rem + 0.5vw, 1.75rem);
  --pm-text-3xl:  clamp(1.875rem, 1.7rem + 0.8vw, 2.25rem);
  --pm-text-4xl:  clamp(2.25rem, 2rem + 1.2vw, 3rem);
  --pm-text-hero: clamp(2.75rem, 2.2rem + 2.5vw, 4.5rem);

  --pm-leading-tight:   1.15;
  --pm-leading-snug:    1.35;
  --pm-leading-normal:  1.55;
  --pm-leading-relaxed: 1.75;

  --pm-tracking-tight:  -0.02em;
  --pm-tracking-normal: 0;
  --pm-tracking-wide:   0.025em;

  /* ------------------------------------------------------------------------
     3. SPACING — 4pt base grid
     ------------------------------------------------------------------------ */

  --pm-space-1:  4px;
  --pm-space-2:  8px;
  --pm-space-3:  12px;
  --pm-space-4:  16px;
  --pm-space-5:  20px;
  --pm-space-6:  24px;
  --pm-space-8:  32px;
  --pm-space-10: 40px;
  --pm-space-12: 48px;
  --pm-space-16: 64px;
  --pm-space-20: 80px;
  --pm-space-24: 96px;

  /* ------------------------------------------------------------------------
     4. RADIUS
     ------------------------------------------------------------------------ */

  --pm-radius-sm:    4px;
  --pm-radius:       8px;
  --pm-radius-md:    12px;
  --pm-radius-lg:    16px;
  --pm-radius-xl:    24px;
  --pm-radius-full:  9999px;

  /* ------------------------------------------------------------------------
     5. SHADOW — 5-tier, indigo-tinted on hover layer
     ------------------------------------------------------------------------ */

  --pm-shadow-xs:    0 1px 2px 0 rgba(24, 24, 27, 0.05);
  --pm-shadow-sm:    0 1px 3px 0 rgba(24, 24, 27, 0.08), 0 1px 2px -1px rgba(24, 24, 27, 0.04);
  --pm-shadow-md:    0 4px 6px -1px rgba(24, 24, 27, 0.10), 0 2px 4px -2px rgba(24, 24, 27, 0.06);
  --pm-shadow-lg:    0 10px 15px -3px rgba(24, 24, 27, 0.10), 0 4px 6px -4px rgba(24, 24, 27, 0.06);
  --pm-shadow-xl:    0 20px 25px -5px rgba(24, 24, 27, 0.12), 0 8px 10px -6px rgba(24, 24, 27, 0.05);
  --pm-shadow-hover: 0 12px 30px -6px rgba(79, 70, 229, 0.18), 0 4px 10px -2px rgba(79, 70, 229, 0.08);

  /* ------------------------------------------------------------------------
     6. MOTION
     ------------------------------------------------------------------------ */

  --pm-ease-fast:    150ms cubic-bezier(0.4, 0, 0.2, 1);
  --pm-ease:         200ms cubic-bezier(0.4, 0, 0.2, 1);
  --pm-ease-slow:    300ms cubic-bezier(0.4, 0, 0.2, 1);
  --pm-ease-spring:  300ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --pm-ease-reveal:  400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ------------------------------------------------------------------------
     7. LAYOUT
     ------------------------------------------------------------------------ */

  --pm-container:      1320px;
  --pm-container-wide: 1440px;
  --pm-content-width:  68ch;        /* optimal reading measure */
  --pm-header-height:  72px;
  --pm-header-height-scrolled: 56px;
  --pm-z-header:       100;
  --pm-z-drawer:       1000;
  --pm-z-overlay:      1100;
  --pm-z-top:          9999;
}