:root {
  /* --------------------------------- brand (from IGNITE LMS / lms.ignitesol.net)
     Primary is the product teal #017B92 on white. The supporting scale is the
     same one the LMS landing page uses: deep #005E78, mid #0A7B99, light #18C3D6. */
  --brand-teal: #017B92;
  --brand-teal-deep: #005E78;
  --brand-teal-mid: #0A7B99;
  --brand-teal-light: #18C3D6;
  --brand-ink: #003E4F;

  /* Kept so existing component rules keep working. */
  --brand-navy: #003E4F;
  --brand-orange: #017B92;
  --brand-amber: #18C3D6;
  --brand-ember: #005E78;

  --grad-from: #005E78;
  --grad-to: #18C3D6;
  --grad-brand: linear-gradient(120deg, #005E78 0%, #017B92 55%, #18C3D6 120%);
  --color-on-brand: #ffffff;

  --grad-text-from: #005E78;
  --grad-text-to: #017B92;

  /* ---------------------------------------------- light theme (the default) */
  --color-bg: #ffffff;
  --color-bg-alt: #f5fafc;
  --color-surface: #ffffff;
  --color-surface-alt: #f7fbfc;
  --color-border: #e3eef2;
  --color-border-strong: #c5d8df;
  --color-text: #0f172a;
  --color-text-muted: #475569;
  --color-text-subtle: #7e93a0;

  /* #017B92 is ~4.95:1 on white — AA for body text and links. */
  --color-accent: #017B92;
  --color-accent-soft: rgba(1, 123, 146, 0.1);
  --color-accent-border: rgba(1, 123, 146, 0.28);

  --color-header-bg: rgba(255, 255, 255, 0.88);
  --color-overlay: rgba(255, 255, 255, 0.98);
  --color-input-bg: #ffffff;

  --shadow-sm: 0 4px 16px rgba(0, 62, 79, 0.06);
  --shadow-md: 0 6px 20px rgba(0, 62, 79, 0.08);
  --shadow-lg: 0 18px 48px -18px rgba(0, 62, 79, 0.22);
  --shadow-brand: 0 10px 28px rgba(1, 123, 146, 0.28);

  --mesh-a: rgba(24, 195, 214, 0.18);
  --mesh-b: rgba(0, 94, 120, 0.12);

  --color-invert-bg: #003E4F;
  --color-invert-text: #ffffff;
  --color-invert-muted: #9bb8c2;
  --color-invert-border: rgba(255, 255, 255, 0.12);

  /* ------------------------------------------------------------ typography */
  --font-family: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.375rem;
  --font-size-5xl: 3.25rem;

  /* --------------------------------------------------------------- spacing */
  --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;
  --space-24: 6rem;

  /* ---------------------------------------------------------------- layout */
  --container-max: 1200px;
  --header-height: 76px;
  --section-blend-size: clamp(5rem, 9vw, 8.5rem);
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --transition-fast: 150ms var(--ease-out);
  --transition-base: 280ms var(--ease-out);
}

/* Dark theme stays in the same teal family as the LMS --dark token. */
[data-theme="dark"] {
  --color-bg: #02161c;
  --color-bg-alt: #032028;
  --color-surface: #06303a;
  --color-surface-alt: #0a3b47;
  --color-border: rgba(255, 255, 255, 0.09);
  --color-border-strong: rgba(24, 195, 214, 0.32);
  --color-text: #f4fafc;
  --color-text-muted: #a8c0c8;
  --color-text-subtle: #7e93a0;

  --color-accent: #5ed4e3;
  --color-accent-soft: rgba(24, 195, 214, 0.14);
  --color-accent-border: rgba(24, 195, 214, 0.34);

  --grad-text-from: #7ee0eb;
  --grad-text-to: #18C3D6;

  --color-header-bg: rgba(2, 22, 28, 0.88);
  --color-overlay: rgba(2, 22, 28, 0.97);
  --color-input-bg: rgba(255, 255, 255, 0.04);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.55);
  --shadow-brand: 0 10px 28px rgba(1, 123, 146, 0.4);

  --mesh-a: rgba(24, 195, 214, 0.2);
  --mesh-b: rgba(0, 94, 120, 0.36);

  --color-invert-bg: #06303a;
  --color-invert-text: #f4fafc;
  --color-invert-muted: #a8c0c8;
  --color-invert-border: rgba(255, 255, 255, 0.12);
}