/* =========================================================
   Learning Rewired Lab — canonical design tokens
   File: /assets/css/lrl-tokens.css
   Single source of truth for color, type, spacing, radius,
   border and shadow across every page. Import this first.
   ========================================================= */

:root {
  /* --- Ink / neutrals (true black is never used) --- */
  --lrl-ink: #07111f;
  --lrl-ink-800: #10243d;
  --lrl-ink-700: #1e293b;
  --lrl-slate: #475569;
  --lrl-slate-500: #64748b;
  --lrl-slate-400: #94a3b8;

  /* --- Surfaces & hairlines --- */
  --lrl-white: #ffffff;
  --lrl-mist: #f8fafc;
  --lrl-frost: #fbfdfe;
  --lrl-line: #e6ebf1;
  --lrl-line-strong: #d8e0ea;

  /* --- Product accents (never mixed arbitrarily) --- */
  --lrl-cyan: #16b8d9;        /* The Lab / default primary CTA */
  --lrl-cyan-600: #0ea5c2;    /* cyan hover */
  --lrl-cyan-700: #0789a2;    /* cyan text on light */
  --lrl-blue: #2563eb;        /* Studio */
  --lrl-blue-700: #1d4ed8;
  --lrl-teal: #14b8a6;        /* Companion */
  --lrl-teal-700: #0f766e;
  --lrl-gold: #f4c95d;        /* Services */
  --lrl-gold-700: #9a6a04;
  --lrl-mint: #6ee7d8;        /* sparkle / glow tint only — not a fill */

  /* --- Accent tints (accents are usually used at partial opacity) --- */
  --lrl-cyan-tint: rgba(22, 184, 217, .08);
  --lrl-cyan-tint-border: rgba(22, 184, 217, .38);
  --lrl-blue-tint: rgba(37, 99, 235, .08);
  --lrl-teal-tint: rgba(20, 184, 166, .10);
  --lrl-gold-tint: rgba(244, 201, 93, .14);
  --lrl-mint-tint: rgba(110, 231, 216, .14);

  /* --- Dark panel treatment --- */
  --lrl-panel-dark: linear-gradient(158deg, #07111f, #10243d);
  --lrl-panel-glow: radial-gradient(70% 90% at 50% -10%, rgba(22, 184, 217, .18), transparent 60%);

  /* --- Type --- */
  --lrl-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  --lrl-display: clamp(38px, 5.6vw, 62px);
  --lrl-h2: clamp(27px, 3.6vw, 42px);
  --lrl-h3: clamp(20px, 2.2vw, 26px);
  --lrl-lede: clamp(16px, 1.5vw, 18px);
  --lrl-body: 15px;
  --lrl-body-sm: 14.5px;       /* body copy floor */
  --lrl-kicker: 11px;          /* uppercase eyebrows only */
  --lrl-tracking-display: -.045em;
  --lrl-tracking-h2: -.038em;
  --lrl-tracking-kicker: .16em;
  --lrl-weight-display: 900;
  --lrl-weight-strong: 850;
  --lrl-leading-body: 1.62;

  /* --- Layout & spacing --- */
  --lrl-container: 1220px;
  --lrl-gutter: 26px;
  --lrl-section-y: clamp(64px, 8vw, 104px);
  --lrl-space-1: 6px;
  --lrl-space-2: 10px;
  --lrl-space-3: 14px;
  --lrl-space-4: 22px;
  --lrl-space-5: 34px;
  --lrl-space-6: 44px;

  /* --- Radius --- */
  --lrl-radius-chip: 13px;
  --lrl-radius-card: 22px;
  --lrl-radius-panel: 28px;
  --lrl-radius-feature: 34px;
  --lrl-radius-pill: 999px;

  /* --- Borders --- */
  --lrl-border: 1px solid var(--lrl-line, #e6ebf1);

  /* --- Shadows (soft, diffuse; CTA shadows are colored glows) --- */
  --lrl-shadow-sm: 0 6px 16px rgba(15, 23, 42, .05);
  --lrl-shadow-card: 0 18px 50px rgba(15, 23, 42, .05);
  --lrl-shadow-card-hover: 0 24px 60px rgba(15, 23, 42, .09);
  --lrl-shadow-panel: 0 34px 80px rgba(7, 17, 31, .28);
  --lrl-shadow-cta-cyan: 0 14px 30px rgba(22, 184, 217, .30);
  --lrl-shadow-cta-blue: 0 14px 30px rgba(37, 99, 235, .28);
}

/* Reduced motion is honored site-wide (controlled-sparkle rule). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}