/* =====================================================================
   PORTAL DO CONSELHO PLENO — OAB PARÁ
   Camada 1: Tokens de design

   As cores institucionais vêm do Manual de Identidade Visual da OAB
   Nacional: azul Pantone 301C (RGB 0/53/82 na versão composta) e
   vermelho Pantone 200C (RGB 215/25/32). A tipografia oficial é a
   família Barlow — disponível no Google Fonts, o que evita depender
   de fonte licenciada em hospedagem compartilhada.

   Nada de cor solta no CSS de componentes: tudo referencia estes tokens.
   Trocar a paleta inteira é editar este arquivo.
   ===================================================================== */

:root {
  /* ---------- Marca institucional ---------- */
  --oab-blue-900: #002133;
  --oab-blue-800: #003552;   /* azul institucional principal */
  --oab-blue-700: #004670;
  --oab-blue-600: #005a8f;
  --oab-blue-500: #0a6fa8;
  --oab-blue-300: #6ba8cc;
  --oab-blue-100: #dbeaf4;
  --oab-blue-50:  #f0f6fa;

  --oab-red-700:  #910d11;
  --oab-red-600:  #b31419;
  --oab-red-500:  #d71920;   /* vermelho institucional */
  --oab-red-100:  #fbe3e4;
  --oab-red-50:   #fdf2f2;

  /* ---------- Neutros quentes ----------
     Cinzas puros dão ar de dashboard genérico. Um leve viés quente
     aproxima do papel — mais adequado a um ambiente jurídico. */
  --neutral-950: #17171a;
  --neutral-900: #1f2024;
  --neutral-800: #2e3036;
  --neutral-700: #43464e;
  --neutral-600: #5b5f68;
  --neutral-500: #787c86;
  --neutral-400: #a1a5ad;
  --neutral-300: #c8cbd1;
  --neutral-200: #e2e4e8;
  --neutral-150: #ebedf0;
  --neutral-100: #f2f3f5;
  --neutral-50:  #f8f9fa;
  --white:       #ffffff;

  /* ---------- Estados semânticos ---------- */
  --success-700: #12603c;
  --success-600: #16794b;
  --success-500: #1d9660;
  --success-100: #dcf3e8;
  --success-50:  #f0faf5;

  --warning-700: #8a5300;
  --warning-600: #a86800;
  --warning-500: #c98a11;
  --warning-100: #fdf0d5;
  --warning-50:  #fefaf0;

  --danger-700:  var(--oab-red-700);
  --danger-600:  var(--oab-red-600);
  --danger-500:  var(--oab-red-500);
  --danger-100:  var(--oab-red-100);
  --danger-50:   var(--oab-red-50);

  --info-700:    #1e4d8c;
  --info-600:    #2563ac;
  --info-500:    #3480cc;
  --info-100:    #dfeaf7;
  --info-50:     #f2f7fc;

  /* ---------- Papéis semânticos ---------- */
  --bg-app:        #f4f5f7;
  --bg-surface:    var(--white);
  --bg-sunken:     var(--neutral-100);
  --bg-inverse:    var(--oab-blue-900);
  --bg-hover:      var(--neutral-50);
  --bg-selected:   var(--oab-blue-50);

  --text-primary:   var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-muted:     var(--neutral-500);
  --text-inverse:   var(--white);
  --text-brand:     var(--oab-blue-800);

  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-400);
  --border-brand:   var(--oab-blue-800);

  --accent:         var(--oab-blue-800);
  --accent-hover:   var(--oab-blue-700);
  --accent-active:  var(--oab-blue-900);
  --accent-soft:    var(--oab-blue-50);

  /* ---------- Tipografia ----------
     Barlow Semi Condensed nos títulos: economiza largura horizontal em
     tabelas densas de processos sem perder legibilidade. Barlow no corpo. */
  --font-display: 'Barlow Semi Condensed', 'Barlow', -apple-system, BlinkMacSystemFont,
                  'Segoe UI', Roboto, sans-serif;
  --font-body:    'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                  Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'SFMono-Regular', 'Roboto Mono', Consolas, 'Liberation Mono', monospace;

  /* Escala tipográfica — razão 1.20 (menor terça), adequada a interface densa */
  --text-2xs: 0.6875rem;  /* 11px — metadados, rótulos de tabela */
  --text-xs:  0.75rem;    /* 12px */
  --text-sm:  0.8125rem;  /* 13px — texto de apoio */
  --text-md:  0.9375rem;  /* 15px — corpo padrão */
  --text-lg:  1.0625rem;  /* 17px */
  --text-xl:  1.25rem;    /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */
  --text-5xl: 3rem;       /* 48px — telão */
  --text-6xl: 4rem;       /* 64px — telão */

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.55;
  --leading-loose:  1.7;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --tracking-tight: -0.011em;
  --tracking-wide:  0.02em;
  --tracking-caps:  0.06em;

  /* ---------- Espaçamento (base 4px) ---------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ---------- Raio ----------
     Conservador de propósito: cantos muito arredondados leem como app
     de consumo, não como sistema institucional. */
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 999px;

  /* ---------- Elevação ----------
     Sombras discretas e de baixo contraste — a hierarquia vem da borda
     e do espaçamento, não de sombra pesada. */
  --shadow-xs: 0 1px 2px rgba(23, 23, 26, 0.05);
  --shadow-sm: 0 1px 3px rgba(23, 23, 26, 0.07), 0 1px 2px rgba(23, 23, 26, 0.04);
  --shadow-md: 0 4px 12px rgba(23, 23, 26, 0.08), 0 1px 3px rgba(23, 23, 26, 0.04);
  --shadow-lg: 0 12px 28px rgba(23, 23, 26, 0.12), 0 2px 6px rgba(23, 23, 26, 0.05);
  --shadow-focus: 0 0 0 3px rgba(0, 90, 143, 0.28);

  /* ---------- Layout ---------- */
  --sidebar-width: 254px;
  --topbar-height: 60px;
  --content-max: 1560px;

  /* ---------- Movimento ----------
     Curto e discreto. Sistema institucional não precisa de animação vistosa. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;

  --z-dropdown: 100;
  --z-sticky:   200;
  --z-drawer:   300;
  --z-overlay:  400;
  --z-toast:    500;
}

/* ---------------------------------------------------------------------
   Respeita quem pediu menos movimento no sistema operacional.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------
   Alto contraste: reforça bordas para quem usa o modo do sistema.
   --------------------------------------------------------------------- */
@media (prefers-contrast: more) {
  :root {
    --border-subtle:  var(--neutral-400);
    --border-default: var(--neutral-500);
    --text-secondary: var(--neutral-800);
    --text-muted:     var(--neutral-700);
  }
}

/* =====================================================================
   MODO ESCURO — opt-in via <html data-theme="dark">
   Só reescreve os papéis semânticos; os primitivos da marca (azul/vermelho
   OAB) permanecem. A sidebar continua no azul institucional.
   ===================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg-app:        #0e151c;
  --bg-surface:    #16202b;
  --bg-sunken:     #101a23;
  --bg-inverse:    #0a1219;
  --bg-hover:      rgba(255, 255, 255, 0.06);
  --bg-selected:   #16324a;

  --text-primary:   #e7edf3;
  --text-secondary: #aab5c1;
  --text-muted:     #7f8b98;
  --text-inverse:   #0e151c;
  --text-brand:     #6ba8cc;

  --border-subtle:  #223040;
  --border-default: #2f3f52;
  --border-strong:  #3d5064;
  --border-brand:   #6ba8cc;

  --accent:         #4a9fd4;
  --accent-hover:   #6bb4e0;
  --accent-active:  #8ac6ea;
  --accent-soft:    #16324a;

  /* Estados suaves: fundo escurece, texto clareia — mantém contraste. */
  --success-700: #6ee3a3; --success-100: #14301f; --success-50: #0f2318;
  --warning-700: #ebc264; --warning-100: #33280f; --warning-50: #241c0e;
  --danger-700:  #ef8b8f; --danger-100:  #3a181b; --danger-50:  #2a1315;
  --info-700:    #7bb8ea; --info-100:    #16304a; --info-50:    #12202f;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-focus: 0 0 0 3px rgba(74, 159, 212, 0.4);
}