/* =========================================================================
   DESIGN TOKENS — EIA 2026
   v1.0 rebranding

   Camada 1: primitivos  (escalas cruas — NÃO usar em componentes)
   Camada 2: semânticos  (o que o componente consome)

   O tema escuro redefine APENAS a camada 2.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. PRIMITIVOS
   ------------------------------------------------------------------------- */

:root {
  /* --- Marca oficial EIA 2026: Deep Navy + Navy */
  --brand-50:  #EAF2F5; /* Off White oficial */
  --brand-100: #D1E0E6;
  --brand-200: #A9C1CC;
  --brand-300: #7A9DAD;
  --brand-400: #4D7487;
  --brand-500: #244F65;
  --brand-600: #0D354A;
  --brand-700: #062A42; /* Navy oficial */
  --brand-800: #042338;
  --brand-900: #031B2D; /* Deep Navy oficial */

  /* --- Acento oficial: EIA Cyan + Soft Cyan.
         No tema claro, o texto usa os tons 700–900 para manter AA. */
  --accent-50:  #E8FBFD;
  --accent-100: #C7F5F8;
  --accent-200: #91EAF1;
  --accent-300: #35C7D8; /* Soft Cyan oficial */
  --accent-400: #16D7E8; /* EIA Cyan oficial */
  --accent-500: #0EB9CA;
  --accent-600: #078A97;
  --accent-700: #08606A;
  --accent-800: #074B54;
  --accent-900: #05373E;

  /* --- Neutros frios; gray-50 e gray-500 ancoram Off White e Slate oficiais */
  --gray-0:   #FFFFFF;
  --gray-25:  #F5F9FA;
  --gray-50:  #EAF2F5;
  --gray-100: #DDE8EC;
  --gray-200: #C8D7DD;
  --gray-300: #A9BDC6;
  --gray-400: #879DA8;
  --gray-500: #6F8794; /* Slate oficial */
  --gray-600: #405A68;
  --gray-700: #263F4D;
  --gray-800: #102F42;
  --gray-850: #09263A;
  --gray-900: #062A42;
  --gray-950: #031B2D;

  /* --- Sucesso */
  --green-50:  #E8F7EE;
  --green-300: #6EDBA0;
  --green-500: #1E9E5E;
  --green-700: #116A3E;
  --green-900: #0A3F25;

  /* --- Atenção */
  --amber-50:  #FFF6E3;
  --amber-300: #F2C15B;
  --amber-500: #C88500;
  --amber-700: #8A5300;
  --amber-900: #4D2F00;

  /* --- Erro */
  --red-50:  #FDECEA;
  --red-300: #FF9A93;
  --red-500: #C0332B;
  --red-600: #C0332B;
  --red-700: #B3261E;
  --red-900: #611410;

  /* --- Informação */
  --cyan-50:  #E6F5FA;
  --cyan-300: #7FD2EC;
  --cyan-500: #0E7A9E;
  --cyan-700: #0A5A75;
  --cyan-900: #06364A;

  /* --- Roxo (usado só por categorias/tags de CRM, nunca como acento de UI) */
  --violet-50:  #F1EDFD;
  --violet-300: #BCA6F5;
  --violet-500: #6D48C9;
  --violet-700: #4E3193;

  /* ---------------------------------------------------------------------
     TIPOGRAFIA
     --------------------------------------------------------------------- */
  --font-ui: "Manrope", "Inter", "Montserrat", "Segoe UI", system-ui, sans-serif;
  --font-body: "Manrope", "Inter", "Montserrat", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;

  --fs-2xs: 0.6875rem; /* 11px — badges, sobrescritos */
  --fs-xs:  0.75rem;   /* 12px — rótulos, células densas */
  --fs-sm:  0.8125rem; /* 13px — tabela, texto auxiliar */
  --fs-base:0.875rem;  /* 14px — corpo padrão do app */
  --fs-md:  1rem;      /* 16px — corpo em leitura longa, inputs */
  --fs-lg:  1.125rem;  /* 18px — título de card */
  --fs-xl:  1.375rem;  /* 22px — título de seção */
  --fs-2xl: 1.75rem;   /* 28px — título de página */
  --fs-3xl: 2.25rem;   /* 36px — número de destaque em dashboard */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --ls-tight: 0;
  --ls-normal: 0;
  --ls-wide: 0.02em;
  --ls-caps: 0.06em;

  /* ---------------------------------------------------------------------
     ESPAÇAMENTO — base 4px
     --------------------------------------------------------------------- */
  --space-0: 0;
  --space-1: 0.25rem;  /*  4px */
  --space-2: 0.5rem;   /*  8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
  --space-20: 5rem;    /* 80px */

  /* ---------------------------------------------------------------------
     RAIOS
     --------------------------------------------------------------------- */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------------------
     BORDAS
     --------------------------------------------------------------------- */
  --border-width: 1px;
  --border-width-strong: 2px;

  /* ---------------------------------------------------------------------
     LAYOUT
     --------------------------------------------------------------------- */
  --sidebar-width: 248px;
  --sidebar-width-collapsed: 64px;
  --topbar-height: 56px;
  --container-max: 1440px;
  --container-form: 720px;
  --control-height-sm: 30px;
  --control-height-md: 38px;
  --control-height-lg: 46px;
  --tap-target-min: 44px;

  /* ---------------------------------------------------------------------
     Z-INDEX
     --------------------------------------------------------------------- */
  --z-base: 0;
  --z-sticky: 100;
  --z-sidebar: 200;
  --z-topbar: 300;
  --z-dropdown: 400;
  --z-overlay: 500;
  --z-modal: 510;
  --z-toast: 600;
  --z-tooltip: 700;

  /* ---------------------------------------------------------------------
     MOVIMENTO
     --------------------------------------------------------------------- */
  --duration-instant: 80ms;
  --duration-fast: 140ms;
  --duration-normal: 220ms;
  --duration-slow: 360ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
}

/* -------------------------------------------------------------------------
   2. SEMÂNTICOS — TEMA CLARO (alternativo)
   ------------------------------------------------------------------------- */

:root,
[data-theme="light"] {
  color-scheme: light;

  /* Superfícies */
  --color-canvas:          var(--gray-50);   /* Off White oficial */
  --color-surface:         var(--gray-0);    /* cards, tabelas, painéis */
  --color-surface-sunken:  var(--gray-100);  /* áreas recuadas, thead */
  --color-surface-raised:  var(--gray-0);    /* dropdown, modal, popover */
  --color-surface-hover:   var(--gray-50);
  --color-surface-active:  var(--gray-100);
  --color-surface-inverse: var(--gray-900);

  /* Texto */
  --color-text-primary:   var(--gray-900);
  --color-text-secondary: var(--gray-600);
  --color-text-muted:     var(--gray-600);
  --color-text-inverse:   var(--gray-0);
  --color-text-on-action: var(--gray-0);
  --color-text-disabled:  var(--gray-400);
  --color-text-link:      var(--accent-700); /* cyan escurecido: AA no claro */

  /* Bordas */
  --color-border:         var(--gray-200);   /* divisórias, não interativas */
  --color-border-subtle:  var(--gray-100);
  --color-border-strong:  var(--gray-500);   /* contorno de controle (3:1) */
  --color-border-inverse: var(--gray-700);

  /* Ação primária */
  --color-action:            var(--accent-700);
  --color-action-hover:      var(--accent-800);
  --color-action-active:     var(--accent-900);
  --color-action-subtle:     var(--accent-50);
  --color-action-subtle-fg:  var(--accent-700);
  --color-action-border:     var(--accent-700);

  /* Foco */
  --color-focus-ring: var(--accent-700);
  --focus-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-focus-ring);

  /* Status — fundo suave / texto / borda / sólido */
  --color-success-bg:     var(--green-50);
  --color-success-fg:     var(--green-700);
  --color-success-border: var(--green-500);
  --color-success-solid:  var(--green-700);

  --color-warning-bg:     var(--amber-50);
  --color-warning-fg:     var(--amber-700);
  --color-warning-border: var(--amber-500);
  --color-warning-solid:  var(--amber-700);

  --color-danger-bg:      var(--red-50);
  --color-danger-fg:      var(--red-700);
  --color-danger-border:  var(--red-500);
  --color-danger-solid:   var(--red-600);

  --color-info-bg:        var(--cyan-50);
  --color-info-fg:        var(--cyan-700);
  --color-info-border:    var(--cyan-500);
  --color-info-solid:     var(--cyan-700);

  --color-neutral-bg:     var(--gray-100);
  --color-neutral-fg:     var(--gray-700);
  --color-neutral-border: var(--gray-300);

  /* Domínio: estados de veículo no estoque */
  --color-vehicle-available: var(--green-700);
  --color-vehicle-reserved:  var(--amber-700);
  --color-vehicle-sold:      var(--gray-500);
  --color-vehicle-pending:   var(--cyan-700);
  --color-vehicle-blocked:   var(--red-700);

  /* Domínio: financeiro */
  --color-finance-positive: var(--green-700);
  --color-finance-negative: var(--red-700);
  --color-finance-neutral:  var(--gray-600);

  /* Formulário */
  --color-field-bg:          var(--gray-0);
  --color-field-border:      var(--gray-500);
  --color-field-border-hover:var(--gray-600);
  --color-field-placeholder: var(--gray-600);
  --color-field-disabled-bg: var(--gray-100);

  /* Navegação — Deep Navy + EIA Cyan */
  --color-nav-bg:          var(--brand-900);
  --color-nav-fg:          var(--brand-100);
  --color-nav-fg-active:   var(--gray-0);
  --color-nav-item-active: var(--brand-700);
  --color-nav-accent:      var(--accent-400);

  /* Sombras (tema claro usa sombra real) */
  --shadow-xs: 0 1px 2px rgba(3, 27, 45, 0.07);
  --shadow-sm: 0 1px 3px rgba(3, 27, 45, 0.09), 0 1px 2px rgba(3, 27, 45, 0.05);
  --shadow-md: 0 4px 12px rgba(3, 27, 45, 0.12), 0 1px 3px rgba(3, 27, 45, 0.07);
  --shadow-lg: 0 12px 32px rgba(3, 27, 45, 0.16), 0 2px 8px rgba(3, 27, 45, 0.08);
  --shadow-overlay: 0 24px 64px rgba(3, 27, 45, 0.28);
  --shadow-brand-glow: 0 0 0 1px rgba(22, 215, 232, 0.22), 0 8px 28px rgba(22, 215, 232, 0.08);
  --color-overlay: rgba(3, 27, 45, 0.58);
}

/* -------------------------------------------------------------------------
   3. SEMÂNTICOS — TEMA ESCURO
   ------------------------------------------------------------------------- */

[data-theme="dark"] {
  color-scheme: dark;

  --color-canvas:          var(--gray-950);
  --color-surface:         var(--gray-850);
  --color-surface-sunken:  var(--gray-900);
  --color-surface-raised:  var(--gray-800);
  --color-surface-hover:   #0D354A;
  --color-surface-active:  #123E53;
  --color-surface-inverse: var(--gray-50);

  --color-text-primary:   var(--gray-50);
  --color-text-secondary: #B5C7CF;
  --color-text-muted:     #8FA7B2;
  --color-text-inverse:   var(--gray-900);
  --color-text-on-action: var(--gray-950);
  --color-text-disabled:  var(--gray-500);
  --color-text-link:      var(--accent-400);

  --color-border:         #26495A;
  --color-border-subtle:  #173A4C;
  --color-border-strong:  var(--gray-400);
  --color-border-inverse: var(--gray-200);

  --color-action:            var(--accent-400);
  --color-action-hover:      var(--accent-300);
  --color-action-active:     var(--accent-200);
  --color-action-subtle:     rgba(22, 215, 232, 0.12);
  --color-action-subtle-fg:  var(--accent-400);
  --color-action-border:     var(--accent-400);

  --color-focus-ring: var(--accent-400);
  --focus-ring: 0 0 0 2px var(--color-canvas), 0 0 0 4px var(--color-focus-ring);

  --color-success-bg:     rgba(110, 219, 160, 0.14);
  --color-success-fg:     var(--green-300);
  --color-success-border: var(--green-500);
  --color-success-solid:  var(--green-300);

  --color-warning-bg:     rgba(242, 193, 91, 0.14);
  --color-warning-fg:     var(--amber-300);
  --color-warning-border: var(--amber-500);
  --color-warning-solid:  var(--amber-300);

  --color-danger-bg:      rgba(255, 154, 147, 0.14);
  --color-danger-fg:      var(--red-300);
  --color-danger-border:  var(--red-500);
  --color-danger-solid:   var(--red-300);

  --color-info-bg:        rgba(127, 210, 236, 0.14);
  --color-info-fg:        var(--cyan-300);
  --color-info-border:    var(--cyan-500);
  --color-info-solid:     var(--cyan-300);

  --color-neutral-bg:     #123E53;
  --color-neutral-fg:     #C8D7DD;
  --color-neutral-border: #35596A;

  --color-vehicle-available: var(--green-300);
  --color-vehicle-reserved:  var(--amber-300);
  --color-vehicle-sold:      #8A94A3;
  --color-vehicle-pending:   var(--cyan-300);
  --color-vehicle-blocked:   var(--red-300);

  --color-finance-positive: var(--green-300);
  --color-finance-negative: var(--red-300);
  --color-finance-neutral:  #A3AEBD;

  --color-field-bg:          var(--gray-900);
  --color-field-border:      var(--gray-400);
  --color-field-border-hover:#6F8794;
  --color-field-placeholder: #8FA7B2;
  --color-field-disabled-bg: #082236;

  --color-nav-bg:          var(--brand-900);
  --color-nav-fg:          var(--brand-200);
  --color-nav-fg-active:   #EEF1F5;
  --color-nav-item-active: var(--brand-800);
  --color-nav-accent:      var(--accent-400);

  /* No escuro, elevação vem de superfície + borda; sombra apenas em overlays */
  --shadow-xs: none;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-overlay: 0 24px 64px rgba(0, 0, 0, 0.7);
  --color-overlay: rgba(0, 0, 0, 0.66);
}

/* Sem escolha explícita do usuário, segue o sistema operacional. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --color-canvas: var(--gray-950);
    --color-surface: var(--gray-850);
    --color-surface-sunken: var(--gray-900);
    --color-surface-raised: var(--gray-800);
    --color-surface-hover: #0D354A;
    --color-surface-active: #123E53;
    --color-surface-inverse: var(--gray-50);
    --color-text-primary: var(--gray-50);
    --color-text-secondary: #B5C7CF;
    --color-text-muted: #8FA7B2;
    --color-text-inverse: var(--gray-900);
    --color-text-on-action: var(--gray-950);
    --color-text-disabled: var(--gray-500);
    --color-text-link: var(--accent-400);
    --color-border: #26495A;
    --color-border-subtle: #173A4C;
    --color-border-strong: var(--gray-400);
    --color-action: var(--accent-400);
    --color-action-hover: var(--accent-300);
    --color-action-active: var(--accent-200);
    --color-action-subtle: rgba(22, 215, 232, 0.12);
    --color-action-subtle-fg: var(--accent-400);
    --color-focus-ring: var(--accent-400);
    --color-success-bg: rgba(110, 219, 160, 0.14);
    --color-success-fg: var(--green-300);
    --color-warning-bg: rgba(242, 193, 91, 0.14);
    --color-warning-fg: var(--amber-300);
    --color-danger-bg: rgba(255, 154, 147, 0.14);
    --color-danger-fg: var(--red-300);
    --color-info-bg: rgba(127, 210, 236, 0.14);
    --color-info-fg: var(--cyan-300);
    --color-neutral-bg: #123E53;
    --color-neutral-fg: #C8D7DD;
    --color-field-bg: var(--gray-900);
    --color-field-border: var(--gray-400);
    --color-field-placeholder: #8FA7B2;
    --color-field-disabled-bg: #082236;
    --color-overlay: rgba(3, 27, 45, 0.74);
  }
}

/* -------------------------------------------------------------------------
   4. PREFERÊNCIAS DO USUÁRIO
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
  }
}

@media (prefers-contrast: more) {
  :root {
    --color-border: var(--gray-400);
    --color-border-strong: var(--gray-700);
    --color-text-secondary: var(--gray-700);
    --border-width: 1px;
  }
}