/* ============================================================================
   RESUMOS 360 — DESIGN SYSTEM
   colors_and_type.css — canonical color + type tokens
   ----------------------------------------------------------------------------
   Theme: "Midnight" dark mode (deep navy). Energetic, tech, sophisticated.
   Type:  Sora (display) + Hanken Grotesk (text) + JetBrains Mono (labels).
          NOTE: these are Google Fonts SUBSTITUTIONS chosen to refine the
          original prototypes' Geist. Swap freely — see "TYPE FAMILIES" below.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=JetBrains+Mono:wght@400;500;600&display=swap');
/* Alternate families exposed as Tweaks in the UI kits: */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter+Tight:wght@400;500;600;700;800&family=Geist:wght@400;500;600;700;800&display=swap');

:root {
  /* ─── MIDNIGHT PALETTE (surfaces) ──────────────────────────────────── */
  --paper:      #08102a;   /* app background — deep navy */
  --paper-2:    #0c1638;   /* raised surface / sections */
  --paper-3:    #111e48;   /* cards */
  --paper-4:    #182755;   /* card hover / inset */
  --paper-glass:rgba(12, 22, 56, 0.72); /* sticky nav / blur layers */

  /* ─── INK (text on dark) ───────────────────────────────────────────── */
  --ink:        #f4f1e9;   /* primary text — warm off-white */
  --ink-2:      #c9c2b1;   /* secondary text */
  --ink-3:      #9298b3;   /* tertiary / captions */
  --muted:      #6f779a;   /* eyebrows, meta, disabled */

  /* ─── RULES / BORDERS ──────────────────────────────────────────────── */
  --rule:       #243264;   /* visible divider */
  --rule-soft:  #1b2750;   /* hairline divider */
  --rule-strong:#33438a;   /* focus ring base / emphasis border */

  /* ─── BRAND ────────────────────────────────────────────────────────── */
  --brand:      #1b36f0;   /* PRIMARY — vibrant electric blue (CTAs) */
  --brand-deep: #0a1aa8;   /* pressed / gradients */
  --brand-soft: #2b4dff;   /* hover lift */
  --teal:       #2a93b8;   /* logo / secondary brand */
  --teal-2:     #5ec3e0;   /* cyan accent */
  --cyan:       #38e1e8;   /* gradient mid-stop */
  --lime:       #b6f24a;   /* gradient end-stop — verde-limão */

  /* Headline gradient: blue → cyan → lime (highlight words) */
  --grad-headline: linear-gradient(100deg, var(--brand) 0%, var(--cyan) 52%, var(--lime) 100%);
  /* CTA gradient (subtle) */
  --grad-cta: linear-gradient(135deg, var(--brand-soft) 0%, var(--brand) 55%, var(--brand-deep) 100%);
  /* Soft brand glow used behind hero art / featured cards */
  --glow-brand: radial-gradient(60% 60% at 50% 0%, rgba(43,77,255,0.30) 0%, rgba(43,77,255,0) 70%);

  /* ─── SEMANTIC ─────────────────────────────────────────────────────── */
  --success:    #36d98a;   /* aprovação / positivo (green) */
  --success-dim:rgba(54,217,138,0.14);
  --danger:     #ff5a4d;   /* dores / problemas (red) */
  --danger-dim: rgba(255,90,77,0.14);
  --warning:    #ffce4a;   /* atenção */
  --accent:     #e6b35a;   /* gold — stars, premium ornament */
  --price-strike:#6b7299;

  /* ─── AREA ACCENTS (subject areas — modernized hues) ───────────────── */
  --area-administrativa: #34a8d0;  /* teal-cyan */
  --area-policial:       #ff5a4d;  /* red */
  --area-fiscal:         #e6b35a;  /* gold */
  --area-juridica:       #6b7ee0;  /* indigo */
  --area-metodos:        #b06dff;  /* vibrant violet */
  --area-administrativa-dim: rgba(52,168,208,0.14);
  --area-policial-dim:       rgba(255,90,77,0.14);
  --area-fiscal-dim:         rgba(230,179,90,0.14);
  --area-juridica-dim:       rgba(107,126,224,0.14);
  --area-metodos-dim:        rgba(176,109,255,0.14);

  /* ─── TYPE FAMILIES ────────────────────────────────────────────────── */
  --display: "Sora", ui-sans-serif, system-ui, sans-serif;   /* headlines */
  --sans:    "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif; /* body/UI */
  --mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace; /* labels */
  /* Alternates (Tweak-swappable): "Space Grotesk", "Inter Tight", "Geist" */

  /* ─── TYPE SCALE (semantic) ────────────────────────────────────────── */
  --fz-display: clamp(56px, 7vw, 104px);  /* hero H1 */
  --fz-h1:      clamp(40px, 4.6vw, 64px);
  --fz-h2:      clamp(32px, 3.4vw, 48px);
  --fz-h3:      28px;
  --fz-h4:      20px;
  --fz-lede:    19px;
  --fz-body:    16px;
  --fz-sm:      14px;
  --fz-xs:      13px;
  --fz-eyebrow: 11px;

  /* ─── RADII ────────────────────────────────────────────────────────── */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;   /* default card */
  --r-lg: 22px;   /* large card / hero panel */
  --r-pill: 999px;

  /* ─── SPACING (4px base) ───────────────────────────────────────────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --s-20: 80px; --s-24: 96px;

  /* ─── ELEVATION / SHADOW (dark-mode: depth + brand glow) ───────────── */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:  0 8px 24px -10px rgba(0,0,0,0.6);
  --shadow-lg:  0 30px 60px -28px rgba(0,0,0,0.7);
  --shadow-glow:0 0 0 1px rgba(43,77,255,0.35), 0 18px 50px -20px rgba(27,54,240,0.55);
  --shadow-glow-teal: 0 0 0 1px rgba(94,195,224,0.30), 0 18px 50px -22px rgba(42,147,184,0.45);

  /* ─── MOTION ───────────────────────────────────────────────────────── */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.14s;
  --t-med:  0.24s;
  --t-slow: 0.4s;
}

/* ============================================================================
   BASE / SEMANTIC ELEMENT STYLES
   Apply these by linking this file; or copy the patterns into components.
   ========================================================================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fz-body);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }

/* Headlines — Sora, tight, heavy */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.0;
  color: var(--ink);
}
h1 { font-size: var(--fz-h1); font-weight: 800; }
h2 { font-size: var(--fz-h2); font-weight: 700; }
h3 { font-size: var(--fz-h3); font-weight: 700; }
h4 { font-size: var(--fz-h4); font-weight: 600; letter-spacing: -0.015em; }
p  { margin: 0; }

/* Emphasis: NO italics — we emphasize with gradient or color/weight */
em, i { font-style: normal; }

/* ─── Utility classes ─────────────────────────────────────────────────── */
.display      { font-family: var(--display); font-weight: 800; font-size: var(--fz-display); line-height: 0.94; letter-spacing: -0.03em; }
.lede         { font-size: var(--fz-lede); line-height: 1.5; color: var(--ink-2); }
.eyebrow      { font-family: var(--mono); font-size: var(--fz-eyebrow); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.mono         { font-family: var(--mono); }

/* Gradient highlight — apply to a <span> inside a heading */
.grad {
  background: var(--grad-headline);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Selection + scrollbar */
::selection { background: var(--brand); color: #fff; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--paper-3); border-radius: 6px; border: 3px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: var(--paper-4); }