/* ============================================================================
   Conecta Fiscal — Design Tokens
   ----------------------------------------------------------------------------
   Construído 100% sobre a marca Conecta Tecnologia / Conecta Fiscal.
   Cores de marca (fixas, não inventadas):
     gradiente âmbar→coral  #FF8A2B → #FF4E42
     coral sólido           #FF5C33
     coral profundo         #E8421E
     coral linha            #FF8454
     grafite petróleo (ink) #15262E   ← base do MODO ESCURO
     slate                  #5B6E78
     slate no escuro        #8C9BA3
     papel (fundo claro)    #F7F8FA
   As rampas neutras são apenas tints/shades do mesmo matiz petróleo/papel —
   nenhuma cor de marca nova foi criada. As cores de STATUS (verde/âmbar/
   vermelho/teal) são funcionais (sistema fiscal precisa diferenciar
   autorizada / pendente / cancelada) e ficam restritas a badges e alertas.
   ============================================================================ */

:root {
  /* ---- Marca (constantes nos dois temas) ---- */
  --brand-amber: #FF8A2B;
  --brand-coral: #FF4E42;
  --brand: #FF5C33;          /* coral sólido — ação primária */
  --brand-strong: #E8421E;   /* coral profundo — hover/pressed */
  --brand-line: #FF8454;
  --brand-contrast: #FFFFFF;
  --grad-brand: linear-gradient(135deg, #FF8A2B 0%, #FF4E42 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(255,138,43,.16), rgba(255,78,66,.16));
  --grad-petrol: linear-gradient(160deg, #1A2E37 0%, #15262E 60%, #0F1E25 100%);

  /* ---- Tipografia ---- */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-display: 2.4rem;
  --fs-h1: 1.75rem;
  --fs-h2: 1.375rem;
  --fs-h3: 1.0625rem;
  --fs-body: 0.9375rem;
  --fs-sm: 0.8125rem;
  --fs-xs: 0.6875rem;
  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.55;
  --tracking-wide: 0.06em;
  --tracking-wider: 0.12em;

  /* ---- Raios (flat, discretos) ---- */
  --r-xs: 5px;
  --r-sm: 7px;
  --r-md: 9px;
  --r-lg: 12px;
  --r-xl: 14px;
  --r-2xl: 18px;
  --r-full: 999px;

  /* ---- Espaçamento ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
  --sp-9: 48px; --sp-10: 64px;

  /* ---- Layout ---- */
  --sidebar-w: 264px;
  --sidebar-w-collapsed: 76px;
  --topbar-h: 56px;
  --content-max: 1320px;

  /* ---- Movimento ---- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 360ms;

  --z-base: 1;
  --z-sticky: 50;
  --z-sidebar: 80;
  --z-topbar: 90;
  --z-overlay: 100;
  --z-modal: 110;
  --z-toast: 120;
  --z-tooltip: 130;
}

/* ============================ MODO CLARO ============================ */
:root,
[data-theme="light"] {
  color-scheme: light;

  --bg: #F7F8FA;            /* papel da marca */
  --bg-subtle: #EEF1F4;
  --bg-pattern: rgba(21, 38, 46, .035);

  --surface: #FFFFFF;
  --surface-2: #F4F6F8;
  --surface-3: #EBEFF2;     /* hover de linhas/itens */
  --surface-inset: #F7F8FA;
  --elevated: #FFFFFF;

  --border: #E4E9ED;
  --border-subtle: #EEF1F4;
  --border-strong: #D2DADF;

  --text: #15262E;          /* grafite petróleo */
  --text-secondary: #45565F;
  --text-muted: #66767F;
  --text-faint: #95A1A9;
  --text-inverse: #F7F8FA;

  --brand-soft: rgba(255, 92, 51, .10);
  --brand-soft-strong: rgba(255, 92, 51, .16);
  --brand-soft-border: rgba(255, 92, 51, .24);
  --brand-text: #D63A12;    /* coral escurecido p/ legibilidade no claro */

  /* Status — funcionais */
  --success: #1E9E5A; --success-soft: rgba(30,158,90,.12);  --success-text: #127741;
  --warning: #E07B00; --warning-soft: rgba(255,138,43,.15); --warning-text: #A85A00;
  --danger:  #E5484D; --danger-soft:  rgba(229,72,77,.12);  --danger-text:  #C12B30;
  --info:    #0E8C8C; --info-soft:    rgba(14,140,140,.12); --info-text:    #0A6E6E;

  /* Data-viz (forward de marca) */
  --viz-1: #FF6A3D;  /* coral */
  --viz-2: #FF9F45;  /* âmbar */
  --viz-3: #2E94A6;  /* teal petróleo */
  --viz-4: #5B6E78;  /* slate */
  --viz-grid: #E9EDF0;
  --viz-track: #EDF0F3;

  --shadow-xs: 0 1px 1px rgba(21,38,46,.04);
  --shadow-sm: 0 1px 2px rgba(21,38,46,.05);
  --shadow-md: 0 1px 3px rgba(21,38,46,.06);
  --shadow-lg: 0 6px 20px rgba(21,38,46,.08);
  --shadow-xl: 0 16px 44px rgba(21,38,46,.12);
  --shadow-brand: 0 1px 2px rgba(21,38,46,.10);
  --ring: 0 0 0 3px rgba(255,92,51,.18);

  --scrim: rgba(21,38,46,.42);
  --glass: rgba(255,255,255,.72);
}

/* ============================ MODO ESCURO ============================ */
[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0F1D23;            /* mesmo matiz petróleo, um tom abaixo da superfície */
  --bg-subtle: #13222B;
  --bg-pattern: rgba(255,255,255,.025);

  --surface: #15262E;       /* grafite petróleo da marca = card/sidebar/topbar */
  --surface-2: #1A2E37;
  --surface-3: #213842;     /* hover */
  --surface-inset: #102028;
  --elevated: #1C313B;

  --border: #263B45;
  --border-subtle: #1D313A;
  --border-strong: #34505B;

  --text: #F7F8FA;          /* papel sobre escuro */
  --text-secondary: #B7C3CA;
  --text-muted: #8C9BA3;    /* slate no escuro (marca) */
  --text-faint: #647680;
  --text-inverse: #15262E;

  --brand-soft: rgba(255, 122, 72, .14);
  --brand-soft-strong: rgba(255, 122, 72, .20);
  --brand-soft-border: rgba(255, 122, 72, .30);
  --brand-text: #FF9A6B;    /* coral clareado p/ legibilidade no escuro */

  --success: #34D399; --success-soft: rgba(52,211,153,.14);  --success-text: #5FE0AD;
  --warning: #FBB454; --warning-soft: rgba(255,138,43,.16);  --warning-text: #FFC079;
  --danger:  #FF6166; --danger-soft:  rgba(255,97,102,.16);  --danger-text:  #FF8E92;
  --info:    #2DD4BF; --info-soft:    rgba(45,212,191,.14);  --info-text:    #5EE6D3;

  --viz-1: #FF7A52;
  --viz-2: #FFB05E;
  --viz-3: #43C5D6;
  --viz-4: #8C9BA3;
  --viz-grid: #233843;
  --viz-track: #1E333D;

  --shadow-xs: 0 1px 1px rgba(0,0,0,.3);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 1px 3px rgba(0,0,0,.4);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.45);
  --shadow-xl: 0 18px 48px rgba(0,0,0,.55);
  --shadow-brand: 0 1px 2px rgba(0,0,0,.4);
  --ring: 0 0 0 3px rgba(255,122,72,.26);

  --scrim: rgba(5,11,14,.62);
  --glass: rgba(21,38,46,.72);
}