/**
 * TapSong Admin Design Tokens
 * 
 * Dark-first design system with Indigo Control palette.
 * Brand color used ONLY for navigation, selection, and structural state.
 * Buttons use neutral colors by default.
 * Zero hard-coded hex values allowed in components.
 */

:root {
  /* =========================
     Brand — Gold Accent
     Unified across app for consistency
     Used for: navigation, selection, focus, CTAs
     ========================= */
  --brand-50:  #FFFBEB;
  --brand-100: #FEF3C7;
  --brand-200: #FDE68A;
  --brand-300: #FCD34D;
  --brand-400: #FBBF24;
  --brand-500: #FFD60A; /* brand presence - primary gold */
  --brand-600: #E5C009; /* ACTIVE / SELECTED (primary) */
  --brand-700: #CCA808;
  --brand-800: #A38607;
  --brand-900: #7A6405;
  
  /* Muted accent for navigation/structure (less saturated) */
  --brand-muted: #8B7B35;

  /* =========================
     Dark Surfaces (cool-neutral)
     ========================= */
  --bg-0: #0B0F19; /* app background */
  --bg-1: #0F1629; /* primary surface */
  --bg-2: #121B31; /* elevated cards */
  --bg-3: #182041; /* hover / active surface */

  /* =========================
     Borders & Dividers
     ========================= */
  --border-1: rgba(255, 255, 255, 0.08);
  --border-2: rgba(255, 255, 255, 0.12);

  /* =========================
     Form Surfaces & Text
     ========================= */
  --admin-surface-input: #131c34; /* slightly lighter than card */
  --admin-surface-input-hover: #182041;
  --admin-border-input: rgba(255, 255, 255, 0.12);
  --admin-border-input-hover: rgba(255, 255, 255, 0.18);
  --admin-border-input-focus: rgba(255, 214, 10, 0.55);
  --admin-text-label: var(--text-1);
  --admin-text-helper: var(--text-3);
  --admin-text-placeholder: rgba(255, 255, 255, 0.6);
  --admin-focus-ring: rgba(255, 214, 10, 0.35);

  /* =========================
     Text
     ========================= */
  --text-1: rgba(255, 255, 255, 0.92); /* primary */
  --text-2: rgba(255, 255, 255, 0.72); /* secondary */
  --text-3: rgba(255, 255, 255, 0.52); /* muted */
  --text-inverse: #0B0F19;

  /* =========================
     Semantic Colors
     NOT replaced with brand
     ========================= */
  --success-500: #22C55E;
  --success-bg: rgba(34, 197, 94, 0.1);
  --warning-500: #F59E0B;
  --warning-bg: rgba(245, 158, 11, 0.1);
  --danger-500:  #EF4444;
  --danger-bg: rgba(239, 68, 68, 0.1);
  --info-500:    #38BDF8;
  --info-bg: rgba(56, 189, 248, 0.1);

  /* =========================
     Focus & Interaction
     ========================= */
  --focus-ring: rgba(255, 214, 10, 0.45);
  --hover-overlay: rgba(255, 255, 255, 0.05);

  /* =========================
     Radius
     ========================= */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;

  /* =========================
     Shadows (subtle, dark)
     ========================= */
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.55);

  /* =========================
     Spacing Scale
     ========================= */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;

  /* =========================
     Typography
     ========================= */
  --font-sans: ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, Helvetica, Arial,
               "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, "SF Mono", "Monaco", "Cascadia Code",
               "Roboto Mono", Consolas, monospace;

  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-22: 22px;
  --font-size-28: 28px;

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-600: 600;
  --font-weight-700: 700;

  /* =========================
     Layout
     ========================= */
  --sidebar-width: 264px;
  --topbar-height: 56px;
  --topbar-with-impersonation: 104px;

  /* =========================
     Transitions
     ========================= */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* =========================
     Z-Index Scale
     ========================= */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* Base resets for dark theme */
body {
  background-color: var(--bg-0);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: var(--font-size-16);
  line-height: var(--line-height-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ensure form elements inherit font */
input,
button,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

/* Focus visible for accessibility */
*:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}