/* ============================================================
   Ressalva — Design Tokens
   v1.0 · setembro de 2026
   Referência completa: ../DESIGN.md
   ============================================================ */

:root {
  /* ---------- Marinho — cor da marca ---------- */
  --rs-navy-50:  #EEF3F8;
  --rs-navy-100: #D8E3EF;
  --rs-navy-200: #B0C5DC;
  --rs-navy-300: #7FA1C2;
  --rs-navy-400: #4E7BA6;
  --rs-navy-500: #2A5A88;
  --rs-navy-600: #1B4874;
  --rs-navy-700: #123A63;  /* PRIMÁRIA */
  --rs-navy-800: #0D2C4B;
  --rs-navy-900: #0A1E33;
  --rs-navy-950: #061421;

  /* ---------- Âmbar — a ressalva ---------- */
  --rs-amber-100: #F9E8C6;
  --rs-amber-300: #EDBB60;
  --rs-amber-400: #E8A33D;  /* ACENTO — forma, nunca texto em fundo claro */
  --rs-amber-500: #D18A25;
  --rs-amber-700: #8A5A12;  /* texto âmbar em fundo claro */

  /* ---------- Aço — neutros enviesados para o marinho ---------- */
  --rs-steel-0:   #FFFFFF;
  --rs-steel-50:  #F4F7F9;
  --rs-steel-100: #EAEFF4;
  --rs-steel-200: #D6DFE7;
  --rs-steel-300: #B9C6D2;
  --rs-steel-400: #94A5B4;
  --rs-steel-600: #5A6B7C;
  --rs-steel-800: #2E3A45;

  /* ---------- Papéis semânticos ---------- */
  --rs-bg:            var(--rs-steel-50);
  --rs-surface:       var(--rs-steel-0);
  --rs-surface-raised:var(--rs-steel-0);
  --rs-border:        var(--rs-steel-200);
  --rs-text:          var(--rs-navy-900);
  --rs-text-soft:     var(--rs-steel-600);
  --rs-primary:       var(--rs-navy-700);
  --rs-primary-hover: var(--rs-navy-600);
  --rs-primary-active:var(--rs-navy-800);
  --rs-accent:        var(--rs-amber-400);
  --rs-accent-text:   var(--rs-amber-700);

  /* ---------- Severidade ---------- */
  --rs-critical:      #B4402F;
  --rs-critical-bg:   #F5E4DF;
  --rs-critical-text: #B4402F;
  --rs-warning:       #E8A33D;
  --rs-warning-bg:    #F9E8C6;
  --rs-warning-text:  #8A5A12;
  --rs-ok:            #2E7D5B;
  --rs-ok-bg:         #E2F0E9;
  --rs-ok-text:       #1F5F44;
  --rs-info:          #2A5A88;
  --rs-pending:       #5A6B7C;
  --rs-pending-bg:    #EAEFF4;

  /* ---------- Tipografia ---------- */
  /* Requer fonts.css carregado antes deste arquivo.
     As famílias *Fallback* trazem métricas ajustadas — evitam o salto
     de layout enquanto a fonte real carrega. */
  --rs-font-sans: 'IBM Plex Sans', 'IBM Plex Sans Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --rs-font-mono: 'IBM Plex Mono', 'IBM Plex Mono Fallback', ui-monospace, 'SF Mono', Menlo, monospace;

  --rs-text-display: 3.5rem;
  --rs-text-h1:      2.25rem;
  --rs-text-h2:      1.75rem;
  --rs-text-h3:      1.25rem;
  --rs-text-h4:      1.0625rem;
  --rs-text-body-lg: 1.0625rem;
  --rs-text-body:    0.9375rem;
  --rs-text-sm:      0.875rem;
  --rs-text-caption: 0.8125rem;
  --rs-text-label:   0.6875rem;

  --rs-tracking-display: -0.04em;
  --rs-tracking-tight:   -0.02em;
  --rs-tracking-label:    0.12em;

  /* ---------- Espaçamento (base 4px) ---------- */
  --rs-space-1:  4px;   --rs-space-2:  8px;   --rs-space-3: 12px;
  --rs-space-4: 16px;   --rs-space-5: 20px;   --rs-space-6: 24px;
  --rs-space-8: 32px;   --rs-space-10:40px;   --rs-space-12:48px;
  --rs-space-16:64px;   --rs-space-20:80px;   --rs-space-24:96px;

  /* ---------- Raio ---------- */
  --rs-radius-sm:   4px;
  --rs-radius-md:   6px;   /* padrão */
  --rs-radius-lg:  10px;
  --rs-radius-xl:  16px;
  --rs-radius-full: 9999px;

  /* ---------- Sombra — tingida de marinho ---------- */
  --rs-shadow-sm: 0 1px 2px rgba(10,30,51,.06);
  --rs-shadow-md: 0 2px 4px rgba(10,30,51,.06), 0 8px 20px -12px rgba(10,30,51,.22);
  --rs-shadow-lg: 0 4px 8px rgba(10,30,51,.07), 0 20px 40px -20px rgba(10,30,51,.30);
  --rs-shadow-focus: 0 0 0 3px rgba(18,58,99,.22);

  /* ---------- Movimento ---------- */
  --rs-motion-fast: 120ms;
  --rs-motion-base: 180ms;
  --rs-motion-slow: 280ms;
  --rs-ease-enter: cubic-bezier(.2,.7,.3,1);
  --rs-ease-std:   cubic-bezier(.4,0,.6,1);
}

/* ============================================================
   Modo escuro — redefine APENAS os papéis semânticos.
   Nunca declare a única definição de uma cor aqui dentro.
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rs-bg:             #0B141D;
    --rs-surface:        #121D27;
    --rs-surface-raised: #18242F;
    --rs-border:         #22303D;
    --rs-text:           #E4EDF4;
    --rs-text-soft:      #93A3B2;
    --rs-primary:        #5C9BD6;
    --rs-primary-hover:  #7FB2E0;
    --rs-primary-active: #4886BF;
    --rs-accent:         #F0B75A;
    --rs-accent-text:    #F0B75A;

    --rs-critical:      #E0836F;
    --rs-critical-bg:   #2E211D;
    --rs-critical-text: #E0836F;
    --rs-warning:       #F0B75A;
    --rs-warning-bg:    #2A2618;
    --rs-warning-text:  #F0B75A;
    --rs-ok:            #5FBF95;
    --rs-ok-bg:         #17281F;
    --rs-ok-text:       #5FBF95;
    --rs-info:          #5C9BD6;
    --rs-pending:       #93A3B2;
    --rs-pending-bg:    #1B242C;

    --rs-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --rs-shadow-md: 0 2px 4px rgba(0,0,0,.35), 0 8px 20px -12px rgba(0,0,0,.6);
    --rs-shadow-lg: 0 4px 8px rgba(0,0,0,.4), 0 20px 40px -20px rgba(0,0,0,.7);
    --rs-shadow-focus: 0 0 0 3px rgba(92,155,214,.32);
  }
}

[data-theme="dark"] {
  --rs-bg:             #0B141D;
  --rs-surface:        #121D27;
  --rs-surface-raised: #18242F;
  --rs-border:         #22303D;
  --rs-text:           #E4EDF4;
  --rs-text-soft:      #93A3B2;
  --rs-primary:        #5C9BD6;
  --rs-primary-hover:  #7FB2E0;
  --rs-primary-active: #4886BF;
  --rs-accent:         #F0B75A;
  --rs-accent-text:    #F0B75A;

  --rs-critical:      #E0836F;
  --rs-critical-bg:   #2E211D;
  --rs-critical-text: #E0836F;
  --rs-warning:       #F0B75A;
  --rs-warning-bg:    #2A2618;
  --rs-warning-text:  #F0B75A;
  --rs-ok:            #5FBF95;
  --rs-ok-bg:         #17281F;
  --rs-ok-text:       #5FBF95;
  --rs-info:          #5C9BD6;
  --rs-pending:       #93A3B2;
  --rs-pending-bg:    #1B242C;

  --rs-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --rs-shadow-md: 0 2px 4px rgba(0,0,0,.35), 0 8px 20px -12px rgba(0,0,0,.6);
  --rs-shadow-lg: 0 4px 8px rgba(0,0,0,.4), 0 20px 40px -20px rgba(0,0,0,.7);
  --rs-shadow-focus: 0 0 0 3px rgba(92,155,214,.32);
}

/* ============================================================
   Base mínima — opcional, mas recomendada
   ============================================================ */

body {
  background: var(--rs-bg);
  color: var(--rs-text);
  font-family: var(--rs-font-sans);
  font-size: var(--rs-text-body);
  line-height: 1.6;
}

h1, h2, h3, h4 { font-weight: 600; letter-spacing: var(--rs-tracking-tight); text-wrap: balance; }

.rs-label {
  font-family: var(--rs-font-mono);
  font-size: var(--rs-text-label);
  letter-spacing: var(--rs-tracking-label);
  text-transform: uppercase;
  color: var(--rs-text-soft);
}

.rs-data { font-family: var(--rs-font-mono); font-variant-numeric: tabular-nums; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--rs-shadow-focus);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}