/*
==================================================================
   · THEME
  ----------------------------------------------------------------
  Núcleo do Design System.
  Define TODOS os tokens de design (cores, tipografia, espaçamento,
  raios, sombras, transições) como variáveis CSS.

  Alterando as variáveis abaixo, todo o sistema muda automaticamente.
  Suporta Dark Mode e Light Mode via [data-bs-theme].

  Ordem de carregamento recomendada (ver src/heads.php):
    1. Bootstrap (CDN)
    2. theme.css        <-- este arquivo (tokens)
    3. base.css         (reset + tipografia)
    4. layout.css       (shell: sidebar/navbar/footer)
    5. components.css    (botões, cards, tabelas, etc.)
    6. auth.css / dashboard.css (páginas específicas)
==================================================================
*/

/*
------------------------------------------------------------------
  1. TOKENS DE MARCA (independentes de tema)
  A cor primária é derivada de UM hue. Troque --brand-hue e toda
  a identidade acompanha. Escala gerada manualmente para controle.
------------------------------------------------------------------
*/
:root {
  /* Hue base da marca (roxo/índigo premium, estilo Linear/Clerk) */
  --brand-hue: 250;
  /* Segundo hue do gradiente. Definido explicitamente (sem calc dentro
     de hsl) para compatibilidade com navegadores mais antigos. */
  --brand-hue-2: 280;

  /* Escala da cor primária */
  --primary-50: hsl(var(--brand-hue) 100% 97%);
  --primary-100: hsl(var(--brand-hue) 95% 93%);
  --primary-200: hsl(var(--brand-hue) 92% 87%);
  --primary-300: hsl(var(--brand-hue) 90% 78%);
  --primary-400: hsl(var(--brand-hue) 88% 68%);
  --primary-500: hsl(var(--brand-hue) 84% 60%);
  --primary-600: hsl(var(--brand-hue) 80% 54%);
  --primary-700: hsl(var(--brand-hue) 74% 47%);
  --primary-800: hsl(var(--brand-hue) 70% 39%);
  --primary-900: hsl(var(--brand-hue) 66% 31%);

  /* Cor primária efetiva usada pelos componentes */
  --primary: var(--primary-600);
  --primary-hover: var(--primary-700);
  --primary-active: var(--primary-800);
  --primary-soft: hsl(var(--brand-hue) 84% 60% / 0.12);
  --primary-contrast: #ffffff;

  /* Cores semânticas (fixas entre temas, ajustadas por luminância) */
  --secondary: #64748b;
  --success: #16a34a;
  --success-soft: rgba(22, 163, 74, 0.12);
  --danger: #dc2626;
  --danger-soft: rgba(220, 38, 38, 0.12);
  --warning: #d97706;
  --warning-soft: rgba(217, 119, 6, 0.12);
  --info: #0891b2;
  --info-soft: rgba(8, 145, 178, 0.12);

  /* Gradiente da marca (usado em heros, avatares, destaques) */
  --gradient-brand: linear-gradient(135deg,
      hsl(var(--brand-hue) 84% 62%) 0%,
      hsl(var(--brand-hue-2) 80% 56%) 100%);
  --gradient-subtle: linear-gradient(135deg,
      hsl(var(--brand-hue) 84% 60% / 0.10) 0%,
      hsl(var(--brand-hue-2) 80% 56% / 0.04) 100%);

  /*
  ----------------------------------------------------------------
    2. ESCALA DE ESPAÇAMENTO (base 4px)
  ----------------------------------------------------------------
  */
  --space-1: 0.25rem;
  /* 4  */
  --space-2: 0.5rem;
  /* 8  */
  --space-3: 0.75rem;
  /* 12 */
  --space-4: 1rem;
  /* 16 */
  --space-5: 1.5rem;
  /* 24 */
  --space-6: 2rem;
  /* 32 */
  --space-7: 3rem;
  /* 48 */
  --space-8: 4rem;
  /* 64 */

  /*
  ----------------------------------------------------------------
    3. RAIOS DE BORDA
  ----------------------------------------------------------------
  */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius: 12px;
  /* padrão */
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /*
  ----------------------------------------------------------------
    4. TIPOGRAFIA
  ----------------------------------------------------------------
  */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, monospace;

  --fs-xs: 0.75rem;
  /* 12 */
  --fs-sm: 0.8125rem;
  /* 13 */
  --fs-base: 0.875rem;
  /* 14 - base do painel */
  --fs-md: 0.9375rem;
  /* 15 */
  --fs-lg: 1.0625rem;
  /* 17 */
  --fs-xl: 1.25rem;
  /* 20 */
  --fs-2xl: 1.5rem;
  /* 24 */
  --fs-3xl: 1.875rem;
  /* 30 */
  --fs-4xl: 2.25rem;
  /* 36 */

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.2;
  --lh-base: 1.5;
  --lh-relaxed: 1.7;

  /*
  ----------------------------------------------------------------
    5. TRANSIÇÕES E CAMADAS
  ----------------------------------------------------------------
  */
  --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --z-sidebar: 1030;
  --z-navbar: 1020;
  --z-dropdown: 1040;
  --z-backdrop: 1045;
  --z-offcanvas: 1050;
  --z-modal: 1055;
  --z-toast: 1080;
  --z-tooltip: 1090;

  /*
  ----------------------------------------------------------------
    6. DIMENSÕES DO LAYOUT
  ----------------------------------------------------------------
  */
  --sidebar-width: 264px;
  --sidebar-width-collapsed: 76px;
  --navbar-height: 64px;
  --content-max-width: 1440px;
}

/*
==================================================================
  7. TEMA CLARO (padrão)
==================================================================
*/
:root,
[data-bs-theme="light"] {
  color-scheme: light;

  /* Superfícies */
  --body-bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f9fafb;
  /* leve elevação/recuo */
  --surface-3: #f1f3f5;
  --sidebar-bg: #ffffff;
  --navbar-bg: rgba(255, 255, 255, 0.72);
  --card-bg: #ffffff;
  --modal-bg: #ffffff;
  --dropdown-bg: #ffffff;

  /* Texto */
  --text-color: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --text-inverse: #ffffff;
  --heading-color: #0b1220;

  /* Bordas e divisores */
  --border-color: #e6e8eb;
  --border-strong: #d4d7db;
  --divider: #eef0f2;

  /* Sombras (suaves, estilo Stripe/Vercel) */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow: 0 4px 12px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 8px 24px rgba(16, 24, 40, 0.10), 0 2px 6px rgba(16, 24, 40, 0.05);
  --shadow-lg: 0 16px 40px rgba(16, 24, 40, 0.14), 0 4px 10px rgba(16, 24, 40, 0.06);
  --shadow-primary: 0 6px 20px hsl(var(--brand-hue) 84% 50% / 0.28);

  /* Vidro (glassmorphism) */
  --glass-bg: rgba(255, 255, 255, 0.65);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-blur: 14px;

  /* Scrollbar */
  --scrollbar-thumb: #cbd0d6;
  --scrollbar-track: transparent;
}

/*
==================================================================
  8. TEMA ESCURO
==================================================================
*/
[data-bs-theme="dark"] {
  color-scheme: dark;

  /* Superfícies — body claramente mais escuro que os cards para dar elevação */
  --body-bg: #090b11;
  --surface: #161b24;
  --surface-2: #1c222d;
  --surface-3: #252c39;
  --sidebar-bg: #0d1017;
  --navbar-bg: rgba(13, 16, 23, 0.72);
  --card-bg: #161b24;
  --modal-bg: #1a2029;
  --dropdown-bg: #1c222d;

  /* Texto */
  --text-color: #e7eaf0;
  --text-secondary: #a1abbb;
  --text-muted: #6b7688;
  --text-inverse: #090b11;
  --heading-color: #f4f6fa;

  /* Bordas e divisores — mais visíveis para destacar os cards */
  --border-color: #2b3342;
  --border-strong: #3d4658;
  --divider: #222a35;

  /* Sombras (mais profundas no escuro) */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow: 0 4px 14px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.65), 0 4px 12px rgba(0, 0, 0, 0.40);
  --shadow-primary: 0 6px 24px hsl(var(--brand-hue) 84% 55% / 0.40);

  /* Vidro (glassmorphism) */
  --glass-bg: rgba(18, 22, 31, 0.62);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-blur: 16px;

  /* Primária levemente mais luminosa no escuro para contraste */
  --primary: var(--primary-500);
  --primary-hover: var(--primary-400);
  --primary-soft: hsl(var(--brand-hue) 84% 62% / 0.16);

  /* Scrollbar */
  --scrollbar-thumb: #2a3342;
  --scrollbar-track: transparent;
}