/*
 * Onlenco unified design tokens.
 *
 * Phase 2 of the UI unification. This file is the SOURCE OF TRUTH for
 * every design value (colour, spacing, radius, shadow, typography,
 * motion, z-index) across the project. It loads BEFORE any other CSS
 * in base.html.
 *
 * Token naming follows two layers:
 *   1. RAW palette tokens   (--brand-teal-700, --space-3, ...)
 *      Stable across themes — never change shade per page.
 *   2. SEMANTIC tokens      (--primary, --background, --border, ...)
 *      Theme-aware — may swap when a dark mode / accent variant ships.
 *
 * Phase 2 is ADDITIVE. The existing per-file --primary / --background
 * declarations in onlenco.css are left in place; their values match
 * what we define here, so the cascade resolves to the same colours.
 * Phase 3 will collapse the duplicates and prune onlenco.css.
 *
 * Do NOT consume the --brand-* / --space-* tokens directly from page
 * CSS — go through the semantic layer (--primary, --space-3, etc.)
 * unless you have a brand-specific reason (gradients, marketing pages).
 */

:root {
  /* ============================================================
   * 1. RAW PALETTE — Brand + neutrals
   *    HSL triplets (no `hsl(...)` wrapper) so they compose with
   *    Tailwind's `hsl(var(--primary))` pattern.
   * ============================================================ */

  /* Figma Make palette compatibility aliases.
     The historical names stay in place because existing CSS consumes
     them; their values now map to the Onlenco blue/green system. */
  --brand-teal-50:  214 100% 97%;
  --brand-teal-100: 214 95% 93%;
  --brand-teal-200: 213 97% 87%;
  --brand-teal-300: 212 96% 78%;
  --brand-teal-400: 213 94% 68%;
  --brand-teal-500: 217 91% 60%;
  --brand-teal-600: 221 83% 53%;   /* #2563EB */
  --brand-teal-700: 224 76% 48%;
  --brand-teal-800: 226 71% 40%;
  --brand-teal-900: 224 64% 33%;

  --brand-amber-50:  151 81% 96%;
  --brand-amber-100: 149 80% 90%;
  --brand-amber-200: 152 76% 80%;
  --brand-amber-300: 156 72% 67%;
  --brand-amber-400: 158 64% 52%;
  --brand-amber-500: 160 84% 39%;  /* #10B981 */
  --brand-amber-600: 161 94% 30%;
  --brand-amber-700: 163 94% 24%;
  --brand-amber-800: 163 88% 20%;
  --brand-amber-900: 164 86% 16%;

  --warm-50:  210 40% 98%;         /* #F8FAFC */
  --warm-100: 210 40% 96%;         /* #F1F5F9 */
  --warm-200: 214 32% 91%;         /* #E2E8F0 */
  --warm-300: 213 27% 84%;
  --warm-400: 215 20% 65%;
  --warm-500: 215 16% 47%;         /* #64748B */
  --warm-600: 215 19% 35%;
  --warm-700: 215 25% 27%;
  --warm-800: 217 33% 17%;
  --warm-900: 222 47% 11%;         /* #0F172A */

  /* Status colours */
  --status-success-500: 160 84% 39%;
  --status-success-100: 152 76% 94%;
  --status-warning-500: 43 96% 56%;
  --status-warning-100: 48 96% 89%;
  --status-danger-500:  0 84% 60%;
  --status-danger-100:  0 86% 97%;
  --status-info-500:    217 91% 60%;
  --status-info-100:    214 100% 97%;


  /* ============================================================
   * 2. SEMANTIC COLOUR TOKENS
   *    These are the names page CSS and Tailwind utilities should
   *    reach for. Re-aliased to the raw palette above.
   *
   *    NOTE: values intentionally match what onlenco.css declares
   *    today, so adding this layer is a no-op visually. Phase 3
   *    will remove the duplicate :root in onlenco.css.
   * ============================================================ */

  --background:          var(--warm-50);
  --foreground:          var(--warm-900);

  --card:                0 0% 100%;
  --card-foreground:     var(--warm-900);
  --popover:             0 0% 100%;
  --popover-foreground:  var(--warm-900);

  --primary:             var(--brand-teal-600);
  --primary-foreground:  0 0% 100%;
  --primary-glow:        var(--brand-teal-400);

  --secondary:           var(--brand-amber-500);
  --secondary-foreground: 0 0% 100%;

  --muted:               var(--warm-200);
  --muted-foreground:    var(--warm-600);

  --accent:              43 96% 56%;
  --accent-foreground:   var(--warm-900);

  --destructive:         var(--status-danger-500);
  --destructive-foreground: 0 0% 100%;

  --success:             var(--status-success-500);
  --success-foreground:  0 0% 100%;

  --warning:             var(--status-warning-500);
  --warning-foreground:  var(--warm-900);

  --info:                var(--status-info-500);
  --info-foreground:     0 0% 100%;

  --border:              var(--warm-200);
  --input:               var(--warm-200);
  --ring:                var(--brand-teal-600);


  /* ============================================================
   * 3. SPACING — 4px base, Tailwind-compatible.
   *    Page CSS and components should reach for these by name so
   *    a single bump (e.g. tighten the whole UI) is one token edit.
   * ============================================================ */

  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;


  /* ============================================================
   * 4. RADII
   *    Matches `--radius` (= --radius-lg) so Tailwind's
   *    `rounded-{sm,md,lg}` keeps resolving.
   * ============================================================ */

  --radius-none: 0;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   12px;    /* = --radius */
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-pill: 9999px;
  --radius-full: 50%;

  --radius:      var(--radius-lg);    /* legacy alias */


  /* ============================================================
   * 5. TYPOGRAPHY
   *    7-step scale + weight + leading.
   * ============================================================ */

  --font-sans:    'Inter', 'Cairo', system-ui, sans-serif;
  --font-display: 'Inter', 'Cairo', system-ui, sans-serif;
  --font-arabic:  'Cairo', 'Inter', system-ui, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-lg:    18px;
  --text-xl:    20px;
  --text-2xl:   24px;
  --text-3xl:   30px;
  --text-4xl:   36px;
  --text-5xl:   48px;

  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;
  --font-extrabold: 800;

  --leading-none:    1;
  --leading-tight:   1.25;
  --leading-snug:    1.4;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.8;


  /* ============================================================
   * 6. SHADOW
   *    Tinted with the brand teal so shadows feel warm, not grey.
   * ============================================================ */

  --shadow-none: none;
  --shadow-xs:   0 1px 2px hsl(var(--warm-900) / .04);
  --shadow-sm:   0 1px 3px hsl(var(--warm-900) / .06), 0 1px 2px hsl(var(--warm-900) / .04);
  --shadow-md:   0 4px 14px -8px hsl(var(--warm-900) / .16);
  --shadow-lg:   0 20px 40px -24px hsl(var(--brand-teal-600) / .35);
  --shadow-xl:   0 28px 60px -28px hsl(var(--brand-teal-600) / .35);
  --shadow-2xl:  0 35px 80px -32px hsl(var(--warm-900) / .38);

  /* Legacy aliases — existing onlenco.css names. */
  --shadow-soft:    var(--shadow-md);
  --shadow-elegant: var(--shadow-lg);
  --shadow-accent-glow: 0 0 60px hsl(var(--secondary) / .35);
  --shadow-glow:        var(--shadow-accent-glow);


  /* ============================================================
   * 7. GRADIENTS
   *    Brand expressions. Centralised so admin/teacher pages can
   *    reach for them too instead of inventing their own.
   * ============================================================ */

  --gradient-hero:   linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--secondary)) 100%);
  --gradient-primary: var(--gradient-hero);
  --gradient-sunset: linear-gradient(135deg, hsl(var(--accent)) 0%, hsl(38 92% 50%) 100%);
  --gradient-soft:   linear-gradient(135deg, hsl(var(--brand-teal-50)) 0%, hsl(var(--brand-amber-50)) 100%);
  --gradient-card:   linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(var(--warm-50)) 100%);
  --gradient-text:   linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)));


  /* ============================================================
   * 8. MOTION
   *    All timed transitions should reference a duration token so
   *    a "make the UI feel snappier" change is one variable.
   * ============================================================ */

  --ease-out:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-instant: 80ms;
  --duration-fast:    120ms;
  --duration-base:    200ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;

  --transition-smooth: var(--ease-out);   /* legacy alias */


  /* ============================================================
   * 9. Z-INDEX SCALE
   * ============================================================ */

  --z-base:     0;
  --z-elevated: 10;
  --z-sticky:   100;
  --z-overlay:  500;
  --z-modal:    1000;
  --z-popover:  1500;
  --z-toast:    2000;
  --z-tooltip:  2500;


  /* ============================================================
   * 10. LAYOUT
   * ============================================================ */

  --container-narrow: 640px;
  --container-base:   1024px;
  --container-wide:   1280px;
  --container-max:    1440px;

  --header-height:     64px;
  --sidebar-width:     260px;
  --sidebar-collapsed: 72px;
}


/* ============================================================
 * DARK THEME — opt-in via <html data-theme="dark"> or class="dark".
 * Stubbed now so Phase 10's dark-mode toggle has hooks. Not wired
 * to a UI control yet; activating it is a one-line attribute change.
 * ============================================================ */

[data-theme="dark"],
.dark {
  --background:         var(--brand-teal-900);
  --foreground:         var(--warm-100);

  --card:               178 40% 12%;
  --card-foreground:    var(--warm-100);
  --popover:            178 40% 14%;
  --popover-foreground: var(--warm-100);

  --primary:            var(--brand-teal-300);
  --primary-foreground: var(--brand-teal-900);

  --muted:              178 25% 18%;
  --muted-foreground:   178 15% 65%;

  --border:             178 25% 22%;
  --input:              178 25% 22%;
}