/*
 * Progmatrix design tokens.
 *
 * Every colour, radius, shadow, spacing step and motion curve the site uses is
 * defined here once. Components read these variables; nothing else should hold
 * a raw hex value.
 *
 * Brand colour: #cf5f72 (Progmatrix rose) stays the identity colour, used for
 * accents, glows, rules and large display text. On white it measures ~3.8:1,
 * which FAILS WCAG AA for normal-size text, so text links and white-on-colour
 * buttons use --color-primary-strong (#b9475c, ~5.1:1) from the same hue.
 */
:root {
  /* Rose (brand) scale */
  --rose-50: #fdf3f5;
  --rose-100: #fbe6ea;
  --rose-200: #f5c9d1;
  --rose-300: #eca5b2;
  --rose-400: #df8193;
  --rose-500: #cf5f72;
  --rose-600: #b9475c;
  --rose-700: #9d3a4e;
  --rose-800: #7f3142;

  /* Ink (neutral) scale — slightly cool, pairs with the black logo wordmark */
  --ink-950: #0a0c11;
  --ink-900: #11141b;
  --ink-800: #1b1f29;
  --ink-700: #2a303c;
  --ink-600: #444b59;
  --ink-500: #5d6574;
  --ink-400: #868d9b;
  --ink-300: #c2c7d0;
  --ink-200: #e2e5ea;
  --ink-100: #eef0f3;
  --ink-50: #f7f8fa;

  /* Secondary accent: used only inside glows/gradients for depth */
  --violet-500: #6d5bd0;

  /* Semantic colours */
  --color-primary: var(--rose-500);
  --color-primary-strong: var(--rose-600);
  --color-primary-dark: var(--rose-700);
  --color-primary-light: var(--rose-100);
  --color-primary-subtle: var(--rose-50);

  --color-background: #ffffff;
  --color-surface: #ffffff;
  --color-surface-subtle: #faf8f9;
  --color-surface-muted: var(--ink-50);
  --color-surface-elevated: #ffffff;
  --color-surface-inverse: var(--surface-inverse);

  /* Palette-controlled tokens (overridden per [data-palette] below) */
  --surface-inverse: var(--ink-900);       /* dark heroes, stats band, CTA card */
  --surface-inverse-deep: var(--ink-950);
  --accent-2: var(--violet-500);           /* secondary accent: gradients, glows */
  --accent-2-rgb: 109, 91, 208;
  --glow-primary-rgb: 207, 95, 114;        /* brand rose, for translucent glows */
  --primary-strong-rgb: 185, 71, 92;

  --color-text-primary: var(--ink-900);
  --color-text-secondary: var(--ink-600);
  --color-text-muted: var(--ink-500);
  --color-text-inverse: #ffffff;
  --color-text-inverse-muted: rgba(255, 255, 255, 0.72);

  --color-border: var(--ink-200);
  --color-border-strong: var(--ink-300);
  --color-border-inverse: rgba(255, 255, 255, 0.12);

  --color-success: #17803d;
  --color-success-subtle: #eefaf2;
  --color-danger: #c42b1c;
  --color-danger-subtle: #fff4f2;
  --color-whatsapp: #1fa855;

  --focus-ring: 0 0 0 3px #fff, 0 0 0 5px var(--rose-600);

  /* Typography */
  --font-sans: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Jakarta Fallback', 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'JetBrains Mono', Menlo, Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.0625rem;
  --text-lg: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --text-3xl: clamp(1.875rem, 1.4rem + 1.9vw, 2.75rem);
  --text-4xl: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  --text-display: clamp(2.6rem, 1.4rem + 4.6vw, 5.25rem);

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;
  --tracking-tight: -0.015em;
  --tracking-display: -0.025em;
  --tracking-wide: 0.08em;

  /* Spacing (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);
  --gutter: clamp(1rem, 0.6rem + 1.6vw, 1.5rem);

  /* Radius — deliberately restrained, not "AI template" round */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Elevation — layered, low-opacity, ink-tinted */
  --shadow-xs: 0 1px 2px rgba(17, 20, 27, 0.05);
  --shadow-sm: 0 1px 2px rgba(17, 20, 27, 0.04), 0 2px 6px rgba(17, 20, 27, 0.05);
  --shadow-md: 0 2px 4px rgba(17, 20, 27, 0.04), 0 8px 24px -4px rgba(17, 20, 27, 0.08);
  --shadow-lg: 0 4px 8px rgba(17, 20, 27, 0.04), 0 20px 48px -12px rgba(17, 20, 27, 0.16);
  --shadow-brand: 0 8px 24px -8px rgba(var(--primary-strong-rgb), 0.55);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 600ms;

  /* Layout */
  --header-h: 84px;
  --header-h-compact: 70px;
  --container-max: 1240px;
  --measure: 70ch;

  /* Patterns */
  --grid-line: rgba(17, 20, 27, 0.06);
  --grid-line-inverse: rgba(255, 255, 255, 0.06);

  /*
   * Compatibility: the old theme's variables are still read by inline styles
   * in a few templates (funnel, blog) as var(--accent-color, #cf5f72). Point
   * them at the AA-safe brand shade so those pages match the new system.
   */
  --accent-color: var(--rose-600);
  --accent-color-rgb: 185, 71, 92;
  --heading-color: var(--ink-900);
  --default-color: var(--ink-600);
  --contrast-color: #ffffff;

  /* Bootstrap 5.3 hooks, so its components inherit the system */
  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size: 1rem;
  --bs-body-line-height: var(--leading-normal);
  --bs-body-color: var(--color-text-secondary);
  --bs-body-color-rgb: 68, 75, 89;
  --bs-emphasis-color: var(--ink-900);
  --bs-heading-color: var(--color-text-primary);
  --bs-link-color: var(--rose-600);
  --bs-link-color-rgb: 185, 71, 92;
  --bs-link-hover-color: var(--rose-700);
  --bs-link-hover-color-rgb: 157, 58, 78;
  --bs-border-color: var(--color-border);
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-md);
  --bs-primary: var(--rose-600);
  --bs-primary-rgb: 185, 71, 92;
  --bs-focus-ring-color: rgba(var(--primary-strong-rgb), 0.3);
  --bs-secondary-color: var(--ink-500);
  --bs-tertiary-bg: var(--ink-50);
}

@media (max-width: 1199.98px) {
  :root {
    --header-h: 72px;
    --header-h-compact: 64px;
  }
}

/* =====================================================================
   Colour palettes
   Set on <html data-palette="..."> in templates/base.html. Every palette
   keeps the Progmatrix rose as the brand colour; what changes is the dark
   surface it sits on, the secondary accent, and the light section tint.
   "rose-ink" (no attribute) is the default defined above.
   ===================================================================== */

/* Rose + Indigo — matches the navy/indigo course artwork; AI/tech feel */
[data-palette='rose-indigo'] {
  --surface-inverse: #17143a;
  --surface-inverse-deep: #0c0a24;
  --accent-2: #7b6cf6;
  --accent-2-rgb: 123, 108, 246;
  --color-surface-subtle: #f8f7fc;
  --grid-line-inverse: rgba(167, 160, 255, 0.07);
}

/* Rose + Deep Teal — complementary pairing; fresh, growth, trust */
[data-palette='rose-teal'] {
  --surface-inverse: #0d2427;
  --surface-inverse-deep: #071517;
  --accent-2: #14a89a;
  --accent-2-rgb: 20, 168, 154;
  --color-surface-subtle: #f5f9f8;
  --grid-line-inverse: rgba(150, 255, 240, 0.06);
}

/* Rose + Plum & Amber — warm, editorial, premium */
[data-palette='rose-plum'] {
  --surface-inverse: #251321;
  --surface-inverse-deep: #150a13;
  --accent-2: #e9a23b;
  --accent-2-rgb: 233, 162, 59;
  --color-surface-subtle: #fbf8f6;
  --grid-line-inverse: rgba(255, 220, 200, 0.06);
}