/* Design tokens — canonical source. Copy to wp-content/themes/astra-child/assets/css/design-tokens.css on deploy. */

:root {
  /* Brand colours — all OKLCH */
  --color-primary: oklch(0.453 0.213 264);
  --color-primary-dark: oklch(0.373 0.213 264);
  --color-accent: oklch(0.703 0.177 47);
  --color-accent-dark: oklch(0.573 0.177 47);
  --color-background: oklch(0.981 0.004 95);
  --color-surface: oklch(0.995 0.002 264);
  --color-surface-warm: oklch(0.974 0.015 80);
  --color-foreground: oklch(0.129 0.025 264);
  --color-text: oklch(0.164 0.022 264);
  --color-text-muted: oklch(0.521 0.013 264);
  --color-border: oklch(0.912 0.008 264);

  /* Level accent colours */
  --color-level-beginner: oklch(0.599 0.183 264);
  --color-level-intermediate: oklch(0.703 0.177 47);
  --color-level-advanced: oklch(0.531 0.196 293);
  --color-level-live: oklch(0.696 0.158 162);

  /* Typography */
  --font-display: 'Manrope', sans-serif;
  --font-body: 'Nunito Sans', sans-serif;
  --font-arabic: 'Noto Sans Arabic', sans-serif;
  /* Legacy aliases used by components — resolve to new fonts */
  --font-jakarta: var(--font-display);
  --font-inter: var(--font-body);

  /* Shape */
  --radius-card: 16px;
  --radius-button: 12px;

  /* Shadows */
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-elevated: 0 12px 40px rgba(0, 0, 0, 0.14);

  /* Motion */
  /* --transition-spring: celebratory only (success states, reward moments).
     NEVER use for navigation, dropdowns, drawers, modals, or any UI element
     the user triggers frequently. Bounce easing on repeated actions is jarring. */
  --transition-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-ease: cubic-bezier(0.23, 1, 0.32, 1);
}