/* =============================================================
   Soares Picon Advogados — Colors & Type Tokens
   Derived from the Plataforma de Inteligência Jurídica frontend
   (sp-consultas · frontend/src/index.css) and the brand's printed
   identity. Use these as the single source of truth when
   designing SP artifacts.
   ============================================================= */

/* ---------- Webfonts ------------------------------------------
   OFFICIAL typography per the 2019 brand manual: DINPro Light /
   Medium / Bold. DIN Pro is a licensed Monotype family and CANNOT
   be distributed on the public web. The closest open-source match
   is Barlow (Jeremy Tribby, Google Fonts) — a humanist grotesque
   with the same squarish terminals, wide uppercase, and low
   x-height as DIN Pro. When DIN Pro is installed locally (e.g.
   authenticated internal apps), it is preferred automatically
   via the font stack below. JetBrains Mono is kept for code/IDs
   only — the manual itself is silent on monospace.
   -------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---------- DIN Pro (official) — drop-in upgrade -------------
   Upload the licensed OTFs to fonts/ and every artifact in this
   project switches from Barlow to DIN Pro automatically (the
   stacks below already prefer it). Files expected:
   fonts/DINPro-Light.otf · -Regular.otf · -Medium.otf · -Bold.otf */
@font-face {
  font-family: 'DIN Pro';
  src: url('fonts/DINPro-Light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DIN Pro';
  src: url('fonts/DINPro-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DIN Pro';
  src: url('fonts/DINPro-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DIN Pro';
  src: url('fonts/DINPro-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* --- Brand blues — OFFICIAL per Manual 2019 ----------------
     Primary:   PANTONE 300 C  #005AA9  (CMYK 100/60/0/0)
     Secondary: PANTONE 299 C  #44ACE1  (CMYK 65/15/0/0)
     Additional ink / surface tints are derived from those two. */
  --sp-blue-brand:      #005AA9;  /* OFFICIAL primary (PANTONE 300 C) */
  --sp-blue-accent:     #44ACE1;  /* OFFICIAL secondary (PANTONE 299 C) */

  --sp-blue-ink:        #003E74;  /* Darker tint of 300 — H1 / display ink on light */
  --sp-blue-dark:       #004A8C;  /* Between ink and brand — hover / pressed */
  --sp-blue:            #005AA9;  /* Alias of brand primary — used in UI */
  --sp-blue-light:      #44ACE1;  /* Alias of brand accent — used in UI */
  --sp-blue-lighter:    #A8D5F0;  /* Tint of secondary for badges */
  --sp-blue-50:         #E7F2FA;  /* Pill / chip background — tint of secondary */
  --sp-navy-deep:       #08162B;  /* App chrome: sidebar, login institutional panel */

  /* --- Neutrals — warm slate, not pure gray ---------------- */
  --sp-ink:             #1F2937;  /* Body copy on light       */
  --sp-text:            #4A4A4A;  /* Body copy                */
  --sp-gray:            #6F6F6F;  /* OFFICIAL gray — PANTONE 424 C (CMYK 0/0/0/70) */
  --sp-gray-400:        #9CA3AF;
  --sp-gray-300:        #D1D5DB;
  --sp-gray-200:        #E5E7EB;  /* Default border           */
  --sp-gray-100:        #F3F4F6;
  --sp-gray-50:         #F8F9FA;  /* Page bg (light)          */
  --sp-white:           #FFFFFF;

  /* --- Dark-mode surfaces ---------------------------------- */
  --sp-slate-900:       #0F172A;  /* Main bg (dark)           */
  --sp-slate-800:       #1E293B;  /* Surface (dark)           */
  --sp-slate-700:       #334155;  /* Elevated / border (dark) */
  --sp-slate-600:       #475569;
  --sp-slate-400:       #94A3B8;  /* Secondary text (dark)    */
  --sp-slate-200:       #E2E8F0;

  /* --- Semantic signal colors — used sparingly, as SIGNAL --- */
  --sp-success-bg:      #D1FAE5;
  --sp-success-fg:      #047857;
  --sp-success-border:  #A7F3D0;

  --sp-warn-bg:         #FEF3C7;
  --sp-warn-fg:         #92400E;
  --sp-warn-border:     #FDE68A;

  --sp-danger-bg:       #FEE2E2;
  --sp-danger-fg:       #B91C1C;
  --sp-danger-border:   #FECACA;

  --sp-info-bg:         #DBEAFE;
  --sp-info-fg:         #1D4ED8;
  --sp-info-border:     #BFDBFE;

  --sp-neutral-bg:      #F3F4F6;
  --sp-neutral-fg:      #4B5563;

  /* --- Audit / validation palette (from audit/StatusBadge) - */
  --sp-validacao-correta:  var(--sp-success-fg);
  --sp-validacao-errada:   var(--sp-danger-fg);
  --sp-validacao-ajustado: var(--sp-blue-dark);
  --sp-validacao-ignorar:  var(--sp-gray);

  /* --- Foreground / background roles ----------------------- */
  --fg-1: var(--sp-ink);        /* Primary text            */
  --fg-2: var(--sp-text);       /* Body                    */
  --fg-3: var(--sp-gray);       /* Secondary / meta        */
  --fg-4: var(--sp-gray-400);   /* Placeholder / disabled  */
  --fg-brand: var(--sp-blue-brand);
  --fg-on-brand: var(--sp-white);

  --bg-page:    var(--sp-gray-50);
  --bg-surface: var(--sp-white);
  --bg-raised:  var(--sp-white);
  --bg-muted:   var(--sp-gray-100);
  --bg-pill:    var(--sp-blue-50);

  --border-1: var(--sp-gray-200);
  --border-2: var(--sp-gray-300);
  --border-brand: var(--sp-blue);
  --focus-ring: rgba(0, 90, 169, 0.22);  /* PANTONE 300 C @ 22% */

  /* --- Typography families --------------------------------- */
  /* Font stacks prefer DIN Pro if locally installed, then
     fall back to Barlow (closest open-source humanist grotesque). */
  --font-sans:    'DIN Pro', 'DINPro', 'Barlow', 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-display: 'DIN Pro', 'DINPro', 'Barlow', 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Consolas, 'Liberation Mono', monospace;

  /* --- Type scale (editorial-ish; calibrated for legal reading) */
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;
  --text-4xl:  48px;
  --text-5xl:  64px;

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;  /* for long-form reading (DIN Pro Light) */

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;   /* ADVOGADOS wordmark */
  --tracking-widest: 0.14em;   /* caps eyebrow       */

  /* --- Spacing (4-point grid) ------------------------------ */
  --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;

  /* --- Radii — calm, not playful -------------------------- */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  8px;   /* default */
  --radius-lg:  12px;  /* cards   */
  --radius-xl:  16px;  /* modals / chat bubbles */
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* --- Elevation ------------------------------------------- */
  --shadow-xs: 0 1px 0 rgba(15, 58, 98, 0.04);
  --shadow-sm: 0 1px 2px rgba(15, 58, 98, 0.06), 0 1px 1px rgba(15, 58, 98, 0.04);
  --shadow-md: 0 4px 10px -2px rgba(15, 58, 98, 0.08), 0 2px 4px -1px rgba(15, 58, 98, 0.05);
  --shadow-lg: 0 12px 28px -8px rgba(15, 58, 98, 0.18), 0 4px 8px -2px rgba(15, 58, 98, 0.08);
  --shadow-xl: 0 24px 48px -12px rgba(15, 58, 98, 0.28);
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  /* --- Motion — restrained, professional ------------------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1); /* @kind other */
  --duration-fast: 120ms; /* @kind other */
  --duration-base: 180ms; /* @kind other */
  --duration-slow: 240ms; /* @kind other */

  /* --- Brand gradient (login splash; used sparingly) ------- */
  --sp-gradient-brand: linear-gradient(135deg, var(--sp-blue-dark) 0%, var(--sp-blue) 100%);
}

/* ---------- Dark-mode role remap --------------------------- */
.dark, [data-theme="dark"] {
  --fg-1: #F1F5F9;
  --fg-2: #E2E8F0;
  --fg-3: var(--sp-slate-400);
  --fg-4: #64748B;

  --bg-page:    var(--sp-slate-900);
  --bg-surface: var(--sp-slate-800);
  --bg-raised:  var(--sp-slate-700);
  --bg-muted:   #0B1220;
  --bg-pill:    rgba(68, 172, 225, 0.15);

  --border-1: var(--sp-slate-700);
  --border-2: var(--sp-slate-600);
  --fg-brand: var(--sp-blue-light);

  color-scheme: dark;
}

/* ---------- Semantic element defaults ---------------------- */
html, body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}

h1, .sp-h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
h2, .sp-h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
h3, .sp-h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--fg-1);
}
h4, .sp-h4 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--fg-1);
}

.sp-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-brand);
}

.sp-wordmark-sub {
  /* Mirrors "ADVOGADOS" under the logo */
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--sp-blue-brand);
}

p, .sp-body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-2);
}

.sp-longform, .sp-legal-read {
  /* Editorial mode for long-form legal reading — DIN Pro Light */
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--fg-1);
  max-width: 68ch;
  text-wrap: pretty;
}

.sp-meta, small, .sp-caption {
  font-size: var(--text-xs);
  color: var(--fg-3);
}

code, .sp-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-muted);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
  color: var(--fg-1);
}

.sp-citation {
  /* The inline "[1]" citation pill used in Inteligência Jurídica */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 6px;
  margin: 0 1px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  border-radius: var(--radius-full);
  background: rgba(0, 90, 169, 0.10);
  color: var(--sp-blue);
  vertical-align: super;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}
.sp-citation:hover, .sp-citation[data-active="true"] {
  background: var(--sp-blue);
  color: var(--sp-white);
}

/* ---------- Utility classes -------------------------------- */
.sp-focus-ring:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-color: var(--sp-blue); }

.sp-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}