/* ==========================================================================
   THE KNIGHT CLUB — Design Tokens (Super Admin)
   Theme: light-dominant cinematic SaaS — clean pale/white surfaces, with a
   purple / electric-blue / soft-pink accent system used for gradients,
   active states and restrained ambient background glows. NOT a dark theme:
   base surfaces stay light for table/form readability. No light/dark mode
   toggle exists or is introduced here — this is the single active palette.
   These custom properties are the single source of truth for color,
   spacing, radius, shadow, gradients and motion across the app. Never
   hardcode a color/shadow/gradient value in a page-level stylesheet —
   reference a token instead.
   ========================================================================== */

:root {
  /* ---- Color: core palette (from the confirmed direction) ---- */
  --color-violet-deep:   #4520a8;
  --color-purple:        #7447e8;   /* primary accent */
  --color-blue-electric: #4b8bff;
  --color-pink-soft:     #f1a8d7;
  --color-lavender-pale: #f0ecff;
  --color-violet-dark:   #171329;   /* sparing use: dark accent text/surface */

  /* ---- Color: surfaces (light-dominant) ---- */
  --color-bg: #fbfaff;                 /* app shell base, faint lavender-white */
  --color-surface: #ffffff;            /* cards, inputs, sidebar, topbar */
  --color-surface-alt: #f6f4fc;        /* subtle off-white section backgrounds */
  --color-surface-sunken: #f0ecfa;     /* track backgrounds, chips, wells */

  /* Glass surface: semi-transparent white for a light glass effect, used
     tastefully (ambient shell, a few featured cards) — not everywhere. */
  --color-glass-surface: rgba(255, 255, 255, 0.68);
  --color-glass-border: rgba(255, 255, 255, 0.55);
  --glass-blur: blur(16px);

  /* ---- Color: purple accent scale (primary) ---- */
  --color-accent-50:  #f5f2fc;
  --color-accent-100: #e9e2f9;
  --color-accent-300: #b79cef;
  --color-accent-500: #7447e8;    /* primary accent */
  --color-accent-600: #6230d6;
  --color-accent-700: #4520a8;

  /* ---- Color: secondary accent scale (electric blue) ---- */
  --color-blue-50:  #eef4ff;
  --color-blue-100: #dce9ff;
  --color-blue-300: #a6c5ff;
  --color-blue-500: #4b8bff;
  --color-blue-600: #2f6fe0;
  --color-blue-700: #1d4fad;

  /* ---- Color: tertiary accent (soft pink — sparing, decorative use) ---- */
  --color-pink-50:  #fdf1f8;
  --color-pink-100: #fbe1f0;
  --color-pink-300: #f1a8d7;
  --color-pink-500: #e472b8;

  /* ---- Color: text ---- */
  --color-text: #211a35;
  --color-text-muted: #77718a;
  --color-text-faint: #a39cb1;
  --color-text-on-accent: #ffffff;

  /* ---- Color: borders / dividers ---- */
  --color-border: #e7e3f3;
  --color-border-strong: #d9d3ec;

  /* ---- Color: semantic status (badges, alerts, inline messages) ---- */
  --color-success-bg: #e9f9ee;
  --color-success-text: #16794b;
  --color-success-border: #b7e4c7;
  --color-warning-bg: #fef3c7;
  --color-warning-text: #92400e;
  --color-warning-bg-soft: #fef9c3;
  --color-warning-text-soft: #854d0e;
  --color-error-bg: #fdeceb;
  --color-error-text: #b91c1c;
  --color-error-text-strong: #991b1b;
  --color-error-border: #fecaca;
  --color-info-bg: #e0f0ff;
  --color-info-text: #1d5fa4;
  --color-info-bg-soft: #fff8e0;
  --color-info-text-soft: #9a6700;

  /* ---- Pure values used sparingly outside the palette (overlays, video
     frames) — tokenized so no hex lives outside this file. ---- */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-track: #e4e0ee;

  /* Overlay alphas on black/white — media viewers, modal close buttons. */
  --overlay-dark-strong: rgba(0, 0, 0, 0.75);
  --overlay-dark-mid: rgba(0, 0, 0, 0.5);
  --overlay-light-mid: rgba(255, 255, 255, 0.4);
  --overlay-light-soft: rgba(255, 255, 255, 0.78);
  --overlay-violet-mid: rgba(23, 19, 41, 0.5);

  /* ---- Gradients: explicit reusable tokens ---- */
  /* Primary CTA gradient — buttons, selected nav items, progress fills. */
  --gradient-primary: linear-gradient(135deg, var(--color-purple) 0%, var(--color-blue-600) 100%); /* blue-600: keeps white text >= 4.5:1 */
  --gradient-primary-hover: linear-gradient(135deg, var(--color-violet-deep) 0%, var(--color-blue-700) 100%);
  /* Featured-card gradient — a few highlighted dashboard stat cards. */
  --gradient-feature: linear-gradient(135deg, var(--color-violet-deep) 0%, var(--color-purple) 55%, var(--color-pink-soft) 100%);
  /* Sidebar active-item gradient. */
  --gradient-nav-active: linear-gradient(135deg, var(--color-purple) 0%, var(--color-violet-deep) 100%);
  /* Ambient background glows (decorative, non-interactive, low opacity). */
  --gradient-ambient-1: radial-gradient(circle, var(--color-purple) 0%, transparent 70%);
  --gradient-ambient-2: radial-gradient(circle, var(--color-blue-electric) 0%, transparent 70%);
  --gradient-ambient-3: radial-gradient(circle, var(--color-pink-soft) 0%, transparent 70%);
  /* Text gradient — sparing use on a hero figure / brand mark. */
  --gradient-text: linear-gradient(135deg, var(--color-violet-deep), var(--color-purple));

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(23, 19, 41, 0.05);
  --shadow-md: 0 4px 16px rgba(23, 19, 41, 0.08);
  --shadow-lg: 0 12px 32px rgba(23, 19, 41, 0.12);
  --shadow-xl: 0 24px 56px rgba(23, 19, 41, 0.16);
  /* Accent "glow" shadow — primary buttons, active nav, featured cards. */
  --shadow-glow: 0 8px 24px rgba(116, 71, 232, 0.28);
  --shadow-glow-sm: 0 4px 12px rgba(116, 71, 232, 0.22);

  /* ---- Focus ring ---- */
  --focus-ring: 0 0 0 3px var(--color-accent-100);
  --focus-ring-color: var(--color-accent-500);

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* ---- Typography ----
     Plus Jakarta Sans for headings/brand/nav/buttons (distinctive, geometric,
     attractive display feel); Inter stays the workhorse body/table/form font
     for maximum readability at small sizes. Both loaded in <head>. */
  --font-family-display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.75rem;

  /* ---- Sidebar (dedicated dark-on-gradient surface, see reference UI) ---- */
  --sidebar-bg: linear-gradient(180deg, #2a1868 0%, #1c1148 55%, #150d38 100%);
  --sidebar-text: rgba(255, 255, 255, 0.72);
  --sidebar-text-strong: #ffffff;
  --sidebar-text-faint: rgba(255, 255, 255, 0.45);
  --sidebar-hover-bg: rgba(255, 255, 255, 0.08);
  --sidebar-active-bg: rgba(255, 255, 255, 0.14);
  --sidebar-border: rgba(255, 255, 255, 0.1);

  /* ---- Motion ---- */
  --duration-fast: 0.15s;
  --duration-base: 0.25s;
  --duration-slow: 0.5s;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);

  /* ---- Layout ---- */
  --max-width: 1200px;
  --sidebar-width: 264px;

  /* ---- Breakpoints (reference values — see note below) ----
     Single source of truth for the app's 3-tier responsive system:
       mobile:  up to 640px  (phones)
       tablet:  641–1024px   (large phones landscape, tablets, small laptops)
       desktop: 1025px+      (laptops, monitors)
     CSS custom properties cannot be used inside @media conditions, so these
     are documentation + the values JS should read (see main.js /
     Breakpoints helper) — every @media rule in this codebase must use the
     literal px values below, not an arbitrary number. Do not introduce a
     new breakpoint number anywhere else; add a tier here first. */
  --bp-mobile-max: 640px;    /* @media (max-width: 640px) */
  --bp-tablet-min: 641px;    /* @media (min-width: 641px) */
  --bp-tablet-max: 1024px;   /* @media (max-width: 1024px) */
  --bp-desktop-min: 1025px;  /* @media (min-width: 1025px) */

  /* Narrow-phone sub-tier: for 2-up grids (stat cards, totals) built on
     an 11rem/10rem minmax() that still doesn't fit 2-up on the smallest
     phones (2 × ~176px + gap + shell padding > 320-390px viewport). Use
     this sparingly — only for auto-fit grids that need one more step down
     than the standard mobile tier. */
  --bp-mobile-sm-max: 480px; /* @media (max-width: 480px) */
}