/* ════════════════════════════════════════════════════════════
   TOKENS — Design token foundation for the admin panel
   Palette: deep zinc / indigo accent / warm neutral
   ════════════════════════════════════════════════════════════ */

:root {
  /* ═══ Typography ═══ */
  --font-sans: 'Public Sans', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --font-size-xs:   0.75rem;
  --font-size-sm:   0.875rem;
  --font-size-base: 1rem;
  --font-size-lg:   1.125rem;
  --font-size-xl:   1.25rem;
  --font-size-2xl:  1.5rem;
  --font-size-3xl:  1.875rem;
  --font-size-4xl:  2.25rem;
  --font-size-h1:   2.25rem;
  --font-size-h2:   1.5rem;
  --font-size-h3:   1.25rem;
  --font-size-h4:   1rem;
  --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --text-2: var(--muted-foreground);
  --lh-tight: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.7;

  /* ═══ Brand aliases (legacy compat — point to current indigo accent) ═══ */
  --brand-300: var(--color-accent-light);
  --brand-400: var(--color-accent);
  --brand-500: var(--color-accent);
  --brand-600: var(--color-accent-hover);
  --tracking-tight: -0.025em;

  /* ═══ Colors — Light Mode ═══ */
  --background:       #ffffff;
  --foreground:       #0a0a0a;
  --card:             #ffffff;
  --card-foreground:  #0a0a0a;
  --primary:          lab(63.9599% -11.9135 -45.5695);
  --primary-foreground: #ffffff;
  --secondary:        #f5f5f5;
  --secondary-foreground: #0a0a0a;
  --muted:            #f5f5f5;
  --muted-foreground: #686868;
  --accent:           #eef2ff;
  --accent-foreground:#0a0a0a;
  --border:           #e8e8e8;
  --input:            #e8e8e8;
  --ring:             #42a6ff;
  --bg-page:          #ffffff;

  /* ═══ Semantic aliases ═══ */
  --color-primary:        var(--primary);
  --color-primary-hover:  #2563eb;
  --color-primary-active: #1d4ed8;
  --color-primary-light:  rgba(59,130,246,0.06);
  --color-primary-fg:     var(--primary-foreground);
  --color-primary-text:   var(--primary);
  --color-primary-border: rgba(59,130,246,0.15);

  --color-accent:       #3b82f6;
  --color-accent-hover:  #2563eb;
  --color-accent-light:  #eff6ff;

  --success: #059669; --warning: #d97706; --danger: #dc2626; --info: #3b82f6;
  --color-success: var(--success); --color-warning: var(--warning); --color-danger: var(--danger);

  /* ═══ Shadows ═══ */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.02);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);

  /* ═══ Sizing ═══ */
  --radius:       1rem;
  --radius-sm:    calc(var(--radius) - 0.25rem);
  --radius-md:    calc(var(--radius) - 0.25rem);
  --radius-lg:    var(--radius);
  --radius-xl:    calc(var(--radius) + 0.25rem);
  --radius-full:  9999px;

  --ui-h:      2.5rem;
  --btn-radius: var(--radius-md);
  --input-radius: var(--radius-md);
  --card-radius: var(--radius-lg);
  --card-padding: 1.5rem;
  --input-px: 0.75rem;
  --table-header-h: 2.25rem;
  --skeleton-base: #f1f5f9;
  --skeleton-highlight: #f8f9fb;

  /* ═══ Admin overrides — compact 8px grid ═══ */
  --admin-btn-h: 2rem;
  --admin-btn-sm-h: 1.75rem;
  --admin-input-h: 2rem;
  --admin-radius: 0.25rem;
  --admin-chip-radius: 1rem;

  /* ═══ Spacing ═══ */
  --space-0-5:0.125rem; --space-1:0.25rem;  --space-1-5:0.375rem;
  --space-2:0.5rem;     --space-3:0.75rem;  --space-4:1rem;
  --space-5:1.25rem;    --space-6:1.5rem;   --space-7:1.75rem;
  --space-8:2rem;       --space-10:2.5rem;  --space-12:3rem;
  --space-16:4rem;      --space-20:5rem;    --space-24:6rem;
  --space-32:8rem;

  /* ═══ Layout & Interaction ═══ */
  --focus-ring: 0 0 0 3px rgba(59,130,246,0.15);
  --sidebar-width: 240px; --sidebar-item-h: 36px;
  --topbar-height: 56px;  --container-max: 1200px;

  --transition-fast: 150ms cubic-bezier(0.4,0,0.2,1);
  --transition-base: 200ms cubic-bezier(0.4,0,0.2,1);
  --transition-smooth: 250ms cubic-bezier(0.16,1,0.3,1);
  --border-subtle: rgba(0,0,0,0.05);
  --z-sticky: 100; --z-overlay: 200; --z-modal: 300; --z-toast: 400;

  /* ═══ Charts ═══ */
  --chart-color-1: #3b82f6; --chart-color-2: #059669;
  --chart-color-3: #d97706; --chart-color-4: #7c3aed;
  --chart-color-5: #f59e0b; --chart-color-6: #10b981;
  --chart-color-7: #06b6d4; --chart-color-8: #ef4444;
  --chart-color-9: #8b5cf6; --chart-color-10: #ec4899;

  /* ═══ Bootstrap overrides ═══ */
  --bs-primary: var(--color-primary);
  --bs-primary-rgb: 79,70,229;
  --bs-body-bg: var(--background);
  --bs-body-color: var(--foreground);
  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size: var(--font-size-base);
  --bs-border-radius: var(--radius-md);
  --bs-border-color: var(--border);
  --bs-link-color: var(--color-accent);
  --bs-link-hover-color: var(--color-accent-hover);
  --bs-link-decoration: none;
}

/* ═══ Dark Mode ═══ */
[data-bs-theme="dark"] {
  --background:       #0a0a0a;
  --foreground:       #f5f5f5;
  --card:             #1a1a1a;
  --card-foreground:  #f5f5f5;
  --primary:          #3b82f6;
  --primary-foreground: #ffffff;
  --secondary:        #1a1a1a;
  --secondary-foreground: #f5f5f5;
  --muted:            #1a1a1a;
  --muted-foreground: #a1a1aa;
  --accent:           #1a1a1a;
  --accent-foreground:#f5f5f5;
  --border:           rgba(255,255,255,0.08);
  --input:            rgba(255,255,255,0.12);
  --ring:             #42a6ff;
  --bg-page:          #0a0a0a;

  --color-primary:        var(--primary);
  --color-primary-hover:  #60a5fa;
  --color-primary-active: #93c5fd;
  --color-primary-light:  rgba(59,130,246,0.12);
  --color-primary-fg:     var(--primary-foreground);
  --color-primary-text:   var(--primary);
  --color-primary-border: rgba(255,255,255,0.15);

  --color-accent:       #3b82f6;
  --color-accent-hover:  #60a5fa;
  --color-accent-light:  rgba(59,130,246,0.12);

  --focus-ring: 0 0 0 3px rgba(59,130,246,0.25);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 1px 1px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.5), 0 2px 4px -2px rgba(0,0,0,0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.5), 0 4px 6px -4px rgba(0,0,0,0.3);
  --skeleton-base: #27272a;
  --skeleton-highlight: #3f3f46;
  --border-subtle: rgba(255,255,255,0.05);

  --bs-primary-rgb: 244,244,245;
  --bs-body-bg: var(--background);
  --bs-body-color: var(--foreground);
  --bs-border-color: var(--border);
  --bs-link-color: var(--color-accent);
  --bs-link-hover-color: var(--color-accent-hover);
}