@font-face {
  font-family: 'Satoshi';
  src: url('../assets/fonts/satoshi-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../assets/fonts/satoshi-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../assets/fonts/satoshi-700.woff2') format('woff2');
  font-weight: 600 900;
  font-display: swap;
  font-style: normal;
}

/* ═══════════════════════════════════════════════════════════
   VERIDION COMPANY — DESIGN TOKENS
   Paleta: Corporate Navy | Arquétipo: Criador + Governante
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── BRAND — Midnight Indigo ────────────────────────────── */
  --brand-50:  #EEF2FF;
  --brand-100: #E0E7FF;
  --brand-200: #C7D2FE;
  --brand-300: #A5B4FC;
  --brand-400: #818CF8;
  --brand-500: #4F46E5;
  --brand-600: #4338CA;
  --brand-700: #3730A3;
  --brand-800: #312E81;
  --brand-900: #1E1B4B;
  --brand-950: #07091C;

  /* ── ACCENT — Indigo (complementa o roxo e azul) ────────── */
  --accent-400: #818CF8;
  --accent-500: #6366F1;
  --accent-600: #4F46E5;

  /* ── BACKGROUNDS ─────────────────────────────────────────── */
  --bg-base:         #0E0E15;
  --bg-subtle:       #0E0E15;
  --bg-elevated:     #FFFFFF;
  --bg-inverse:      #FFFFFF;
  --bg-inverse-sub:  #F1F5F9;
  --surface:         #0E0E15;
  --surface-hover:   #16163A;

  /* ── TEXT ────────────────────────────────────────────────── */
  --text-primary:       #F1F5F9;
  --text-secondary:     #CBD5E1;
  --text-muted:         #94A3B8;
  --text-inverse:       #0F172A;
  --text-inverse-muted: #475569;
  --text-brand:         #818CF8;

  /* ── BORDERS ─────────────────────────────────────────────── */
  --border:       rgb(255 255 255 / 0.08);
  --border-strong: rgb(255 255 255 / 0.14);
  --border-focus: var(--brand-400);
  --border-inv:   rgb(0 0 0 / 0.1);

  /* ── SHADOWS ─────────────────────────────────────────────── */
  --sh-xs:    0 1px 2px rgb(0 0 0 / .04);
  --sh-sm:    0 1px 3px rgb(0 0 0 / .08), 0 1px 2px -1px rgb(0 0 0 / .04);
  --sh-md:    0 4px 8px -1px rgb(0 0 0 / .10), 0 2px 4px -2px rgb(0 0 0 / .05);
  --sh-lg:    0 12px 24px -4px rgb(0 0 0 / .12), 0 4px 8px -2px rgb(0 0 0 / .05);
  --sh-xl:    0 24px 48px -8px rgb(0 0 0 / .18), 0 8px 16px -4px rgb(0 0 0 / .06);
  --sh-brand: 0 8px 32px -4px color-mix(in srgb, var(--brand-500) 40%, transparent);
  --sh-glow:  0 0 60px -8px color-mix(in srgb, var(--brand-500) 50%, transparent);

  /* ── TYPOGRAPHY ──────────────────────────────────────────── */
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-display: 'Satoshi', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* TYPE SCALE — fluid */
  --text-xs:  clamp(0.75rem,  0.70rem + 0.20vw, 0.875rem);
  --text-sm:  clamp(0.875rem, 0.82rem + 0.28vw, 1rem);
  --text-md:  clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:  clamp(1.125rem, 1.00rem + 0.50vw, 1.375rem);
  --text-xl:  clamp(1.25rem,  1.10rem + 0.75vw, 1.75rem);
  --text-2xl: clamp(1.5rem,   1.20rem + 1.20vw, 2.25rem);
  --text-3xl: clamp(1.875rem, 1.40rem + 2.00vw, 3rem);
  --text-4xl: clamp(2.25rem,  1.60rem + 2.80vw, 4rem);
  --text-5xl: clamp(3rem,     2.00rem + 4.00vw, 5.5rem);

  /* FONT WEIGHTS */
  --w-normal:    400;
  --w-medium:    500;
  --w-semibold:  600;
  --w-bold:      700;
  --w-extrabold: 800;
  --w-black:     900;

  /* LINE HEIGHTS */
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* LETTER SPACING */
  --tracking-tight:  -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;

  /* ── SPACING (4px grid) ──────────────────────────────────── */
  --s-1:  0.25rem;  --s-2:  0.50rem;  --s-3:  0.75rem;
  --s-4:  1.00rem;  --s-5:  1.25rem;  --s-6:  1.50rem;
  --s-8:  2.00rem;  --s-10: 2.50rem;  --s-12: 3.00rem;
  --s-16: 4.00rem;  --s-20: 5.00rem;  --s-24: 6.00rem;
  --s-32: 8.00rem;

  /* ── BORDER RADIUS ───────────────────────────────────────── */
  --r-sm:   0.25rem;
  --r-md:   0.5rem;
  --r-lg:   0.75rem;
  --r-xl:   1rem;
  --r-2xl:  1.5rem;
  --r-3xl:  2rem;
  --r-full: 9999px;

  /* ── EASING ──────────────────────────────────────────────── */
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:   cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── TRANSITIONS ─────────────────────────────────────────── */
  --dur-fast:   150ms;
  --dur-base:   300ms;
  --dur-slow:   500ms;
  --dur-slower: 700ms;

  /* ── LAYOUT ──────────────────────────────────────────────── */
  --w-sm:   640px;
  --w-md:   768px;
  --w-lg:   1024px;
  --w-xl:   1280px;
  --w-2xl:  1400px;
  --w-prose: 65ch;

  /* ── Z-INDEX ─────────────────────────────────────────────── */
  --z-base:     0;
  --z-raised:   1;
  --z-float:    10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    400;
  --z-toast:    700;
  --z-cursor:   999;

  /* ── FEEDBACK ────────────────────────────────────────────── */
  --success:    #16a34a; --success-bg: #f0fdf4;
  --warning:    #ca8a04; --warning-bg: #fffbeb;
  --error:      #dc2626; --error-bg:   #fef2f2;
  --info:       #2563eb; --info-bg:    #eff6ff;
}