/* FABIM Controle — tokens (só variáveis).
 * Ordem única e explícita das camadas de cascata (spec 2026-07-17-polimento-visual):
 * a precedência deixa de depender da ordem de carregamento dos arquivos.
 * Modernização visual 2026-07: escala neutra escura + azul FABIM como acento
 * único; os nomes das variáveis são preservados para não tocar nos seletores. */
@layer tokens, base, components, views, utilities;

@layer tokens {
  :root {
    /* Escala tipográfica (6 passos) */
    --fs-1: 12px;
    --fs-2: 13px;
    --fs-3: 14px;
    --fs-4: 16px;
    --fs-5: 20px;
    --fs-6: 24px;

    /* Peso (4 passos) */
    --fw-normal: 400;
    --fw-medium: 600;
    --fw-bold: 700;
    --fw-strong: 800;

    /* Canto (3 passos) */
    --r-1: 6px;
    --r-2: 10px;
    --r-full: 999px;

    /* Espaçamento (7 passos) */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-12: 48px;

    /* Marca FABIM — azul como acento único (o bronze saiu da interface) */
    --app-navy: #0f1720;
    --app-bronze: #5b9dff;
    --app-muted: #a8b2be;
    --app-neutral: #768391;
    --app-charcoal: #1c2834;
    --app-line-strong: #38485c;
    --app-text-soft: #a8b2be;

    /* Acento FABIM (azul) */
    --accent-strong: #3b82f6;
    --accent-soft: rgba(91, 157, 255, 0.13);
    --accent-line: rgba(91, 157, 255, 0.4);

    /* Paleta operacional (escala neutra, sem azulados saturados) */
    --fabim-navy-950: #0b1118;
    --fabim-navy-900: #0d141d;
    --fabim-navy-800: #0f1720;
    --fabim-navy-700: #1c2834;
    --fabim-bronze: #5b9dff;
    --fabim-bronze-strong: #7fb3ff;
    --fabim-steel: #768391;
    --fabim-canvas: #0b1118;
    --fabim-surface: #141d27;
    --fabim-surface-raised: #18232e;
    --fabim-surface-soft: #1c2834;
    --fabim-line: rgba(168, 178, 190, 0.18);
    --fabim-line-strong: #38485c;
    --fabim-text: #f4f6f8;
    --fabim-muted: #a8b2be;
    --fabim-success: #4cc38a;
    --fabim-warning: #e3b341;
    --fabim-danger: #f07178;

    /* Fundos suaves das cores semânticas */
    --success-soft: rgba(76, 195, 138, 0.13);
    --warning-soft: rgba(227, 179, 65, 0.13);
    --danger-soft: rgba(240, 113, 120, 0.12);

    /* Estrutura do shell */
    --sidebar-width: 236px;
    --workspace-header-height: 72px;
    --content-gutter: clamp(18px, 2vw, 34px);
    --enterprise-shadow: 0 18px 45px rgba(4, 10, 18, 0.2);

    /* Aliases lidos pelo JS (app.js) e pelas regras genéricas */
    --bg: var(--fabim-canvas);
    --bg-2: #0d141d;
    --panel: var(--fabim-surface);
    --panel-2: var(--fabim-surface-soft);
    --panel-3: var(--fabim-surface-raised);
    --border: var(--fabim-line);
    --border-soft: rgba(255, 255, 255, 0.08);
    --text: var(--fabim-text);
    --muted: var(--fabim-muted);
    --accent: var(--app-bronze);
    --button-text: #ffffff;
    --chart-grid: rgba(168, 178, 190, 0.16);

    /* Linguagem glass (spec 2026-07-17-linguagem-glass) */
    --surface-glass: rgba(255, 255, 255, 0.05);
    --surface-glass-strong: rgba(255, 255, 255, 0.09);
    --border-glass: rgba(255, 255, 255, 0.14);
    --blur-1: 14px;
    --shadow-glass: 0 18px 45px rgba(4, 10, 18, 0.32);
    --shadow-glass-soft: 0 10px 30px rgba(4, 10, 18, 0.16);
    --zebra-glass: rgba(255, 255, 255, 0.035);
    --hover-glass: rgba(255, 255, 255, 0.08);
    --thead-glass: color-mix(in srgb, var(--fabim-navy-700) 84%, transparent);
    --thead-text: #c6d0dc;
    --sticky-col: var(--fabim-surface);
    --sticky-col-odd: color-mix(in srgb, var(--fabim-surface-raised) 93%, var(--fabim-navy-700));
    --sticky-col-hover: var(--fabim-surface-soft);
    --sticky-head: var(--fabim-navy-700);
  }

  html.light {
    --app-line-strong: #c2ccd8;
    --app-text-soft: #55636f;

    --accent-strong: #2f6fe0;
    --accent-soft: rgba(59, 130, 246, 0.11);
    --accent-line: rgba(59, 130, 246, 0.38);

    --fabim-navy-700: #dfe6ee;
    --fabim-bronze: #3b82f6;
    --fabim-bronze-strong: #2f6fe0;
    --fabim-canvas: #f3f5f8;
    --fabim-surface: #ffffff;
    --fabim-surface-raised: #f7f9fb;
    --fabim-surface-soft: #eef2f6;
    --fabim-line: rgba(26, 45, 65, 0.15);
    --fabim-line-strong: #c2ccd8;
    --fabim-text: #1a2432;
    --fabim-muted: #55636f;
    --fabim-success: #1f9d61;
    --fabim-warning: #b07c14;
    --fabim-danger: #d64550;
    --enterprise-shadow: 0 18px 42px rgba(26, 45, 65, 0.09);

    --success-soft: rgba(31, 157, 97, 0.12);
    --warning-soft: rgba(176, 124, 20, 0.12);
    --danger-soft: rgba(214, 69, 80, 0.1);

    --bg-2: #eceff4;
    --border-soft: rgba(16, 28, 42, 0.08);
    --muted: #55636f;
    --accent: #3b82f6;
    --button-text: #ffffff;
    --chart-grid: rgba(26, 45, 65, 0.12);

    --surface-glass: rgba(255, 255, 255, 0.55);
    --surface-glass-strong: rgba(255, 255, 255, 0.78);
    --border-glass: rgba(26, 45, 65, 0.16);
    --shadow-glass: 0 18px 42px rgba(26, 45, 65, 0.14);
    --shadow-glass-soft: 0 10px 28px rgba(26, 45, 65, 0.08);
    --zebra-glass: rgba(26, 45, 65, 0.045);
    --hover-glass: rgba(26, 45, 65, 0.09);
    --thead-glass: rgba(238, 242, 247, 0.94);
    --thead-text: #3c4c5e;
    --sticky-col: #ffffff;
    --sticky-col-odd: #f2f6fa;
    --sticky-col-hover: #e7eef6;
    --sticky-head: #dfe6ee;
  }

  @media (max-width: 1380px) {
    :root { --sidebar-width: 216px; }
  }

  /* Sem backdrop-filter: mesmas superfícies, um pouco mais opacas, sem blur. */
  @supports not (backdrop-filter: blur(1px)) {
    :root {
      --surface-glass: rgba(255, 255, 255, 0.09);
      --surface-glass-strong: rgba(255, 255, 255, 0.14);
      --thead-glass: var(--fabim-navy-700);
    }

    html.light {
      --surface-glass: rgba(255, 255, 255, 0.85);
      --surface-glass-strong: rgba(255, 255, 255, 0.96);
      --thead-glass: #eef2f7;
    }
  }
}