/* ============================================================================
   tokens.css — THE SINGLE SOURCE OF TRUTH FOR ALL SYSTEM COLOURS
   ----------------------------------------------------------------------------
   To re-theme the ENTIRE system, edit ONLY the "RAW PALETTE" block below.
   Everything else — both naming schemes (--crim… and --primary…), every
   semantic tint, and dark mode — is derived from it with var(). Dark mode
   works by flipping just the themeable raw colours, so every alias follows
   automatically.

   THEME: "CMS Aurora" — midnight-navy chrome with the logo's luminous
   blue → gold → magenta gradient mapped onto the semantic slots:
     • primary / danger  = magenta-pink  (buttons, alerts)   #d81b78
     • info / links       = royal blue     (the logo's blue)   #2c61c3
     • warn               = gold           (the logo's gold)   #f6cb46
     • chrome ground      = midnight indigo (topbar, rail)     #0f1636

   Load order: this file must be linked FIRST, before app.css / brand.css /
   admin.css and before any page's inline <style>.
   ============================================================================ */

:root {
  /* ======================= RAW PALETTE — EDIT HERE ========================= */

  /* Brand (fixed in both light & dark) */
  --c-crimson:      #d81b78;   /* primary / danger — logo magenta */
  --c-crimson-deep: #a81560;   /* pressed / gradient partner */
  --c-crimson-lite: #ec72a8;
  --c-navy:         #0f1636;   /* chrome ground: topbar, rail — logo midnight */
  --c-navy-2:       #0a0f28;
  --c-navy-3:       #1e2a5e;
  --c-teal:         #2c61c3;   /* accent / info / links — logo royal blue */
  --c-teal-tint:    #e7eefc;
  --c-sky:          #bcdcff;
  --c-accent:       #9333c9;   /* purple category accent — logo violet */

  /* Semantic (fixed) */
  --c-ok:   #10b981;  --c-ok-t:   #047857;  --c-ok-bg:   #e3f7ef;
  --c-warn: #f6cb46;  --c-warn-t: #8a5a00;  --c-warn-bg: #fdf4d0;
  --c-dng-t: #a01560; --c-dng-bg: #fdeaf3;  /* danger base = --c-crimson */
  --c-info-t: #1a4a9e;

  /* Surfaces & ink (THEMEABLE — flipped in [data-theme="dark"] below) */
  --c-bg:        #f3f4fb;
  --c-surface:   #ffffff;
  --c-surface-2: #f4f6fc;
  --c-line:      #e6e8f3;
  --c-line-2:    #dbdde9;
  --c-ink:       #1a1c38;
  --c-ink-2:     #565a78;
  --c-ink-3:     #9092b0;
  --c-stat-blue:   #2c61c3;   /* dashboard stat number (blue) */
  --c-stat-garnet: #d81b78;   /* dashboard stat number (magenta) */

  /* RGB channels — for rgba() tints so alpha variants stay centralised */
  --c-crimson-rgb: 216, 27, 120;
  --c-navy-rgb:    15, 22, 54;
  --c-ok-rgb:      16, 185, 129;

  /* Neutral grey ramp (fixed; independent of the themeable surfaces above) */
  --gray-50:  #f8f9fd;
  --gray-100: #f4f5fb;
  --gray-200: #e7e8f2;
  --gray-300: #dcdde9;
  --gray-400: #9698b0;
  --gray-500: #6b6c88;
  --gray-600: #5c5d78;
  --gray-700: #43445e;
  --gray-800: #2c2d4a;
  --gray-900: #1e1f36;

  /* ===================== STRUCTURAL (non-colour) tokens ==================== */
  --font: 'Assistant', 'Heebo', system-ui, sans-serif;
  --r: 12px; --r-sm: 9px; --r-full: 999px;
  --radius-sm: 0.375rem; --radius: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.5rem;
  --ease: cubic-bezier(.25, .8, .3, 1);
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --sh-1: 0 1px 2px rgba(var(--c-navy-rgb), .05), 0 4px 14px rgba(var(--c-navy-rgb), .05);
  --sh-2: 0 2px 6px rgba(var(--c-navy-rgb), .08), 0 12px 30px rgba(var(--c-navy-rgb), .09);
  --sh-3: 0 24px 60px rgba(var(--c-navy-rgb), .18);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);
  --shadow:    0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);

  /* =================== DERIVED — brand.css naming scheme =================== */
  --navy: var(--c-navy); --navy-2: var(--c-navy-2); --navy-3: var(--c-navy-3);
  --navy-soft: rgba(var(--c-navy-rgb), .06);
  --crim: var(--c-crimson); --crim-2: var(--c-crimson-deep);
  --blue: var(--c-teal); --blue-tint: var(--c-teal-tint); --sky: var(--c-sky);
  --bg: var(--c-bg); --surface: var(--c-surface); --surface-2: var(--c-surface-2);
  --line: var(--c-line); --line-2: var(--c-line-2);
  --ink: var(--c-ink); --ink-2: var(--c-ink-2); --ink-3: var(--c-ink-3);
  --ok: var(--c-ok); --ok-t: var(--c-ok-t); --ok-bg: var(--c-ok-bg);
  --warn: var(--c-warn); --warn-t: var(--c-warn-t); --warn-bg: var(--c-warn-bg);
  --dng: var(--c-crimson); --dng-t: var(--c-dng-t); --dng-bg: var(--c-dng-bg);
  --crim-tint: rgba(var(--c-crimson-rgb), .10);
  --crim-line: rgba(var(--c-crimson-rgb), .28);
  --stat-blue: var(--c-stat-blue); --stat-garnet: var(--c-stat-garnet);

  /* =============== DERIVED — app.css / admin legacy naming ================= */
  --primary: var(--c-crimson); --primary-dark: var(--c-crimson-deep); --primary-light: var(--c-crimson-lite);
  --secondary: var(--c-crimson-deep); --accent: var(--c-accent);
  --success: var(--c-ok); --warning: var(--c-warn); --danger: var(--c-crimson); --info: var(--c-teal);
  --success-bg: var(--c-ok-bg); --success-t: var(--c-ok-t);
  --warning-bg: var(--c-warn-bg); --warning-t: var(--c-warn-t);
  --danger-bg: var(--c-dng-bg); --danger-t: var(--c-dng-t);
  --info-bg: var(--c-teal-tint); --info-t: var(--c-info-t);

  /* App surface/text semantics (app.css) */
  --bg-primary: var(--c-surface); --bg-secondary: #f9fafb; --bg-tertiary: #f3f4f6;
  --text-primary: var(--gray-800); --text-secondary: var(--gray-600);
  --border-color: var(--c-line); --card-bg: var(--c-surface); --input-bg: var(--c-surface);
}

/* ============================== DARK MODE ================================= */
/* Flip ONLY the themeable raws — every derived alias follows automatically.  */
/* Dark surfaces are tinted toward the logo's midnight-indigo field.          */
[data-theme="dark"] {
  --c-bg:        #0b1029;
  --c-surface:   #141a35;
  --c-surface-2: #1e254a;
  --c-line:      #26305a;
  --c-line-2:    #333e6e;
  --c-ink:       #f5f7ff;
  --c-ink-2:     #c3c8e0;
  --c-ink-3:     #8b90b5;
  --c-stat-blue:   #5aa2f0;
  --c-stat-garnet: #ff5fa5;
  --navy-soft: rgba(255, 255, 255, .07);

  /* app.css dark surface/text semantics */
  --bg-primary: #0b1029; --bg-secondary: #141a35; --bg-tertiary: #1e254a;
  --text-primary: #f5f7ff; --text-secondary: #c3c8e0;
  --border-color: #333e6e; --card-bg: #141a35; --input-bg: #0b1029;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .3);
  --shadow:    0 1px 3px 0 rgba(0, 0, 0, .4), 0 1px 2px 0 rgba(0, 0, 0, .3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .4), 0 2px 4px -1px rgba(0, 0, 0, .3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .5), 0 4px 6px -2px rgba(0, 0, 0, .4);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .6), 0 10px 10px -5px rgba(0, 0, 0, .5);
}