/* ==========================================================================
   DESIGN TOKENS — v6 "Violet"
   Besqala Academy — design system

   DIRECTION CHANGE FROM v5: the product owner supplied a full set of
   finished HTML/CSS reference mockups directly (index, dashboard,
   teacher-dashboard, courses, course-detail, learning, checkout, plus
   a granular-permissions set) — a violet (#7950F2) primary on a clean
   white/light-grey canvas, Inter as the ONLY typeface (no separate
   display face), generous rounded corners (8–24px), soft shadows.
   Every one of those reference files defines the identical :root
   block, which is unusually strong signal: this is followed exactly,
   not reinterpreted, the way earlier passes reinterpreted a named
   template as inspiration. The navy/teal brand and the Poppins/
   Fraunces display pairing from v4/v5 are retired here — this
   *replaces* the brand palette, it doesn't sit alongside it.

   One thing the reference mockups do NOT define: a dark mode. None of
   the 8 files reference data-theme or prefers-color-scheme. The
   product's theme toggle (light/dark, persisted per user) is real,
   working functionality that predates this redesign, so rather than
   silently deleting it, a dark variant is extended here from the same
   violet primary — same relationship between colors, dark canvas.
   Flagged clearly wherever it appears below since it's the one part
   of this file with no reference source.
   ========================================================================== */

:root {
  /* ============================================================
     BASE PALETTE — violet primary (anchor: #7950F2, from every
     reference file's :root, unchanged).
     ============================================================ */
  --violet-900: #5F3DC4;   /* primary-dark */
  --violet-700: #6741D9;   /* primary-hover */
  --violet-500: #7950F2;   /* primary */
  --violet-200: #E5DBFF;   /* primary-light */
  --violet-100: #F3F0FF;   /* primary-soft */

  /* Neutrals — the reference's --background/--surface/--surface-soft/
     --border/--text* scale, unchanged. */
  --neutral-0:   #FFFFFF;  /* surface */
  --neutral-50:  #F8F9FA;  /* background */
  --neutral-100: #F1F3F5;  /* surface-soft */
  --neutral-200: #DEE2E6;  /* border */
  --neutral-400: #868E96;  /* text-muted */
  --neutral-600: #495057;  /* text-secondary */
  --neutral-900: #212529;  /* text */

  /* Status colors — straight from admin-dashboard.html / dashboard.html,
     the two reference files with the fullest status set. This is also
     literally Mantine/Tabler's default palette (the reference mockups
     were evidently built against those tokens) — kept as flat single
     values rather than invented 5-step scales, since the source never
     defines more than one shade per status. */
  --success-500: #40C057;
  --success-50:  #EBFBEE;
  --warning-500: #FAB005;
  --warning-50:  #FFF3E0;
  --danger-500:  #FA5252;
  --danger-50:   #FBEDEC;
  --info-500:    #339AF0;
  --info-50:     #E7F5FF;

  /* Extended hue set — not in the reference :root blocks, but used
     inline in index.html's own JS for category-card color variety
     (indigo/blue/purple/violet/teal/orange/pink/red), and needed by
     admin-tokens.css's 6-color stat-icon system (teal, orange). Kept
     as flat single values like the status colors above, same source. */
  --teal:   #12B886;
  --orange: #FD7E14;
  --indigo: #4C6EF5;
  --pink:   #E64980;

  /* "-600" darker-step aliases some component files still reference
     (a couple of pages use e.g. --violet-600 for on-light-surface
     text, one step darker than the base --violet-500). */
  --violet-600: var(--violet-700);
  --warning-600: var(--warning-500);
  --danger-600: var(--danger-500);

  /* ============================================================
     TYPOGRAPHY
     One family, Inter, for everything — the reference mockups never
     load a second face. Headings are Inter at heavier weights
     (700/800) with tight letter-spacing, not a separate display font.
     ============================================================ */
  --font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  --fs-display: 3rem;      --lh-display: 1.1;   --ls-display: -0.04em;  --fw-display: 800;
  --fs-h1: 2.25rem;        --lh-h1: 1.15;       --ls-h1: -0.02em;       --fw-h1: 800;
  --fs-h2: 1.75rem;        --lh-h2: 1.2;        --ls-h2: -0.02em;       --fw-h2: 700;
  --fs-h3: 1.375rem;       --lh-h3: 1.25;       --ls-h3: -0.01em;       --fw-h3: 700;
  --fs-h4: 1.125rem;       --lh-h4: 1.3;        --ls-h4: 0em;           --fw-h4: 600;
  --fs-body-lg: 1.125rem;  --lh-body-lg: 1.6;   --ls-body-lg: 0;        --fw-body-lg: 400;
  --fs-body: 1rem;         --lh-body: 1.6;      --ls-body: 0;           --fw-body: 400;
  --fs-body-sm: 0.875rem;  --lh-body-sm: 1.55;  --ls-body-sm: 0;        --fw-body-sm: 400;
  --fs-caption: 0.8125rem; --lh-caption: 1.5;   --ls-caption: 0;        --fw-caption: 400;
  --fs-label: 0.8125rem;   --lh-label: 1.4;     --ls-label: 0.01em;     --fw-label: 600;
  --fs-overline: 0.75rem;  --lh-overline: 1.4;  --ls-overline: 0.05em;  --fw-overline: 700;

  --text-xs: var(--fs-caption);
  --text-sm: var(--fs-body-sm);
  --text-base: var(--fs-body);
  --text-md: var(--fs-body-lg);
  --text-lg: var(--fs-h4);
  --text-xl: var(--fs-h3);
  --text-2xl: var(--fs-h2);
  --text-3xl: var(--fs-h1);
  --text-4xl: var(--fs-display);

  /* ============================================================
     SPACING — unchanged; the reference mockups use ad-hoc px spacing
     that already lines up closely with this scale.
     ============================================================ */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  --space-1: var(--sp-1);  --space-2: var(--sp-2);  --space-3: var(--sp-3);
  --space-4: var(--sp-4);  --space-5: var(--sp-6);  --space-6: var(--sp-8);
  --space-7: var(--sp-12); --space-8: var(--sp-16); --space-9: 96px; --space-10: 128px;

  /* ============================================================
     CONTROL GEOMETRY — buttons/inputs. The reference mockups don't
     separate "control radius" from "surface radius" the way v3–v5
     did; buttons and inputs just use --radius-md (12px) directly.
     Mirrored here as its own token so the rest of this file's
     structure (and every file consuming --control-radius) still
     works without a rewrite.
     ============================================================ */
  --control-radius: 12px;
  --control-radius-sm: 8px;

  --control-pad-y: 10px;
  --control-pad-x: 20px;
  --control-font: 14px;

  --control-pad-y-sm: 8px;
  --control-pad-x-sm: 14px;
  --control-font-sm: 13px;

  --control-pad-y-lg: 14px;
  --control-pad-x-lg: 28px;
  --control-font-lg: 16px;

  --control-icon-size: 36px;

  --field-pad-y: 12px;
  --field-pad-x: 16px;
  --field-font: 14px;

  /* ============================================================
     BREAKPOINTS — unchanged.
     ============================================================ */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* ============================================================
     RADIUS — straight from the reference :root blocks.
     ============================================================ */
  --radius-xs: 6px;  --radius-sm: 8px;  --radius-md: 12px;
  --radius-lg: 20px; --radius-xl: 24px;  --radius-full: 999px;

  /* ============================================================
     SHADOWS — the reference uses near-neutral shadows for cards
     (rgba(0,0,0,0.02–0.08)) and a violet-TINTED shadow specifically
     for the primary button/CTA (rgba(121,80,242,0.25–0.35)) — kept
     as that same split rather than tinting everything violet.
     ============================================================ */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 12px 24px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.08);

  /* Violet "glow" shadow — primary buttons and the hero/preview card
     only, per the reference (box-shadow: 0 4px 14px rgba(121,80,242,.25)). */
  --shadow-primary: 0 4px 14px rgba(121, 80, 242, 0.25);
  --shadow-primary-hover: 0 6px 20px rgba(121, 80, 242, 0.35);

  --focus-ring: 0 0 0 4px var(--violet-100);

  /* ---- Reference-mockup-named aliases ----
     landing.css (and any future page ported directly from the
     reference HTML/CSS the product owner supplied) uses the mockups'
     OWN variable names (--primary, --background, --surface, --text,
     --border, --success, etc.) verbatim rather than translating them
     to this file's --brand-primary/--bg-page/--text-primary naming —
     the fastest, least error-prone way to port a literal mockup
     faithfully. Both naming schemes point at the same underlying
     values, so every file can use whichever reads more naturally for
     it without drifting out of sync. */
  --primary: var(--violet-500);
  --primary-hover: var(--violet-700);
  --primary-dark: var(--violet-900);
  --primary-light: var(--violet-200);
  --primary-soft: var(--violet-100);
  --background: var(--neutral-50);
  --surface: var(--neutral-0);
  --surface-soft: var(--neutral-100);
  --text: var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-muted: var(--neutral-400);
  --border: var(--neutral-200);
  --success: var(--success-500);
  --warning: var(--warning-500);
  --danger: var(--danger-500);
  --info: var(--info-500);

  /* Finer-grained violet "glow" shadow steps some ported pages use
     (small/medium/large), on top of the base --shadow-primary pair. */
  --shadow-primary-sm: var(--shadow-primary);
  --shadow-primary-md: var(--shadow-primary-hover);
  --shadow-primary-lg: 0 24px 48px rgba(121, 80, 242, 0.18);

  /* HSL-triple shadow tint (not a CSS color on its own — used as
     hsl(var(--shadow-color) / alpha) by glass.css) for surfaces that
     want a tinted shadow rather than the flat rgba(0,0,0,x) in
     --shadow-xs/sm/md/lg above. Violet-tinted now, same idea as the
     old navy-tinted version. */
  --shadow-color: 258deg 60% 30%;

  /* ============================================================
     MOTION — unchanged.
     ============================================================ */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms; --dur-base: 200ms; --dur-slow: 400ms;

  /* ============================================================
     SEMANTIC TOKENS — LIGHT MODE (the reference design; this is the
     product's actual default, not a "light theme option").
     ============================================================ */
  --bg-page: var(--neutral-50);
  --bg-surface: var(--neutral-0);
  --bg-surface-raised: var(--neutral-0);
  --bg-surface-hover: var(--neutral-100);
  --bg-inverse: var(--neutral-900);
  --bg-accent-tint: var(--violet-100);

  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-muted: var(--neutral-400);
  --text-faint: var(--neutral-400);
  --text-on-inverse: var(--neutral-50);
  --text-on-inverse-muted: var(--neutral-200);

  --border-default: var(--neutral-200);
  --border-strong: #C7CDD3;

  --brand-primary: var(--violet-500);
  --brand-primary-hover: var(--violet-700);
  --brand-primary-active: var(--violet-900);
  --brand-primary-soft: var(--violet-100);
  --brand-on-primary: var(--neutral-0);

  --accent: var(--violet-500);
  --accent-strong: var(--violet-700);
  --accent-soft: var(--violet-100);
  --accent-on: var(--neutral-0);

  /* Achievement accent — not part of the reference mockups (they have
     no certificate/streak UI), kept as its own token so
     admin-components.css's existing gold stat-card variant still
     resolves. Mapped onto the warning/amber hue rather than inventing
     an unreferenced gold. */
  --achievement: var(--warning-500);
  --achievement-strong: #E8A100;
  --achievement-soft: var(--warning-50);
  --achievement-on: var(--neutral-900);

  --success: var(--success-500);
  --success-soft: var(--success-50);
  --warning: var(--warning-500);
  --warning-soft: var(--warning-50);
  --danger: var(--danger-500);
  --danger-soft: var(--danger-50);
  --info: var(--info-500);
  --info-soft: var(--info-50);

  /* ---- Compatibility aliases (older files not yet ported to the
     v6 palette directly still reference these names) ---- */
  --ink-950: var(--neutral-900);
  --ink-700: var(--neutral-600);
  --ink-200: var(--neutral-200);
  --cove-600: var(--info-500);
  --cove-500: var(--info-500);
  --cove-400: var(--info-500);
  --cove-100: var(--info-50);
  --green-600: var(--success-500);
  --green-500: var(--success-500);
  --green-400: var(--success-500);
  --green-100: var(--success-50);
  --signal-600: var(--warning-500);
  --signal-500: var(--warning-500);
  --signal-400: var(--warning-500);
  --signal-100: var(--warning-50);
  --clay-600: var(--danger-500);
  --clay-500: var(--danger-500);
  --clay-100: var(--danger-50);
  --ivory-100: var(--violet-100);
  --ivory-50: var(--violet-100);
  --ivory-900: var(--violet-900);
  --slate-900: var(--neutral-900);
  --slate-700: var(--neutral-600);
  --slate-500: var(--neutral-600);
  --slate-300: var(--neutral-400);
  --slate-100: var(--neutral-200);
  --accent-signal: var(--warning-500);
  --accent-cove: var(--info-500);
  --accent-green: var(--success-500);
  --accent-clay: var(--danger-500);
  --accent-ivory: var(--violet-100);
}

/* ============================================================
   SEMANTIC TOKENS — DARK MODE
   Not in any reference file — extended here so the product's
   existing theme toggle keeps working, using the same violet primary
   against a dark canvas instead of inventing an unrelated dark
   palette.
   ============================================================ */
[data-theme="dark"] {
  --bg-page: #16171D;
  --bg-surface: #1E1F27;
  --bg-surface-raised: #262832;
  --bg-surface-hover: #262832;
  --bg-inverse: var(--neutral-50);
  --bg-accent-tint: #2C2640;

  --text-primary: #F1F1F4;
  --text-secondary: #B8B9C4;
  --text-muted: #82838F;
  --text-faint: #82838F;
  --text-on-inverse: var(--neutral-900);
  --text-on-inverse-muted: var(--neutral-200);

  --border-default: #34363F;
  --border-strong: #43454F;

  --brand-primary: #9775FA;
  --brand-primary-hover: #B197FC;
  --brand-primary-active: var(--violet-200);
  --brand-primary-soft: #2C2640;
  --brand-on-primary: var(--neutral-900);

  --accent: #9775FA;
  --accent-strong: #B197FC;
  --accent-soft: rgba(151, 117, 250, 0.18);
  --accent-on: var(--neutral-900);

  --achievement: var(--warning-500);
  --achievement-strong: #FFC94D;
  --achievement-soft: rgba(250, 176, 5, 0.16);
  --achievement-on: var(--neutral-900);

  --success: #51CF66;
  --success-soft: rgba(81, 207, 102, 0.16);
  --warning: var(--warning-500);
  --warning-soft: rgba(250, 176, 5, 0.16);
  --danger: #FF6B6B;
  --danger-soft: rgba(255, 107, 107, 0.16);
  --info: #4DABF7;
  --info-soft: rgba(77, 171, 247, 0.16);

  --focus-ring: 0 0 0 4px rgba(151, 117, 250, 0.35);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 12px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.55);
  --shadow-primary: 0 4px 14px rgba(151, 117, 250, 0.35);
  --shadow-primary-hover: 0 6px 20px rgba(151, 117, 250, 0.45);

  /* Reference-mockup-named aliases (see :root) — dark-mode values. */
  --primary: #9775FA;
  --primary-hover: #B197FC;
  --primary-dark: var(--violet-200);
  --primary-light: #2C2640;
  --primary-soft: #2C2640;
  --background: #16171D;
  --surface: #1E1F27;
  --surface-soft: #262832;
  --text: #F1F1F4;
  --text-secondary: #B8B9C4;
  --text-muted: #82838F;
  --border: #34363F;
  --success: #51CF66;
  --warning: var(--warning-500);
  --danger: #FF6B6B;
  --info: #4DABF7;
  --shadow-primary-sm: var(--shadow-primary);
  --shadow-primary-md: var(--shadow-primary-hover);
  --shadow-primary-lg: 0 24px 48px rgba(151, 117, 250, 0.28);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-page: #16171D;
    --bg-surface: #1E1F27;
    --bg-surface-raised: #262832;
    --bg-surface-hover: #262832;
    --bg-inverse: var(--neutral-50);
    --bg-accent-tint: #2C2640;

    --text-primary: #F1F1F4;
    --text-secondary: #B8B9C4;
    --text-muted: #82838F;
    --text-faint: #82838F;
    --text-on-inverse: var(--neutral-900);
    --text-on-inverse-muted: var(--neutral-200);

    --border-default: #34363F;
    --border-strong: #43454F;

    --brand-primary: #9775FA;
    --brand-primary-hover: #B197FC;
    --brand-primary-active: var(--violet-200);
    --brand-primary-soft: #2C2640;
    --brand-on-primary: var(--neutral-900);

    --accent: #9775FA;
    --accent-strong: #B197FC;
    --accent-soft: rgba(151, 117, 250, 0.18);
    --accent-on: var(--neutral-900);

    --achievement: var(--warning-500);
    --achievement-strong: #FFC94D;
    --achievement-soft: rgba(250, 176, 5, 0.16);
    --achievement-on: var(--neutral-900);

    --success: #51CF66;
    --success-soft: rgba(81, 207, 102, 0.16);
    --warning: var(--warning-500);
    --warning-soft: rgba(250, 176, 5, 0.16);
    --danger: #FF6B6B;
    --danger-soft: rgba(255, 107, 107, 0.16);
    --info: #4DABF7;
    --info-soft: rgba(77, 171, 247, 0.16);

    --focus-ring: 0 0 0 4px rgba(151, 117, 250, 0.35);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 12px 24px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.55);
    --shadow-primary: 0 4px 14px rgba(151, 117, 250, 0.35);
    --shadow-primary-hover: 0 6px 20px rgba(151, 117, 250, 0.45);

    --primary: #9775FA;
    --primary-hover: #B197FC;
    --primary-dark: var(--violet-200);
    --primary-light: #2C2640;
    --primary-soft: #2C2640;
    --background: #16171D;
    --surface: #1E1F27;
    --surface-soft: #262832;
    --text: #F1F1F4;
    --text-secondary: #B8B9C4;
    --text-muted: #82838F;
    --border: #34363F;
    --success: #51CF66;
    --warning: var(--warning-500);
    --danger: #FF6B6B;
    --info: #4DABF7;
    --shadow-primary-sm: var(--shadow-primary);
    --shadow-primary-md: var(--shadow-primary-hover);
    --shadow-primary-lg: 0 24px 48px rgba(151, 117, 250, 0.28);
  }
}