/* ============================================================
   JurisMonitor — Cores e Tipografia
   Sistema base + variáveis semânticas
   ============================================================ */

/* Webfonts — carregados via CDN (substituir por arquivos locais
   quando disponível). Spectral = display serif jurídico, refinado.
   Manrope = sans UI, ótima legibilidade em tamanhos grandes
   (acessibilidade para advogados 60+). */
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- PALETA BASE ---------- */

  /* Marinho — cor primária da marca. Inspirado em togas e
     selos de cartório. Escala calibrada para WCAG AA. */
  --navy-50:  #F2F5FA;
  --navy-100: #DDE5F0;
  --navy-200: #B6C5DC;
  --navy-300: #7E94B5;
  --navy-400: #4A6388;
  --navy-500: #1F3D66;
  --navy-600: #14305A;  /* primário principal */
  --navy-700: #0B2545;  /* topo do gradiente, headers */
  --navy-800: #07182E;
  --navy-900: #040E1C;

  /* Ouro — acento. Discreto, usado em destaques e
     elementos premium. NUNCA fundo de botão grande. */
  --gold-50:  #FBF6E9;
  --gold-100: #F5E9C5;
  --gold-200: #EAD491;
  --gold-300: #DCBB5A;
  --gold-400: #D4A24C;  /* primário do ouro */
  --gold-500: #B5853A;
  --gold-600: #8E6627;
  --gold-700: #6B4B1A;

  /* Neutros — base creme/papel para evocar documento. */
  --ink-50:  #FAFAF7;  /* fundo geral */
  --ink-100: #F4F3EE;  /* superfícies elevadas */
  --ink-200: #E8E6DE;  /* bordas */
  --ink-300: #D2CFC3;
  --ink-400: #A8A498;
  --ink-500: #76736A;
  --ink-600: #4D4B45;
  --ink-700: #2C2B27;
  --ink-800: #1A1917;
  --ink-900: #0E0D0C;

  /* Semânticos */
  --success-50:  #ECF7EF;
  --success-500: #2F7D4A;
  --success-700: #1E5A33;

  --warning-50:  #FCF4E3;
  --warning-500: #C68A1C;
  --warning-700: #8E6011;

  --danger-50:   #FBEDED;
  --danger-500:  #B5363C;  /* "prazo vencido", crítico */
  --danger-700:  #832328;

  --info-50:     #ECF1F9;
  --info-500:    #3961AC;
  --info-700:    #243F73;

  /* ---------- VARIÁVEIS SEMÂNTICAS ---------- */

  /* Backgrounds */
  --bg-canvas:    var(--ink-50);
  --bg-surface:   #FFFFFF;
  --bg-raised:    var(--ink-100);
  --bg-sunken:    var(--ink-100);
  --bg-inverse:   var(--navy-700);

  /* Foreground / texto */
  --fg-primary:   var(--ink-800);
  --fg-secondary: var(--ink-600);
  --fg-tertiary:  var(--ink-500);
  --fg-muted:     var(--ink-400);
  --fg-disabled:  var(--ink-300);
  --fg-on-navy:   #FFFFFF;
  --fg-on-gold:   var(--navy-800);
  --fg-link:      var(--navy-600);
  --fg-link-hover: var(--navy-700);

  /* Acentos */
  --accent-primary:   var(--navy-700);
  --accent-secondary: var(--gold-400);
  --accent-hover:     var(--navy-600);
  --accent-press:     var(--navy-800);

  /* Bordas */
  --border-subtle:  var(--ink-200);
  --border-default: var(--ink-300);
  --border-strong:  var(--ink-400);
  --border-focus:   var(--navy-600);
  --border-gold:    var(--gold-400);

  /* ---------- TIPOGRAFIA ---------- */

  --font-display: "Spectral", "Source Serif Pro", Georgia, serif;
  --font-sans:    "Manrope", "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Consolas, monospace;

  /* Escala tipográfica — generosa para acessibilidade.
     Base 16px, escala 1.25 (terça maior). */
  --text-xs:    12px;   /* labels, badges, captions */
  --text-sm:    14px;   /* secundário, metadata */
  --text-base:  16px;   /* corpo padrão */
  --text-md:    18px;   /* corpo grande, preferível para 50+ */
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   30px;
  --text-3xl:   38px;
  --text-4xl:   48px;
  --text-5xl:   60px;
  --text-6xl:   76px;

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-caps:   0.08em;

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

  /* ---------- ESPAÇAMENTO ---------- */

  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---------- RAIO ---------- */

  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-2xl:  20px;
  --radius-full: 9999px;

  /* ---------- ELEVAÇÃO ---------- */

  --shadow-xs: 0 1px 2px rgba(7, 24, 46, 0.06);
  --shadow-sm: 0 1px 3px rgba(7, 24, 46, 0.08), 0 1px 2px rgba(7, 24, 46, 0.04);
  --shadow-md: 0 4px 12px rgba(7, 24, 46, 0.08), 0 2px 4px rgba(7, 24, 46, 0.04);
  --shadow-lg: 0 12px 28px rgba(7, 24, 46, 0.12), 0 4px 8px rgba(7, 24, 46, 0.06);
  --shadow-xl: 0 24px 48px rgba(7, 24, 46, 0.16), 0 8px 16px rgba(7, 24, 46, 0.08);

  /* Sombra dourada interna — usada em estados especiais */
  --shadow-gold-glow: 0 0 0 3px rgba(212, 162, 76, 0.25);
  --shadow-focus:     0 0 0 3px rgba(20, 48, 90, 0.25);

  /* ---------- TRANSIÇÕES ---------- */

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasis: cubic-bezier(0.3, 0, 0, 1);
  --ease-soft:     cubic-bezier(0.4, 0, 0.2, 1);

  --dur-fast:    140ms;
  --dur-normal:  220ms;
  --dur-slow:    320ms;
}

/* ============================================================
   ESTILOS BASE
   ============================================================ */

body {
  font-family: var(--font-sans);
  font-size:   var(--text-base);
  line-height: var(--leading-normal);
  color:       var(--fg-primary);
  background:  var(--bg-canvas);
  font-feature-settings: "kern", "liga", "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display headings — Spectral serif */
.jm-display-1, h1.display {
  font-family: var(--font-display);
  font-size:   var(--text-6xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}
.jm-display-2 {
  font-family: var(--font-display);
  font-size:   var(--text-5xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

h1, .jm-h1 {
  font-family: var(--font-display);
  font-size:   var(--text-4xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}
h2, .jm-h2 {
  font-family: var(--font-display);
  font-size:   var(--text-3xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}
h3, .jm-h3 {
  font-family: var(--font-sans);
  font-size:   var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}
h4, .jm-h4 {
  font-family: var(--font-sans);
  font-size:   var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}
h5, .jm-h5 {
  font-family: var(--font-sans);
  font-size:   var(--text-lg);
  font-weight: var(--weight-semibold);
}

/* Body */
p, .jm-body { font-size: var(--text-base); line-height: var(--leading-normal); }
.jm-body-lg { font-size: var(--text-md);  line-height: var(--leading-relaxed); }
.jm-body-sm { font-size: var(--text-sm);  line-height: var(--leading-normal); color: var(--fg-secondary); }

/* Labels e legendas */
.jm-eyebrow {
  font-family: var(--font-sans);
  font-size:   var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-secondary);
}
.jm-label {
  font-size:   var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--fg-secondary);
}
.jm-caption {
  font-size:   var(--text-xs);
  color: var(--fg-tertiary);
}

/* Mono */
code, .jm-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--ink-100);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
}

/* Link */
a {
  color: var(--fg-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(20, 48, 90, 0.25);
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--fg-link-hover); text-decoration-color: currentColor; }