@charset "UTF-8";
/**
 * Design Tokens — 008-math
 * Primary:  #4f46e5  (indigo — authoritative, premium math)
 * Accent:   #22c55e  (fresh green — success, energy)
 * Theme:    Royal cobalt blue + fresh lime green
 * Feel:     Khan Academy × Apple — professional, bright, trustworthy
 */

:root {
  /* ── Primary (Indigo) ── */
  --site-primary:        #4f46e5;
  --site-primary-hover:  #4338ca;
  --site-primary-dark:   #312e81;
  --site-primary-light:  #eef2ff;
  --site-primary-border: #c7d2fe;

  /* ── Accent (Fresh Green) ── */
  --site-accent:         #22c55e;
  --site-accent-hover:   #16a34a;
  --site-accent-dark:    #15803d;
  --site-accent-light:   #f0fdf4;
  --site-accent-border:  #bbf7d0;

  /* ── Text ── */
  --site-text:           #111827;
  --site-text-muted:     #6b7280;
  --site-text-light:     #4b5563;

  /* ── Background & Surfaces ── */
  --site-background:     #ffffff;
  --site-surface:        #f5f3ff;
  --site-surface-alt:    #f0fdf4;

  /* ── Borders ── */
  --site-border:         #e5e7eb;
  --site-border-dark:    #d1d5db;

  /* ── Semantic Colors ── */
  --color-success:       #22c55e;
  --color-success-bg:    #f0fdf4;
  --color-success-border:#bbf7d0;
  --color-success-text:  #166534;
  --color-error:         #ef4444;
  --color-error-bg:      #fef2f2;
  --color-error-border:  #fecaca;
  --color-error-text:    #991b1b;
  --color-warning:       #f59e0b;
  --color-warning-bg:    #fffbeb;
  --color-warning-border:#fde68a;
  --color-warning-text:  #92400e;

  /* ── Typography ── */
  --font-heading: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'Courier New', 'Consolas', 'Monaco', monospace;

  /* ── Type Scale ── */
  --text-xs:   0.75rem;   /* 12px — captions */
  --text-sm:   0.875rem;  /* 14px — labels */
  --text-base: 1rem;      /* 16px — body */
  --text-lg:   1.125rem;  /* 18px — emphasized body */
  --text-xl:   1.25rem;   /* 20px — subheadings */
  --text-2xl:  1.5rem;    /* 24px — section heads */
  --text-3xl:  2rem;      /* 32px — page heads */
  --text-4xl:  2.5rem;    /* 40px — hero */

  /* ── Border Radius (Soft personality) ── */
  --radius-xs:     4px;
  --radius-sm:     6px;
  --radius-md:     10px;
  --radius-lg:     14px;
  --radius-xl:     20px;
  --radius-pill:   9999px;
  --radius-button: 12px;
  --radius-card:   14px;
  --detail-border-radius: 14px;

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

  /* ── Shadows (Indigo-tinted) ── */
  --shadow-sm:    0 1px 3px rgba(79, 70, 229, 0.06);
  --shadow-md:    0 4px 12px rgba(79, 70, 229, 0.10);
  --shadow-lg:    0 10px 28px rgba(79, 70, 229, 0.14);
  --shadow-xl:    0 20px 40px rgba(79, 70, 229, 0.18);
  --shadow-brand: 0 6px 20px rgba(79, 70, 229, 0.25);
  --shadow-green: 0 4px 14px rgba(34, 197, 94, 0.20);

  /* ── Transitions ── */
  --dur-fast:    150ms;
  --dur-normal:  250ms;
  --dur-slow:    400ms;
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce:  cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --transition:   250ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Premium Gradient System ── */
  --gradient-brand:    linear-gradient(135deg, #4f46e5 0%, #312e81 100%);
  --gradient-accent:   linear-gradient(135deg, #22c55e 0%, #15803d 100%);
  --gradient-hero:     linear-gradient(160deg, #eef2ff 0%, #ffffff 50%, #f0fdf4 100%);
  --gradient-surface:  linear-gradient(135deg, #f5f3ff 0%, #eef2ff 100%);
  --gradient-card-top: linear-gradient(90deg, #4f46e5, #22c55e);

  /* ── Detail Page Variant Tokens ── */
  --detail-bg-gradient-start: #f5f3ff;
  --detail-bg-gradient-end:   #eef2ff;
  --detail-card-shadow:       0 2px 8px rgba(79, 70, 229, 0.08);
  --detail-card-shadow-hover: 0 10px 28px rgba(79, 70, 229, 0.16);
  --detail-theme-primary:     var(--site-primary, #4f46e5);
  --detail-theme-secondary:   var(--site-primary-hover, #4338ca);
  --detail-theme-soft:        var(--site-primary-light, #eef2ff);
  --detail-theme-border:      var(--site-primary-border, #c7d2fe);

  /* ── Z-index Scale ── */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
}