@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/inter-latin.woff2') format('woff2');
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   AGIAX — Design Tokens
   Camada 1: Paleta crua (valores)        → --c-*
   Camada 2: Tokens semânticos (papéis)   → reaproveitados pelo sistema todo
   Default = Agiax (azul, fonte Inter, sem serifa).
   Demais presets/ajustes são aplicados por override em runtime.
   NÃO alterar os tokens de blur nem a regra de submenu (ver style.css).
   ============================================================ */

:root {
    /* ---------- Camada 1 — Paleta global Agiax ---------- */
    --c-teal:       #085378;   /* cor de marca / CTA */
    --c-teal-dark:  #063f5c;   /* azul escuro - hover */
    --c-white:      #ffffff;   /* superfícies / cards */
    --c-canvas:     #f4f6f9;   /* canvas / fundo geral */
    --c-mist:       #f8f9fa;   /* névoa — superfície secundária / hover */
    --c-ink:        #2c3e50;   /* texto primário */
    --c-slate:      #3d4d5c;   /* texto secundário */
    --c-stone:      #6c757d;   /* texto muted / captions */
    --c-pewter:     #9aa3ab;   /* ícones sutis */
    --c-cloud:      #e9ecef;   /* bordas / divisores */
    --c-cool-stone: #dee2e6;   /* bordas fortes / nav */

    /* ============================================================
       Camada 2 — Tokens semânticos (DEFAULT = Agiax)
       ============================================================ */

    /* Primary / CTA — controlado pela personalização global */
    --primary-color: var(--c-teal);
    --primary-hover: #063f5c;
    --primary-light: color-mix(in srgb, var(--primary-color) 6%, transparent);
    --primary-focus: color-mix(in srgb, var(--primary-color) 22%, transparent);

    /* Acento cromático (links, realces, washes sutis) */
    --accent-color: var(--primary-color);
    --accent-soft:  #cfe3e4;            /* wash de fundo */
    --accent-bg:    color-mix(in srgb, var(--accent-color) 8%, transparent);

    /* Sincronizar Bootstrap com a cor primária do sistema */
    --bs-primary: var(--primary-color);
    --bs-primary-rgb: 8, 83, 120;
    --primary-rgb: var(--bs-primary-rgb);
    --bs-link-color: var(--primary-color);
    --bs-link-color-rgb: var(--bs-primary-rgb);
    --bs-link-hover-color: #063f5c;

    /* Backgrounds (Light Mode) */
    --background-color: var(--c-canvas);   /* canvas */
    --surface-color:    var(--c-white);    /* cards, modais, sidebar */
    --surface-hover:    var(--c-mist);
    --surface-2:        var(--c-mist);     /* superfície terciária (tracks, zonas muted) */
    --sidebar-bg:       var(--c-white);

    /* Text & Borders (Light Mode) */
    --text-color:     var(--c-ink);        /* texto primário */
    --text-secondary: var(--c-slate);      /* texto secundário */
    --text-muted:     var(--c-stone);      /* muted / captions */
    --text-tertiary:  var(--c-pewter);     /* ícones sutis */
    --text-inverse:   #ffffff;
    --border-color:   var(--c-cloud);      /* divisores */
    --border-strong:  var(--c-cool-stone); /* bordas fortes */

    /* Status Colors */
    --success-color: #10b981;
    --success-bg: #d1fae5;
    --success-text: #047857;

    --danger-color: #ef4444;
    --danger-bg: #fee2e2;
    --danger-text: #b91c1c;

    --warning-color: #f59e0b;
    --warning-bg: #fef3c7;
    --warning-text: #b45309;

    --info-color: #3b82f6;
    --info-bg: #dbeafe;
    --info-text: #1d4ed8;

    /* Typography
       Default Agiax: corpo/UI e títulos em Inter (sem serifa).
       Presets/ajustes podem trocar --font-family via token. */
    --font-sans:   'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-heading: var(--font-family);    /* títulos seguem o corpo */
    --font-size-base: 15px;

    /* Spacing & Layout */
    --sidebar-width: 260px;
    --header-height: 72px;
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-pill: 999px;

    /* Shadows — sistema é plano/bordado; sombras mantidas sutis */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    --shadow-focus: 0 0 0 4px var(--primary-focus);

    /* Blur (glassmorphism) — NÃO ALTERAR */
    --blur-sm: blur(12px);
    --blur-md: blur(16px);
    --blur-lg: blur(20px);

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

    /* Typography Scale */
    --text-2xs:  0.6875rem; /* 11px — micro-rótulos (badges, timestamps) */
    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 0.9375rem; /* 15px */
    --text-md:   1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.75rem;

    /* Spacing */
    --space-xs:  0.25rem;
    --space-sm:  0.5rem;
    --space-md:  1rem;
    --space-lg:  1.5rem;
    --space-xl:  2rem;

    /* Agiax UI — aliases semânticos. A escala permanece fixa mesmo quando a
       família tipográfica e a cor de marca são personalizadas. */
    --type-display-size:         var(--text-3xl);
    --type-page-title-size:      var(--text-2xl);
    --type-section-title-size:   var(--text-xl);
    --type-component-title-size: var(--text-md);
    --type-body-size:            var(--text-base);
    --type-label-size:           var(--text-sm);
    --type-caption-size:         var(--text-xs);
    --type-leading-tight:        1.2;
    --type-leading-heading:      1.3;
    --type-leading-body:         1.6;

    /* Cards continuam sendo uma linguagem central do produto. Estes tokens
       controlam a anatomia sem retirar hover, expansão ou composição. */
    --card-radius:        var(--radius-md);
    --card-border:        var(--border-color);
    --card-surface:       var(--surface-color);
    --card-surface-muted: var(--surface-2);
    --card-padding:       var(--space-lg);
    --card-gap:           var(--space-md);
    --card-action-radius: var(--btn-radius);
    --card-shadow:        var(--shadow-sm);
    --card-shadow-hover:  var(--shadow-md);
    --card-transition:    var(--transition-base);

    /* Agenda e seletores temporais seguem a Personalização global. */
    --calendar-surface:           var(--surface-color);
    --calendar-surface-muted:     var(--surface-2);
    --calendar-border:            var(--border-color);
    --calendar-text:              var(--text-color);
    --calendar-text-muted:        var(--text-muted);
    --calendar-radius:            var(--radius-md);
    --calendar-control-radius:    var(--btn-radius);
    --calendar-today-bg:          color-mix(in srgb, var(--primary-color) 8%, transparent);
    --calendar-event-radius:      var(--radius-sm);
    --date-picker-radius:         var(--radius-lg);
    --date-picker-control-radius: var(--radius-sm);
    --date-picker-action-radius:  var(--btn-radius);

    /* Status subtle backgrounds (light) */
    --success-bg-subtle: rgba(16, 185, 129, 0.10);
    --danger-bg-subtle:  rgba(239, 68, 68, 0.10);
    --warning-bg-subtle: rgba(245, 158, 11, 0.10);
    --info-bg-subtle:    rgba(59, 130, 246, 0.10);

    /* ============================================================
       Botões — tokens da camada unificada (buttons.css)
       Defaults = "cor global": cada papel segue o token semântico
       correspondente. A Personalização pode fixar qualquer um deles
       (override em runtime no :root), ex.: --btn-danger-bg: #7a1f1f.
       ============================================================ */
    --btn-radius:           var(--radius-sm);
    --btn-border-width:     1px;
    --btn-primary-bg:       var(--primary-color);
    --btn-primary-text:     #ffffff;
    --btn-primary-border:   var(--btn-primary-bg);
    --btn-secondary-bg:     var(--surface-color);
    --btn-secondary-text:   var(--text-secondary);
    --btn-secondary-border: var(--border-strong);
    --btn-danger-bg:        var(--danger-color);
    --btn-danger-text:      #ffffff;
    --btn-danger-border:    var(--btn-danger-bg);
    --btn-success-bg:       var(--success-color);
    --btn-success-text:     #ffffff;
    --btn-success-border:   var(--btn-success-bg);
    --btn-warning-bg:       var(--warning-color);
    --btn-warning-text:     #ffffff;
    --btn-warning-border:   var(--btn-warning-bg);
    --btn-info-bg:          var(--info-color);
    --btn-info-text:        #ffffff;
    --btn-info-border:      var(--btn-info-bg);
    --btn-link-color:       var(--accent-color);

    /* Sombra dos botões (personalizável). Default = sombra padrão do sistema
       (--agiax-button-shadow, definida no style.css, com variante dark). */
    --btn-shadow:       var(--agiax-button-shadow, var(--shadow-sm));
    --btn-shadow-hover: var(--agiax-button-hover-shadow, var(--shadow-md));

    /* Derivados (hover) — sempre recalculados a partir do fundo efetivo,
       então funcionam tanto com a cor global quanto com cor personalizada. */
    --btn-primary-hover-bg:   color-mix(in srgb, var(--btn-primary-bg) 86%, #000000);
    --btn-secondary-hover-bg: var(--surface-hover);
    --btn-danger-hover-bg:    color-mix(in srgb, var(--btn-danger-bg) 86%, #000000);
    --btn-success-hover-bg:   color-mix(in srgb, var(--btn-success-bg) 86%, #000000);
    --btn-warning-hover-bg:   color-mix(in srgb, var(--btn-warning-bg) 86%, #000000);
    --btn-info-hover-bg:      color-mix(in srgb, var(--btn-info-bg) 86%, #000000);
    --btn-link-hover-color:   color-mix(in srgb, var(--btn-link-color) 78%, #000000);
}

/* ============================================================
   Camada 3 — Pontes de compatibilidade (token bridges)
   Tokens legados, do Bootstrap e do painel Admin reapontados
   para os tokens semânticos. Resolve referências var() órfãs e
   faz a Personalização global alcançar a UI inteira — inclusive
   no dark mode, pois cada alvo tem override em [data-theme="dark"].
   Carrega DEPOIS do bootstrap.min.css → vence os defaults do BS.
   Não adicionar valores crus aqui: só reaproveitar tokens.
   ============================================================ */
:is(:root) {
    /* Tipografia — slots do painel (corpo/interface) seguem o corpo base */
    --font-body: var(--font-family);
    --font-ui:   var(--font-family);

    /* Texto secundário legado (.form-label e afins) */
    --secondary-color: var(--text-secondary);

    /* Raio legado → escala única do sistema */
    --border-radius:    var(--radius-sm);
    --border-radius-lg: var(--radius-lg);

    /* Superfícies legadas */
    --card-bg:        var(--surface-color);
    --surface-subtle: var(--surface-2);
    --chat-hover:     var(--surface-hover);

    /* Sincronizar Bootstrap 5 com o sistema (corrige superfícies no dark) */
    --bs-body-bg:      var(--background-color);
    --bs-body-color:   var(--text-color);
    --bs-card-bg:      var(--surface-color);
    --bs-border-color: var(--border-color);
    --bs-success:      var(--success-color);
    /* Radii do Bootstrap → escala única (unifica corners de card/modal/select) */
    --bs-border-radius:    var(--radius-sm);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-md);

    /* Painel Admin SaaS → herda do sistema (completa o refactor) */
    --admin-primary: var(--primary-color);
    --admin-surface: var(--surface-color);
    --admin-bg:      var(--background-color);
    --admin-text:    var(--text-color);
    --admin-muted:   var(--text-muted);
    --admin-border:  var(--border-color);
}

[data-theme="dark"] {
    /* Backgrounds (Dark Mode) - True Black palette */
    --background-color: #0a0a0a;        /* True black background */
    --surface-color: #111111;           /* Elevated surface - very dark */
    --surface-hover: #1a1a1a;           /* Hover state */
    --surface-2: #161616;               /* superfície terciária */
    --sidebar-bg: #0d0d0d;

    /* Glass surface variants */
    --glass-bg: rgba(255, 255, 255, 0.04);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-hover: rgba(255, 255, 255, 0.07);

    /* Text & Borders (Dark Mode) */
    --text-color: #f0f0f0;              /* Near white text */
    --text-muted: #888888;              /* Muted gray text */
    --text-secondary: #b0b0b0;          /* Secondary text */
    --text-tertiary: #6b6b6b;           /* ícones sutis */
    --text-inverse: #000000;
    --border-color: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.14);

    /* Status Colors (Dark Mode Adjustments) */
    --success-bg: rgba(16, 185, 129, 0.15);
    --success-text: #34d399;

    --danger-bg: rgba(239, 68, 68, 0.15);
    --danger-text: #f87171;

    --warning-bg: rgba(245, 158, 11, 0.15);
    --warning-text: #fbbf24;

    --info-bg: rgba(59, 130, 246, 0.15);
    --info-text: #60a5fa;

    /* Primary tweaks — acento visível sobre fundo escuro */
    --primary-color: #085378;
    --primary-hover: #0a6a98;
    --primary-light: rgba(8, 83, 120, 0.18);
    --primary-focus: rgba(8, 83, 120, 0.30);

    /* Acento cromático (links/realces) no dark */
    --accent-color: #8fb3d4;
    --accent-soft:  rgba(143, 179, 212, 0.20);
    --accent-bg:    rgba(143, 179, 212, 0.16);

    /* Sincronizar Bootstrap com a cor primária dark */
    --bs-primary: #085378;
    --bs-primary-rgb: 8, 83, 120;
    --primary-rgb: 8, 83, 120;
    --bs-link-color: #085378;
    --bs-link-color-rgb: 8, 83, 120;
    --bs-link-hover-color: #0a6a98;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.6);
    --shadow-focus: 0 0 0 4px var(--primary-focus);

    /* Recalcular aliases no próprio escopo: custom properties herdadas já
       chegam computadas do :root e não acompanham overrides intermediários. */
    --card-border:        var(--border-color);
    --card-surface:       var(--surface-color);
    --card-surface-muted: var(--surface-2);
    --card-shadow:        var(--shadow-sm);
    --card-shadow-hover:  var(--shadow-md);

    /* Glow accents */
    --glow-primary: 0 0 20px rgba(8, 83, 120, 0.18);
    --glow-surface: 0 0 0 1px rgba(255, 255, 255, 0.06);

    /* Botões — no dark o hover clareia em vez de escurecer */
    --btn-primary-hover-bg: color-mix(in srgb, var(--btn-primary-bg) 82%, #ffffff);
    --btn-danger-hover-bg:  color-mix(in srgb, var(--btn-danger-bg) 82%, #ffffff);
    --btn-success-hover-bg: color-mix(in srgb, var(--btn-success-bg) 82%, #ffffff);
    --btn-warning-hover-bg: color-mix(in srgb, var(--btn-warning-bg) 82%, #ffffff);
    --btn-info-hover-bg:    color-mix(in srgb, var(--btn-info-bg) 82%, #ffffff);
    --btn-link-hover-color: color-mix(in srgb, var(--btn-link-color) 78%, #ffffff);
}