/* ==========================================================================
   Edunauts colour system — the one palette every product uses
   ==========================================================================
   Source: the Edunauts brand colour sheet (2026-09) — Brand, Gradients,
   Semantic, Neutral, Tints, Surface, Functional and Data-visualisation colours.

   Imported by:
     - @edunauts/ui tokens.css → EnID console (apps/enid-web)
     - apps/eno-web and apps/eno-admin (globals.css, before Tailwind)
     - the Edunauts WordPress theme, as a byte-for-byte copy at
       infrastructure/docker/wordpress-theme/edunauts/assets/css/palette.css
       (PHP cannot import from the monorepo; palette-sync.test.ts in
       apps/enid-web fails the build if the two ever differ)

   Why a wider palette. Everything used to be navy or gold. With two colours,
   a link, a selected tab, a primary button, a heading and an "information"
   badge all looked alike, and the eye could not tell what was clickable from
   what was merely emphasised. The rule now:

     navy   — identity and primary actions (buttons, headings, the sidebar)
     blue   — interaction (links, focus, selection, "info")
     gold   — "you are here" and highlights; never an action colour
     green / amber / red — state only (success, needs attention, failed)
     purple — special or premium; teal — growth, learning, analytics

   Names are prefixed `--en-` so they never collide with a product's own
   variables or with Tailwind's.
   ========================================================================== */

:root {
  /* ── 01 · Brand ──────────────────────────────────────────────────────── */
  /* Primary — Navy #001F3F */
  --en-navy-50: #f0f5fa;
  --en-navy-100: #dce7f3;
  --en-navy-200: #b9cfe6;
  --en-navy-300: #8cafd4;
  --en-navy-400: #5a89bd;
  --en-navy-500: #3667a0;
  --en-navy-600: #1e4c80;
  --en-navy-700: #123a66;
  --en-navy-800: #0a2b50;
  --en-navy-900: #001f3f;
  --en-navy-950: #00132a;

  /* Secondary — Blue #1D2F5D */
  --en-blue-50: #eef2ff;
  --en-blue-100: #dce3f5;
  --en-blue-200: #bac7ea;
  --en-blue-300: #8fa3d8;
  --en-blue-400: #6480c2;
  --en-blue-500: #4563a8;
  --en-blue-600: #334d8a;
  --en-blue-700: #283e72;
  --en-blue-800: #1d2f5d;
  --en-blue-900: #152245;

  /* Accent — Gold #F2C94C */
  --en-gold-50: #fffbeb;
  --en-gold-100: #fef3c7;
  --en-gold-200: #fce7a1;
  --en-gold-300: #f9da7a;
  --en-gold-400: #f2c94c;
  --en-gold-500: #e0b43a;
  --en-gold-600: #c4962a;
  --en-gold-700: #9c7a1e;
  --en-gold-800: #7a5e17;
  --en-gold-900: #5c4611;

  --en-navy: var(--en-navy-900);
  --en-blue: var(--en-blue-800);
  --en-gold: var(--en-gold-400);
  /* Gold as TEXT on white needs darkening to pass WCAG AA; the bright gold is
     for fills, icons and large type. */
  --en-gold-text: var(--en-gold-700);

  /* ── 03 · Semantic ───────────────────────────────────────────────────── */
  /* Success #16A34A — completed actions, positive status */
  --en-success-50: #f0fdf4;
  --en-success-100: #dcfce7;
  --en-success-200: #bbf7d0;
  --en-success-300: #86efac;
  --en-success-400: #4ade80;
  --en-success-500: #22c55e;
  --en-success-600: #16a34a;
  --en-success-700: #15803d;
  --en-success-800: #166534;

  /* Warning #D97706 — cautions, attention needed, pending actions */
  --en-warning-50: #fffbeb;
  --en-warning-100: #fef3c7;
  --en-warning-200: #fde68a;
  --en-warning-300: #fcd34d;
  --en-warning-400: #fbbf24;
  --en-warning-500: #f59e0b;
  --en-warning-600: #d97706;
  --en-warning-700: #b45309;
  --en-warning-800: #92400e;

  /* Error / Danger #DC2626 — errors, destructive actions, security risks */
  --en-danger-50: #fef2f2;
  --en-danger-100: #fee2e2;
  --en-danger-200: #fecaca;
  --en-danger-300: #fca5a5;
  --en-danger-400: #f87171;
  --en-danger-500: #ef4444;
  --en-danger-600: #dc2626;
  --en-danger-700: #b91c1c;
  --en-danger-800: #991b1b;
  --en-danger-900: #7f1d1d;

  /* Info #2563EB — informational messages, updates, guidance */
  --en-info-50: #eff6ff;
  --en-info-100: #dbeafe;
  --en-info-200: #bfdbfe;
  --en-info-300: #93c5fd;
  --en-info-400: #60a5fa;
  --en-info-500: #3b82f6;
  --en-info-600: #2563eb;
  --en-info-700: #1d4ed8;
  --en-info-800: #1e40af;
  --en-info-900: #1e3a8a;

  /* Purple #7C3AED — special features, highlights, premium */
  --en-purple-50: #f5f3ff;
  --en-purple-100: #ede9fe;
  --en-purple-200: #ddd6fe;
  --en-purple-300: #c4b5fd;
  --en-purple-400: #a78bfa;
  --en-purple-500: #8b5cf6;
  --en-purple-600: #7c3aed;
  --en-purple-700: #6d28d9;
  --en-purple-800: #5b21b6;
  --en-purple-900: #4c1d95;

  /* Teal #14B8A6 — growth, learning, analytics */
  --en-teal-50: #f0fdfa;
  --en-teal-100: #ccfbf1;
  --en-teal-200: #99f6e4;
  --en-teal-300: #5eead4;
  --en-teal-400: #2dd4bf;
  --en-teal-500: #14b8a6;
  --en-teal-600: #0d9488;
  --en-teal-700: #0f766e;
  --en-teal-800: #115e59;

  --en-success: var(--en-success-600);
  --en-warning: var(--en-warning-600);
  --en-danger: var(--en-danger-600);
  --en-info: var(--en-info-600);
  --en-purple: var(--en-purple-600);
  --en-teal: var(--en-teal-500);

  /* ── 04 · Neutral ────────────────────────────────────────────────────── */
  --en-neutral-0: #ffffff;
  --en-neutral-50: #f8fafc;
  --en-neutral-100: #f1f5f9;
  --en-neutral-200: #e2e8f0;
  --en-neutral-300: #cbd5e1;
  --en-neutral-400: #94a3b8;
  --en-neutral-500: #64748b;
  --en-neutral-600: #475569;
  --en-neutral-700: #334155;
  --en-neutral-800: #1e293b;
  --en-neutral-900: #0f172a;
  --en-neutral-950: #020617;

  /* ── 05 · Tints for backgrounds ──────────────────────────────────────── */
  --en-tint-navy: #f0f5fa;
  --en-tint-blue: #eef2ff;
  --en-tint-gold: #fffbeb;
  --en-tint-teal: #ecfdf5;
  --en-tint-purple: #f5f3ff;

  /* ── 06 · Surfaces ───────────────────────────────────────────────────── */
  --en-surface-bg: #ffffff;
  --en-surface: #f8fafc;
  --en-surface-alt: #f1f5f9;
  --en-surface-muted: #f8fafc;
  --en-overlay: #0f172a;

  /* ── 07 · Functional (UI states) ─────────────────────────────────────── */
  --en-link: #2563eb;
  --en-link-hover: #1d4ed8;
  --en-active: #001f3f;
  --en-disabled: #cbd5e1;
  --en-border: #e2e8f0;
  --en-focus-ring: #3b82f6;

  /* ── 08 · Data visualisation — in this order, so series stay distinct ── */
  --en-chart-1: #001f3f;
  --en-chart-2: #2563eb;
  --en-chart-3: #14b8a6;
  --en-chart-4: #f2c94c;
  --en-chart-5: #f59e0b;
  --en-chart-6: #dc2626;
  --en-chart-7: #7c3aed;
  --en-chart-8: #ec4899;
  --en-chart-9: #10b981;
  --en-chart-10: #6366f1;

  /* ── 02 · Brand gradients — hero sections, illustrations, feature cards ── */
  --en-gradient-navy-blue: linear-gradient(135deg, #001f3f 0%, #1d2f5d 45%, #2563eb 100%);
  --en-gradient-blue-gold: linear-gradient(135deg, #1d2f5d 0%, #4563a8 45%, #f2c94c 100%);
  --en-gradient-navy-gold: linear-gradient(135deg, #001f3f 0%, #1d2f5d 50%, #f2c94c 100%);
  --en-gradient-teal-blue: linear-gradient(135deg, #14b8a6 0%, #2563eb 100%);
}