/**
 * UXDivi Design System — Tokens globales
 *
 * Fuente de verdad unica de los design tokens del rediseno UXDivi.
 * Cargado por uxdivi-child/functions.php en TODAS las pages con priority temprana.
 *
 * NO contiene semantic defaults (html, body, h1...) para no afectar paginas legacy
 * (BB theme child / contenido viejo). Los baselines viven dentro de cada CSS scoped
 * por pagina (uxdivi-login.css con body.page-login, uxdivi-checkout.css con
 * body.woocommerce-checkout, etc.).
 *
 * Sincronizado con design-system/colors_and_type.css mas los tokens semanticos
 * --success / --danger anadidos por las maquetas de login y checkout.
 *
 * @package UXDivi_Child
 * @version 1.0.0
 */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ─── Brand colors ─────────────────────────────────── */
  --brand:        #014DFD;   /* primary electric blue */
  --brand-light:  #4A7EFF;   /* gradients, highlights */
  --brand-2:      #0035C4;   /* deep variation */
  --cyan:         #62E5FF;   /* secondary CTA, glow, active icons */
  --cyan-2:       #8CEEFF;   /* cyan hover */

  /* ─── Semantic feedback ─────────────────────────────── */
  --success:      #22D39A;   /* OK states, completed lessons */
  --danger:       #FF5E7A;   /* errors, destructive actions */
  --warning:      #FFB547;   /* alerts, pending review */

  /* ─── Ink (foreground text) ────────────────────────── */
  --ink:          #F5F8FF;   /* H1–H6 */
  --ink-2:        #C6D2E8;   /* body copy */
  --ink-3:        #8894B3;   /* captions, muted */
  --ink-4:        #566080;   /* disabled, sutil numbering */
  --ink-on-brand: #FFFFFF;   /* white on brand buttons */

  /* ─── Backgrounds & surfaces ───────────────────────── */
  --bg:           #040814;   /* body / hero / footer */
  --bg-2:         #070C1C;   /* secondary bg */
  --surface:      #0A0F1E;   /* card bg, alt sections */
  --surface-2:    #10172B;   /* subtle border */
  --surface-3:    #18213E;   /* focus/emphasized border */

  /* ─── Lines & strokes ──────────────────────────────── */
  --line:         rgba(98,229,255,0.08);
  --line-2:       rgba(255,255,255,0.10);
  --line-strong:  rgba(98,229,255,0.25);

  /* ─── Fonts ─────────────────────────────────────────── */
  --display: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  --body:    'Inter', system-ui, -apple-system, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* ─── Fluid type scale ─────────────────────────────── */
  --fs-h1: clamp(44px, 6vw, 76px);
  --fs-h2: clamp(32px, 4vw, 52px);
  --fs-h3: clamp(18px, 2vw, 22px);
  --fs-h4: clamp(16px, 1.6vw, 20px);
  --fs-h5: clamp(14px, 1.3vw, 17px);
  --fs-h6: clamp(12px, 1.1vw, 14px);
  --fs-body: 16px;
  --fs-small: 13px;
  --fs-eyebrow: 11px;

  /* ─── Radii ─────────────────────────────────────────── */
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius:    14px;
  --radius-sm: 10px;
  --radius-xs: 8px;
  --radius-pill: 999px;

  /* ─── Spacing scale (8-base) ───────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 88px;  /* section padding desktop */

  /* ─── Layout widths ────────────────────────────────── */
  --max-w: 1200px;
  --max-w-tablet: 768px;
  --col-gap: 24px;

  /* ─── Shadows / glows ──────────────────────────────── */
  --glow-brand:        0 10px 40px -8px rgba(1, 77, 253, 0.55);
  --glow-cyan:         0 10px 40px -8px rgba(98, 229, 255, 0.55);
  --shadow-card:       0 1px 0 rgba(255,255,255,0.04) inset, 0 30px 60px -40px rgba(0,0,0,0.9);
  --shadow-elev:       0 20px 50px -20px rgba(0,0,0,0.75);
  --shadow-input:      0 1px 0 rgba(255,255,255,0.04) inset;
  --shadow-input-focus: 0 0 0 3px rgba(98,229,255,0.15), 0 1px 0 rgba(255,255,255,0.04) inset;

  /* ─── Gradients ────────────────────────────────────── */
  --grad-primary: linear-gradient(135deg, var(--brand) 0%, var(--brand-light) 100%);
  --grad-text:    linear-gradient(90deg, var(--brand-light) 0%, var(--cyan) 100%);
  --grad-radial:  radial-gradient(60% 80% at 50% 0%, rgba(1,77,253,0.35), transparent 60%);

  /* ─── Motion ───────────────────────────────────────── */
  --ease:     cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur:      250ms;
  --dur-slow: 450ms;
}