/**
 * Joffrey's KSA — Global Design Tokens
 * Load this file FIRST via header-links.blade.php.
 * All other admin CSS files consume these variables.
 *
 * Naming convention:
 *   --color-brand-*    → brand identity
 *   --color-semantic-* → status / feedback
 *   --surface-*        → backgrounds and borders
 *   --text-*           → typography
 *   --motion-*         → animation helpers
 *   --radius-*         → border-radius scale
 *   --tier-*           → loyalty tier colours (Silver / Gold / Platinum)
 */

/* ═══════════════════════════════════════
   LIGHT MODE  (default)
═══════════════════════════════════════ */
:root {

    /* ── Brand ──────────────────────────── */
    --color-brand-primary:        #7367F0;   /* Galaxy Violet — canonical purple */
    --color-brand-primary-deep:   #5A52D5;   /* pressed / focus-ring states      */
    --color-brand-primary-glow:   #9D8FFF;   /* glow overlays, decorative use     */
    --color-brand-primary-rgb:    115, 103, 240; /* for rgba() composition        */

    --color-brand-secondary:      #00CFE8;   /* Nebula Cyan                       */
    --color-brand-secondary-rgb:  0, 207, 232;

    --color-brand-tertiary:       #FF9F43;   /* Comet Amber — kept from codebase  */
    --color-brand-tertiary-rgb:   255, 159, 67;

    /* ── Semantic ───────────────────────── */
    --color-success:              #22C55E;
    --color-success-soft:         rgba(34, 197, 94, 0.12);
    --color-success-rgb:          34, 197, 94;

    --color-warning:              #F59E0B;
    --color-warning-soft:         rgba(245, 158, 11, 0.12);
    --color-warning-rgb:          245, 158, 11;

    --color-danger:               #EF4444;
    --color-danger-soft:          rgba(239, 68, 68, 0.12);
    --color-danger-rgb:           239, 68, 68;

    --color-info:                 #00CFE8;   /* == brand-secondary */
    --color-info-soft:            rgba(0, 207, 232, 0.12);

    /* ── Surfaces (Light) ───────────────── */
    --surface-canvas:             #F4F4F8;   /* page background              */
    --surface-base:               #FFFFFF;   /* cards, modals                */
    --surface-raised:             #FAFAFA;   /* card headers, table headers  */
    --surface-overlay:            rgba(115, 103, 240, 0.05); /* row hover   */
    --surface-border:             rgba(115, 103, 240, 0.14); /* all borders  */
    --surface-border-strong:      rgba(115, 103, 240, 0.28); /* focus rings  */

    /* ── Sidebar Gradient Surfaces ────── */
    --sb-gradient-from:         #1f1c3a;
    --sb-gradient-mid:          #2d2a5e;
    --sb-gradient-to:           #232142;

    --sb-glass-bg-dark:         rgba(44, 49, 72, 0.72);
    --sb-glass-bg-light:        rgba(255, 255, 255, 0.86);
    --sb-glass-border-dark:     rgba(255, 255, 255, 0.06);
    --sb-glass-border-light:    rgba(115, 103, 240, 0.12);

    --sb-orb-primary:           rgba(115, 103, 240, 0.35);
    --sb-orb-secondary:         rgba(0, 207, 232, 0.25);

    /* ── Typography ─────────────────────── */
    --text-strong:                #2F2B3D;
    --text-body:                  #6F6B7D;
    --text-muted:                 #B8B6C2;
    --text-on-brand:              #FFFFFF;   /* text on brand-primary bg     */

    /* ── Motion ─────────────────────────── */
    --ease-bounce:   cubic-bezier(0.34, 1.2, 0.64, 1);
    --ease-smooth:   cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out:      cubic-bezier(0, 0, 0.2, 1);

    --duration-fast: 0.15s;
    --duration-base: 0.25s;
    --duration-slow: 0.45s;

    /* ── Radius scale ────────────────────── */
    --radius-xs:   4px;
    --radius-sm:   6px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-pill: 2rem;

    /* ── Tier: Silver ────────────────────── */
    --tier-silver-1:        #94A3B8;
    --tier-silver-2:        #CBD5E1;
    --tier-silver-3:        #64748B;
    --tier-silver-glow:     rgba(148, 163, 184, 0.28);
    --tier-silver-bg:       rgba(148, 163, 184, 0.10);
    --tier-silver-fg:       #475569;
    --tier-silver-border:   rgba(148, 163, 184, 0.45);

    /* ── Tier: Gold ──────────────────────── */
    --tier-gold-1:          #D97706;
    --tier-gold-2:          #FBBF24;
    --tier-gold-3:          #92400E;
    --tier-gold-glow:       rgba(245, 158, 11, 0.32);
    --tier-gold-bg:         rgba(245, 158, 11, 0.10);
    --tier-gold-fg:         #B45309;
    --tier-gold-border:     rgba(245, 158, 11, 0.45);

    /* ── Tier: Platinum ──────────────────── */
    --tier-platinum-1:      #7367F0;         /* brand-tied — feels premium   */
    --tier-platinum-2:      #C4B5FD;
    --tier-platinum-3:      #4F46E5;
    --tier-platinum-glow:   rgba(115, 103, 240, 0.40);
    --tier-platinum-bg:     rgba(115, 103, 240, 0.10);
    --tier-platinum-fg:     #7367F0;
    --tier-platinum-border: rgba(115, 103, 240, 0.40);
}

/* ═══════════════════════════════════════
   DARK MODE
   Matches selectors already in sidebar.css
   and demo.css for consistency.
═══════════════════════════════════════ */
html[data-theme='dark']       :root,
html[data-theme='theme-dark'] :root,
html[data-theme*='dark']      :root,
.dark-style {
    --surface-canvas:           #1E2130;
    --surface-base:             #2C3148;
    --surface-raised:           #363C55;
    --surface-overlay:          rgba(115, 103, 240, 0.08);
    --surface-border:           rgba(255, 255, 255, 0.09);
    --surface-border-strong:    rgba(115, 103, 240, 0.36);

    --text-strong:              #F7F8FF;
    --text-body:                rgba(225, 228, 248, 0.82);
    --text-muted:               rgba(200, 204, 232, 0.50);

    /* Tiers stay visually the same in dark mode —
       their glow reads correctly against dark surfaces */
    --tier-silver-fg:           #94A3B8;
    --tier-gold-fg:             #FBBF24;
    --tier-platinum-fg:         #C4B5FD;
}

@media (prefers-color-scheme: dark) {
    html[data-theme='system'] {
        --surface-canvas:        #1E2130;
        --surface-base:          #2C3148;
        --surface-raised:        #363C55;
        --surface-overlay:       rgba(115, 103, 240, 0.08);
        --surface-border:        rgba(255, 255, 255, 0.09);
        --surface-border-strong: rgba(115, 103, 240, 0.36);

        --text-strong:           #F7F8FF;
        --text-body:             rgba(225, 228, 248, 0.82);
        --text-muted:            rgba(200, 204, 232, 0.50);

        --tier-silver-fg:        #94A3B8;
        --tier-gold-fg:          #FBBF24;
        --tier-platinum-fg:      #C4B5FD;
    }
}

/* Respect user motion preference globally */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}