/* ============================================================
   RIA / Briefing Jurídico — Design Tokens (fonte: claude.ai/design)
   Cópia local fiel de colors_and_type.css · NÃO editar valores aqui
   ============================================================ */
@import url('fonts/google-fonts.css');

:root {
  /* BRAND COLORS */
  --color-navy-bg:     #061A2E;
  --color-navy-deep:   #083A61;
  --color-navy-mid:    #084461;
  --color-teal:        #1D6490;
  --color-teal-dark:   #165A81;
  --color-teal-light:  #185C85;
  --color-ice:         #DCF2F7;
  --color-white:       #FFFFFF;

  --color-gray-900:    #0C1E33;
  --color-gray-800:    #132B45;
  --color-gray-700:    #1E3A56;
  --color-gray-500:    #4A6E8A;
  --color-gray-400:    #8FB3CC;
  --color-gray-300:    #C2D6E4;

  --color-surface-1:   #FFFFFF;
  --color-surface-2:   #F5F7FA;
  --color-surface-3:   #E8ECF0;
  --color-border-soft: #E2E8F0;

  --color-success:     #22C55E;
  --color-danger:      #EF4444;
  --color-warning:     #F59E0B;

  --gradient-brand:    linear-gradient(135deg, #1D6490 0%, #083A61 100%);
  --gradient-dark:     linear-gradient(180deg, #061A2E 0%, #0C2440 100%);
  --gradient-owl:      linear-gradient(180deg, #1D6490 0%, #084461 52%, #083A61 100%);
  --gradient-text:     linear-gradient(135deg, #FFFFFF 0%, #DCF2F7 100%);
  --gradient-stat:     linear-gradient(135deg, #1D6490 0%, #DCF2F7 100%);

  --bg:          var(--color-navy-bg);
  --bg-elevated: var(--color-gray-900);
  --bg-muted:    var(--color-gray-800);
  --fg:          var(--color-white);
  --fg-1:        var(--color-white);
  --fg-2:        var(--color-gray-300);
  --fg-3:        var(--color-gray-400);
  --fg-4:        var(--color-gray-500);
  --accent:      var(--color-teal);
  --accent-fg:   var(--color-ice);
  --border:      rgba(29, 100, 144, 0.15);
  --border-strong: rgba(29, 100, 144, 0.3);

  --font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'SF Mono', 'Fira Code', ui-monospace, Menlo, monospace;

  --fs-display:   4.5rem;
  --fs-h1:        3rem;
  --fs-h2:        2.25rem;
  --fs-h3:        1.5rem;
  --fs-h4:        1.125rem;
  --fs-body:      1rem;
  --fs-small:     0.875rem;
  --fs-micro:     0.75rem;
  --fs-eyebrow:   0.75rem;

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.6;
  --lh-loose:  1.9;

  --tracking-tight: -0.02em;
  --tracking-wide:  0.08em;
  --tracking-eyebrow: 0.2em;

  --fw-light: 300; --fw-regular: 400; --fw-medium: 500;
  --fw-semibold: 600; --fw-bold: 700; --fw-extra: 800; --fw-black: 900;

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem;
  --space-7: 3rem; --space-8: 4rem; --space-9: 6rem;

  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
  --radius-xl: 24px; --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 24px rgba(29, 100, 144, 0.2);
  --shadow-lg: 0 8px 32px rgba(29, 100, 144, 0.4);
  --shadow-xl: 0 40px 80px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 60px rgba(29, 100, 144, 0.3);

  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:     150ms;
  --dur-base:     300ms;
  --dur-slow:     600ms;
}

html { font-size: 16px; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-teal);
}

.h-display, h1.display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(2.5rem, 5vw, var(--fs-display));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  background: var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

h1 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(2rem, 4vw, var(--fs-h1)); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h2); line-height: var(--lh-snug); }
h3 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-h4); line-height: var(--lh-snug); }

p, .body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--fg-2); }
.lede { font-size: 1.15rem; line-height: var(--lh-loose); color: var(--fg-2); }
.small { font-size: var(--fs-small); }
.micro { font-size: var(--fs-micro); }
.muted { color: var(--fg-3); }
.hint  { color: var(--fg-4); }
code, .mono { font-family: var(--font-mono); font-size: 0.9em; }

.stat-number {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  font-size: 2rem;
  background: var(--gradient-stat);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}