/* =========================================================
   NEXT LEVEL TECH — Colors & Type Foundation
   Single source of truth for tokens. Import this in every
   page/component to inherit the brand system.
   ========================================================= */

/* --------- FONT FACES --------- */
@font-face {
  font-family: 'SansBeamBody';
  src: url('fonts/SansBeamBody-Thin.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SansBeamBody';
  src: url('fonts/SansBeamBody-ThinItalic.otf') format('opentype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'SansBeamBody';
  src: url('fonts/SansBeamBody-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SansBeamBody';
  src: url('fonts/SansBeamBody-LightItalic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'SansBeamBody';
  src: url('fonts/SansBeamBody-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SansBeamBody';
  src: url('fonts/SansBeamBody-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'SansBeamBody';
  src: url('fonts/SansBeamBody-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SansBeamBody';
  src: url('fonts/SansBeamBody-MediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'SansBeamBody';
  src: url('fonts/SansBeamBody-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SansBeamBody';
  src: url('fonts/SansBeamBody-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'SansBeamBody';
  src: url('fonts/SansBeamBody-Heavy.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SansBeamBody';
  src: url('fonts/SansBeamBody-HeavyItalic.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ===== COLORS — primary ===== */
  --nlt-eclipse:        #080F17;  /* fundo institucional · 60% */
  --nlt-voltage:        #3DA3EC;  /* marca · destaque · 25%   */
  --nlt-stardust:       #A3B0C5;  /* texto sec · linhas · 10% */
  --nlt-white:          #FFFFFF;  /* texto principal · 5%     */

  /* ===== COLORS — support ===== */
  --nlt-eclipse-2:      #0F1A28;  /* surface elevado          */
  --nlt-eclipse-3:      #16243A;  /* surface mais elevado     */
  --nlt-voltage-deep:   #1B6FB0;  /* hover, ativo             */
  --nlt-voltage-light:  #6EC2F5;  /* highlight, focus         */
  --nlt-stardust-soft:  #C8D1DD;  /* texto sobre eclipse forte*/

  /* ===== COLORS — semantic ===== */
  --nlt-success:        #3DA3EC;
  --nlt-warning:        #FFB300;
  --nlt-error:          #FF7A7A;

  /* ===== SEMANTIC COLOR ROLES ===== */
  --bg:        var(--nlt-eclipse);
  --bg-2:      var(--nlt-eclipse-2);
  --bg-3:      var(--nlt-eclipse-3);
  --fg-1:      var(--nlt-white);     /* primary text  */
  --fg-2:      var(--nlt-stardust);  /* secondary text*/
  --fg-3:      rgba(163,176,197,0.55);/* tertiary     */
  --accent:    var(--nlt-voltage);
  --accent-2:  var(--nlt-voltage-light);
  --accent-3:  var(--nlt-voltage-deep);

  /* ===== TYPOGRAPHY — families ===== */
  --font-display: 'SansBeamBody', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'SansBeamBody', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', Consolas, 'Courier New', monospace;

  /* ===== TYPOGRAPHY — scale (size/weight/lh/tracking) ===== */
  --t-display-size: clamp(56px, 7vw, 96px);
  --t-display-weight: 900;
  --t-display-lh: 0.95;
  --t-display-track: -0.02em;

  --t-headline-size: clamp(32px, 3.6vw, 48px);
  --t-headline-weight: 700;
  --t-headline-lh: 1.0;
  --t-headline-track: -0.015em;

  --t-subhead-size: clamp(22px, 2vw, 28px);
  --t-subhead-weight: 700;
  --t-subhead-lh: 1.1;
  --t-subhead-track: -0.01em;

  --t-title-size: 16px;
  --t-title-weight: 500;
  --t-title-lh: 1.25;
  --t-title-track: 0;

  --t-eyebrow-size: 11px;
  --t-eyebrow-weight: 500;
  --t-eyebrow-lh: 1.3;
  --t-eyebrow-track: 0.18em;

  --t-body-lg-size: 18px;
  --t-body-size: 14px;
  --t-body-weight: 400;
  --t-body-lh: 1.55;

  --t-small-size: 12px;
  --t-small-track: 0.02em;

  --t-mono-size: 11px;
  --t-mono-track: 0.06em;

  /* ===== SPACING (4px base) ===== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ===== RADII ===== */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-pill: 100px;
  --radius-full: 9999px;

  /* ===== BORDERS ===== */
  --border-thin:    1px solid rgba(163,176,197,0.10);
  --border-default: 1px solid rgba(163,176,197,0.15);
  --border-strong:  1px solid rgba(163,176,197,0.30);

  /* ===== SHADOWS ===== */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg:   0 12px 40px rgba(0,0,0,0.55);
  --shadow-glow: 0 0 40px rgba(61,163,236,0.25);
  --shadow-glow-soft: 0 0 80px rgba(61,163,236,0.18);

  /* ===== LAYOUT ===== */
  --container-max: 1280px;
  --gutter: 24px;
  --column-count: 12;
  --nav-height: 72px;
  --sidebar-width: 240px;
  --topbar-height: 64px;

  /* ===== MOTION ===== */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 360ms;
}

/* =============== BASE =============== */
html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--accent);
  color: var(--bg);
}

/* =============== SEMANTIC TYPE =============== */
.t-display, h1.display {
  font-family: var(--font-display);
  font-weight: var(--t-display-weight);
  font-size: var(--t-display-size);
  line-height: var(--t-display-lh);
  letter-spacing: var(--t-display-track);
  color: var(--fg-1);
}

.t-headline, h1 {
  font-family: var(--font-display);
  font-weight: var(--t-headline-weight);
  font-size: var(--t-headline-size);
  line-height: var(--t-headline-lh);
  letter-spacing: var(--t-headline-track);
  color: var(--fg-1);
}

.t-subhead, h2 {
  font-family: var(--font-display);
  font-weight: var(--t-subhead-weight);
  font-size: var(--t-subhead-size);
  line-height: var(--t-subhead-lh);
  letter-spacing: var(--t-subhead-track);
  color: var(--fg-1);
}

.t-title, h3 {
  font-family: var(--font-display);
  font-weight: var(--t-title-weight);
  font-size: var(--t-title-size);
  line-height: var(--t-title-lh);
  color: var(--fg-1);
}

.t-eyebrow, .tag {
  font-family: var(--font-mono);
  font-weight: var(--t-eyebrow-weight);
  font-size: var(--t-eyebrow-size);
  line-height: var(--t-eyebrow-lh);
  letter-spacing: var(--t-eyebrow-track);
  text-transform: uppercase;
  color: var(--accent);
}

.t-body-lg, .lede {
  font-family: var(--font-body);
  font-size: var(--t-body-lg-size);
  line-height: 1.5;
  color: var(--fg-2);
}

.t-body, p {
  font-family: var(--font-body);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  color: var(--fg-2);
}

.t-small, small, caption {
  font-family: var(--font-body);
  font-size: var(--t-small-size);
  letter-spacing: var(--t-small-track);
  color: var(--fg-2);
}

.t-mono, code, kbd, pre {
  font-family: var(--font-mono);
  font-size: var(--t-mono-size);
  letter-spacing: var(--t-mono-track);
  color: var(--fg-2);
}

.accent { color: var(--accent); }
.muted  { color: var(--fg-2); }

/* =============== UTILITY: hero glow =============== */
.bg-eclipse-glow {
  background:
    radial-gradient(ellipse at 75% 30%, rgba(61,163,236,0.18) 0%, transparent 55%),
    var(--bg);
}