/* ============================================================
   GMC 2026 — Design Tokens (canonical)
   Ported from: apps/wordpress theme refactor/components/assets/gmc-tokens.css
   NOTE: Google Fonts @import removed — fonts are self-hosted via theme.json fontFace.
   ============================================================ */

:root {
  /* ─── Backgrounds ─────────────────────────────────────── */
  --gmc-bg:       #0C0C0C;
  --gmc-elevated: #141414;
  --gmc-surface:  #1A1A1A;
  --gmc-border:   rgba(255, 255, 255, 0.10);
  --gmc-border-strong: rgba(255, 255, 255, 0.20);
  /* Alias: specs/brand 06-web components reference --gmc-border-focus */
  --gmc-border-focus: var(--gmc-border-strong);

  /* ─── Text ────────────────────────────────────────────── */
  --gmc-text:       #FFFFFF;
  --gmc-text-dim:   rgba(255, 255, 255, 0.60);
  --gmc-text-muted: #9A9A9A; /* WCAG AA ~7.4:1 sobre canvas/elevated/surface (antes #8A8A8A) */

  /* ─── Category Colors — Primary ──────────────────────── */
  --gmc-learn:         #6366F1;
  --gmc-tools:         #22D3EE;
  --gmc-artists:       #F472B6;
  --gmc-events:        #A78BFA;
  --gmc-opportunities: #34D399;
  --gmc-news:          #FBBF24;

  /* ─── Category Colors — Spark ────────────────────────── */
  --gmc-learn-spark:         #22D3EE;
  --gmc-tools-spark:         #F472B6;
  --gmc-artists-spark:       #22D3EE;
  --gmc-events-spark:        #F472B6;
  --gmc-opportunities-spark: #22D3EE;
  --gmc-news-spark:          #F472B6;

  /* ─── Fonts ───────────────────────────────────────────── */
  --font-display: 'Outfit', system-ui, sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, sans-serif;
  --font-code:    'Source Code Pro', ui-monospace, monospace;

  /* ─── Type Scale ──────────────────────────────────────── */
  /* xs subido 10→12px (legibilidad/WCAG, deliberado vs referencia);
     sm=12px restaura el render de referencia (code, captions, tags) */
  --text-xs:   12px;
  --text-sm:   12px;
  --text-md:   14px;
  --text-lg:   16px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  32px;
  --text-4xl:  48px;
  --text-5xl:  64px;

  /* ─── Spacing (8px base) ──────────────────────────────── */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* ─── O-Scale Opacity ─────────────────────────────────── */
  --o1: 0.02;
  --o2: 0.06;
  --o3: 0.14;
  --o4: 0.28;
  --o5: 0.50;
  --o6: 0.70;
  --o-spark: 0.65;

  /* ─── Motion — Easing ─────────────────────────────────── */
  --ease-standard:   cubic-bezier(0.4, 0.0, 0.2, 1.0);
  --ease-enter:      cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --ease-exit:       cubic-bezier(0.4, 0.0, 1.0, 1.0);
  --ease-expressive: cubic-bezier(0.34, 1.56, 0.64, 1.0);
  --ease-spring:     cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* ─── Motion — Duration ───────────────────────────────── */
  --dur-instant: 50ms;
  --dur-fast:    100ms;
  --dur-normal:  200ms;
  --dur-slow:    350ms;
  --dur-xslow:   500ms;
  --dur-scene:   800ms;
}

/* Respeta reduced-motion globalmente: neutraliza duraciones */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-fast:    0ms;
    --dur-normal:  0ms;
    --dur-slow:    0ms;
    --dur-xslow:   0ms;
    --dur-scene:   0ms;
  }
}