/* =============================================================
   Bruno Silva — Design Tokens
   Navy · White · JetBrains Mono · Manrope · Space Grotesk
   ============================================================= */

/* ---- Manrope (body) ---- */
@font-face { font-family: 'Manrope'; src: url('../fonts/Manrope-ExtraLight.ttf') format('truetype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('../fonts/Manrope-Light.ttf')      format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('../fonts/Manrope-Regular.ttf')    format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('../fonts/Manrope-Medium.ttf')     format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('../fonts/Manrope-SemiBold.ttf')   format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('../fonts/Manrope-Bold.ttf')       format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('../fonts/Manrope-ExtraBold.ttf')  format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }

/* ---- Space Grotesk (display) ---- */
@font-face { font-family: 'Space Grotesk'; src: url('../fonts/SpaceGrotesk-Light.ttf')    format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('../fonts/SpaceGrotesk-Regular.ttf')  format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('../fonts/SpaceGrotesk-Medium.ttf')   format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('../fonts/SpaceGrotesk-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('../fonts/SpaceGrotesk-Bold.ttf')     format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

/* ---- JetBrains Mono (mono/eyebrow) ---- */
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono-Thin.ttf')            format('truetype'); font-weight: 100; font-style: normal;  font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono-ExtraLight.ttf')      format('truetype'); font-weight: 200; font-style: normal;  font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono-Light.ttf')           format('truetype'); font-weight: 300; font-style: normal;  font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono-Regular.ttf')         format('truetype'); font-weight: 400; font-style: normal;  font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono-Medium.ttf')          format('truetype'); font-weight: 500; font-style: normal;  font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono-SemiBold.ttf')        format('truetype'); font-weight: 600; font-style: normal;  font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono-Bold.ttf')            format('truetype'); font-weight: 700; font-style: normal;  font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono-ExtraBold.ttf')       format('truetype'); font-weight: 800; font-style: normal;  font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono-ThinItalic.ttf')      format('truetype'); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono-ExtraLightItalic.ttf') format('truetype'); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono-LightItalic.ttf')     format('truetype'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono-Italic.ttf')          format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono-MediumItalic.ttf')    format('truetype'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono-SemiBoldItalic.ttf')  format('truetype'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono-BoldItalic.ttf')      format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono-ExtraBoldItalic.ttf') format('truetype'); font-weight: 800; font-style: italic; font-display: swap; }

:root {
  /* ---------- Color: brand (Navy family) ---------- */
  --navy:        #1c3a5f;
  --navy-mid:    #1a3a6a;
  --navy-dark:   #152d50;
  --navy-deep:   #0e2240;
  --navy-hover:  #163872;

  /* Electric accent — on-dark CTAs, glows, focus, eyebrows */
  --electric:      #2D6BFF;
  --electric-deep: #1E54E0;

  /* Tinted blues */
  --navy-12:       rgba(28, 58, 95, 0.12);
  --navy-24:       rgba(28, 58, 95, 0.24);
  --electric-glow: rgba(45, 107, 255, 0.32);

  /* ---------- Aliases (legacy --royal / --ink names) ---------- */
  --royal:      var(--navy);
  --royal-deep: var(--navy-hover);
  --ink:        var(--navy-deep);
  --ink-2:      var(--navy-dark);
  --ink-3:      var(--navy-mid);
  --rule-dark:  rgba(28, 58, 95, 0.2);

  /* ---------- Color: surfaces ---------- */
  --paper:       #FFFFFF;
  --mist:        #F5F7FA;
  --rule:        #E5E8EE;
  --rule-strong: #D4D9E2;

  /* ---------- Color: foreground ---------- */
  --fg-1:         #05070D;
  --fg-2:         #2A3142;
  --fg-3:         #5B6478;
  --fg-on-dark-1: #FFFFFF;
  --fg-on-dark-2: #C2C9D6;
  --fg-on-dark-3: #8A93A8;

  /* ---------- Type: families ---------- */
  --font-display: 'Space Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Manrope',       'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- Type: weights ---------- */
  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;
  --w-black:   800;

  /* ---------- Type: size scale ---------- */
  --t-eyebrow: 0.6875rem; /* 11px */
  --t-meta:    0.75rem;   /* 12px */
  --t-small:   0.875rem;  /* 14px */
  --t-body:    1rem;      /* 16px */
  --t-body-l:  1.125rem;  /* 18px */
  --t-lede:    1.375rem;  /* 22px */
  --t-h5:      1.25rem;   /* 20px */
  --t-h4:      1.625rem;  /* 26px */
  --t-h3:      2.25rem;   /* 36px */
  --t-h2:      3rem;      /* 48px */
  --t-h1:      4.5rem;    /* 72px */
  --t-display: 6rem;      /* 96px */

  /* ---------- Type: line height ---------- */
  --lh-display: 0.96;
  --lh-tight:   1.08;
  --lh-snug:    1.2;
  --lh-body:    1.55;
  --lh-loose:   1.7;

  /* ---------- Type: tracking ---------- */
  --tr-display: -0.02em;
  --tr-h:       -0.015em;
  --tr-body:    0em;
  --tr-eyebrow: 0.18em;
  --tr-mono:    0.04em;

  /* ---------- Spacing ---------- */
  --space-2:   2px;
  --space-4:   4px;
  --space-8:   8px;
  --space-12:  12px;
  --space-16:  16px;
  --space-20:  20px;
  --space-24:  24px;
  --space-32:  32px;
  --space-40:  40px;
  --space-56:  56px;
  --space-64:  64px;
  --space-96:  96px;
  --space-120: 120px;
  --space-160: 160px;

  /* ---------- Radii ---------- */
  --r-0:   0;
  --r-2:   2px;
  --r-4:   4px;
  --r-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-rule: 0 1px 0 var(--rule);
  --shadow-cta:  0 24px 60px -24px rgba(45, 107, 255, 0.45);
  --shadow-card: 0 1px 0 var(--rule);

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   150ms;
  --dur-base:   200ms;
  --dur-slow:   500ms;

  /* ---------- Layout ---------- */
  --maxw-body:  1200px;
  --maxw-hero:  1320px;
  --maxw-prose: 640px;
  --gutter:     24px;
  --nav-h:      64px;
}