/* ==========================================================================
   DESIGN TOKENS — SMKku Design System v1.0
   Single source of truth for color, typography, spacing, radius & elevation.
   Loaded before style.css (public) and admin.css (admin panel).

   WCAG AA notes:
   - ink on surface        : 14.8:1
   - muted (#5b6472)       :  6.3:1  (safe for small text)
   - primary-700 on white  :  7.4:1
   - accent-600 on white   :  4.8:1  (large text / UI components)
   - white on primary-700  :  7.4:1
   - white on accent-600   :  4.6:1  (AA for 14px bold+ / 18px+)
   ========================================================================== */

:root {
    /* ------------------------------------------------------------------
       1. BRAND / PRIMARY (School Navy Blue)
    ------------------------------------------------------------------ */
    --c-primary-50:  #eef4fb;
    --c-primary-100: #d8e6f5;
    --c-primary-200: #b3cde9;
    --c-primary-300: #7fadda;
    --c-primary-400: #4a8bc8;
    --c-primary-500: #2c6aab;
    --c-primary-600: #1f5590;   /* main brand — links, active nav */
    --c-primary-700: #17436f;   /* primary buttons, headings tint */
    --c-primary-800: #123255;
    --c-primary-900: #0d2440;   /* footer, dark sections */

    /* ------------------------------------------------------------------
       2. ACCENT (School Gold) — used sparingly: badges, highlights, CTA
    ------------------------------------------------------------------ */
    --c-accent-50:  #fdf8ed;
    --c-accent-100: #f9edcf;
    --c-accent-200: #f2dba4;
    --c-accent-300: #e8c271;
    --c-accent-400: #d9a94e;
    --c-accent-500: #c2923a;
    --c-accent-600: #a1762c;   /* accent buttons (white text AA) */
    --c-accent-700: #7d5a22;
    --c-accent-800: #5c4219;

    /* ------------------------------------------------------------------
       3. NEUTRALS (Slate)
    ------------------------------------------------------------------ */
    --c-neutral-0:   #ffffff;
    --c-neutral-50:  #f8fafc;
    --c-neutral-100: #f1f5f9;
    --c-neutral-200: #e2e8f0;
    --c-neutral-300: #cbd5e1;
    --c-neutral-400: #94a3b8;   /* disabled, decorative only */
    --c-neutral-500: #64748b;
    --c-neutral-600: #5b6472;   /* muted body text — 6.3:1 on white */
    --c-neutral-700: #3f4756;
    --c-neutral-800: #262d3b;
    --c-neutral-900: #141a26;   /* ink */

    /* ------------------------------------------------------------------
       4. SEMANTIC
    ------------------------------------------------------------------ */
    --c-success-50:  #ecfdf3;
    --c-success-100: #d1fae5;
    --c-success-600: #15803d;
    --c-success-700: #166534;

    --c-warning-50:  #fffbeb;
    --c-warning-100: #fef3c7;
    --c-warning-600: #b45309;
    --c-warning-700: #92400e;

    --c-danger-50:   #fef2f2;
    --c-danger-100:  #fee2e2;
    --c-danger-600:  #b91c1c;
    --c-danger-700:  #991b1b;

    --c-info-50:     #eff6ff;
    --c-info-100:    #dbeafe;
    --c-info-600:    #1d4ed8;
    --c-info-700:    #1e40af;

    /* ------------------------------------------------------------------
       5. TYPOGRAPHY — modular scale (1.25 ratio, base 16px)
    ------------------------------------------------------------------ */
    --font-sans:  'Poppins', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
    --font-admin: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono:  ui-monospace, 'Cascadia Mono', 'Consolas', monospace;

    --text-xs:   0.75rem;    /* 12px — captions, meta */
    --text-sm:   0.8125rem;  /* 13px — secondary body */
    --text-base: 0.9375rem;  /* 15px — body */
    --text-md:   1rem;       /* 16px — emphasis body  */
    --text-lg:   1.125rem;   /* 18px — card titles    */
    --text-xl:   1.375rem;   /* 22px — h3             */
    --text-2xl:  1.75rem;    /* 28px — h2             */
    --text-3xl:  2.125rem;   /* 34px — h1 / page title */
    --text-4xl:  clamp(2rem, 5vw, 3.25rem); /* hero */

    --leading-tight:  1.25;
    --leading-normal: 1.6;
    --leading-relaxed: 1.8;

    --tracking-wide: .04em;
    --tracking-caps: .12em;   /* uppercase eyebrow labels */

    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    /* ------------------------------------------------------------------
       6. SPACING — 4px base rhythm
    ------------------------------------------------------------------ */
    --space-1:  0.25rem;   /*  4px */
    --space-2:  0.5rem;    /*  8px */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.25rem;   /* 20px */
    --space-6:  1.5rem;    /* 24px */
    --space-8:  2rem;      /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */

    /* ------------------------------------------------------------------
       7. RADIUS
    ------------------------------------------------------------------ */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-full: 999px;

    /* ------------------------------------------------------------------
       8. ELEVATION
    ------------------------------------------------------------------ */
    --shadow-xs: 0 1px 2px rgba(20, 26, 38, .06);
    --shadow-sm: 0 2px 8px rgba(20, 26, 38, .07);
    --shadow-md: 0 8px 24px rgba(20, 26, 38, .09);
    --shadow-lg: 0 16px 40px rgba(20, 26, 38, .13);

    /* ------------------------------------------------------------------
       9. MOTION
    ------------------------------------------------------------------ */
    --ease-out: cubic-bezier(.22, .61, .36, 1);
    --duration-fast: 160ms;
    --duration-base: 240ms;

    /* ------------------------------------------------------------------
       10. LEGACY ALIASES — keep old variable names working everywhere
            (style.css "school" theme + admin.css "adm" theme)
    ------------------------------------------------------------------ */
    --school-navy:      var(--c-primary-900);
    --school-navy-2:    var(--c-primary-800);
    --school-gold:      var(--c-accent-600);
    --school-gold-dark: var(--c-accent-700);
    --school-cream:     var(--c-neutral-50);
    --school-text:      var(--c-neutral-800);
    --school-muted:     var(--c-neutral-600);
    --school-line:      var(--c-neutral-200);

    /* Focus ring — one accessible value everywhere */
    --focus-ring: 0 0 0 3px rgba(44, 106, 171, .35);
}

/* Light dark-mode hook (opt-in): set data-theme="dark" on <html>. */
:root[data-theme="dark"] {
    --c-neutral-0:   #0f1520;
    --c-neutral-50:  #131a28;
    --c-neutral-100: #1a2334;
    --c-neutral-200: #24304a;
    --c-neutral-300: #37455f;
    --c-neutral-400: #64748b;
    --c-neutral-500: #8b99ad;
    --c-neutral-600: #a3b0c2;
    --c-neutral-700: #c2cbd8;
    --c-neutral-800: #dbe2ec;
    --c-neutral-900: #f1f5f9;
}