/* =============================================================
 * Neovestor — Colors & Type Foundations
 * Dark-first, with a light variant for social/IG assets.
 * ============================================================= */

/* ---------- Fonts ---------- */

/* Display: Trap (commercial). We substitute Sora from Google Fonts
 * until real .woff2 files are placed in ./fonts. When they are, the
 * first @font-face below will take precedence. */
@font-face {
  font-family: "Trap";
  src: url("./fonts/Trap-Light.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Trap";
  src: url("./fonts/Trap-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Trap";
  src: url("./fonts/Trap-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Trap";
  src: url("./fonts/Trap-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Trap";
  src: url("./fonts/Trap-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Trap";
  src: url("./fonts/Trap-Black.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}

/* Google Fonts fallback — loaded by HTML files via <link>:
 *   Sora (Trap substitute), DM Sans (body), Inter (UI)
 * See ui_kits/**\/index.html for the <link> tags. */

:root {
  /* ---- Brand colors ---- */
  --nv-blue:         #2C2CF5;  /* primary electric brand blue */
  --nv-blue-600:     #0E28B7;
  --nv-blue-700:     #010598;
  --nv-blue-400:     #5E8FF5;
  --nv-blue-300:     #93BCFF;
  --nv-cyan:         #79FBEA;  /* gradient start */
  --nv-cyan-2:       #29ABE2;
  --nv-deep:         #0A135F;  /* deep space ellipse */
  --nv-deep-2:       #11234D;  /* mid deep */
  --nv-deep-3:       #12367D;
  --nv-violet:       #B28EFF;  /* secondary accent */
  --nv-rose:         #FF92B1;  /* secondary accent */
  --nv-gold:         #FFD285;

  /* ---- Neutrals (dark) ---- */
  --nv-black:        #0C0D11;  /* canvas */
  --nv-black-2:      #0F1012;
  --nv-card:         rgba(27, 29, 33, 0.77); /* translucent card */
  --nv-card-solid:   #1B1D21;
  --nv-line:         rgba(255, 255, 255, 0.10);
  --nv-line-2:       rgba(255, 255, 255, 0.06);

  /* ---- Neutrals (light) ---- */
  --nv-white:        #FFFFFF;
  --nv-bg-light:     #FDFDFD;
  --nv-ink:          #22252A;   /* primary text on light */
  --nv-ink-2:        #2C3036;
  --nv-ink-muted:    #818A9C;   /* quiet text on light */

  /* ---- Semantic text ---- */
  --fg-1:            #FFFFFF;                         /* primary on dark */
  --fg-2:            rgba(234, 236, 240, 0.70);       /* muted on dark */
  --fg-3:            rgba(255, 255, 255, 0.60);
  --fg-invert-1:     #22252A;                         /* primary on light */
  --fg-invert-2:     #818A9C;

  /* ---- Semantic surface ---- */
  --bg:              var(--nv-black);
  --bg-elev-1:       var(--nv-card);
  --bg-invert:       var(--nv-bg-light);

  /* ---- Gradients ---- */
  --nv-grad-primary: linear-gradient(135deg, #79FBEA 0%, #2E4BF5 100%);
  --nv-grad-primary-soft: linear-gradient(135deg, #5E8FF5 0%, #1A4DB5 100%);
  --nv-grad-space:   radial-gradient(120% 80% at 50% 50%, #11234D 0%, #0A135F 60%, #0C0D11 100%);
  --nv-grad-fade-d:  linear-gradient(180deg, rgba(12,13,17,0) 0%, #0C0D11 100%);

  /* ---- Shadows / elevation ---- */
  --nv-shadow-sm:    0 1px 2px 0 rgba(16, 24, 40, 0.05);
  --nv-shadow-card:  0 4px 8px 0 rgba(0,0,0,0.12), inset 0 2px 0 0 rgba(60,65,73,0.22);
  --nv-shadow-lg:    0 12px 32px 0 rgba(0,0,0,0.35);
  --nv-shadow-soft:  9.887px 11.864px 19.773px 0 rgba(0,0,0,0.05);
  --nv-glow-blue:    0 0 64px 0 rgba(44,44,245,0.25);

  /* ---- Radii ---- */
  --r-xs:   6px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-3xl:  48px;
  --r-pill: 999px;

  /* ---- Spacing scale (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;
  --s-32:   128px;

  /* ---- Type families ---- */
  --ff-display: "Trap", "Sora", system-ui, -apple-system, sans-serif;
  --ff-body:    "DM Sans", system-ui, -apple-system, sans-serif;
  --ff-ui:      "Inter", system-ui, -apple-system, sans-serif;
  --ff-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Type scale (semantic) ----
   * Names map 1:1 to how the Figma uses them. */
  --fs-display: 185px;   /* mega social hero (Trap Bold, -0.08em) */
  --fs-hero:    80px;    /* website hero (Trap Bold, -0.02em) */
  --fs-h1:      64px;
  --fs-h2:      48px;
  --fs-h3:      32px;
  --fs-h4:      24px;
  --fs-h5:      20px;
  --fs-h6:      18px;
  --fs-body-lg: 20px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;
  --fs-eyebrow: 14px;

  --lh-tight:   1.0;
  --lh-snug:    1.1;
  --lh-normal:  1.3;
  --lh-relaxed: 1.5;

  --tr-tight:   -0.02em;
  --tr-tighter: -0.04em;
  --tr-ultra:   -0.08em;
  --tr-normal:  0;
  --tr-wide:    0.04em;
}

/* ---------- Semantic element styles ---------- */

.nv-display {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-ultra);
  color: var(--fg-1);
}
.nv-hero {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}
.nv-h1 { font: 700 var(--fs-h1)/var(--lh-tight) var(--ff-display); letter-spacing: var(--tr-tight); color: var(--fg-1); }
.nv-h2 { font: 700 var(--fs-h2)/var(--lh-tight) var(--ff-display); letter-spacing: var(--tr-tight); color: var(--fg-1); }
.nv-h3 { font: 500 var(--fs-h3)/var(--lh-snug) var(--ff-display); letter-spacing: var(--tr-tight); color: var(--fg-1); }
.nv-h4 { font: 500 var(--fs-h4)/var(--lh-snug) var(--ff-display); letter-spacing: -0.01em; color: var(--fg-1); }
.nv-h5 { font: 500 var(--fs-h5)/var(--lh-snug) var(--ff-display); color: var(--fg-1); }

.nv-eyebrow {
  font-family: var(--ff-ui);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.nv-body-lg { font: 400 var(--fs-body-lg)/var(--lh-relaxed) var(--ff-body); color: var(--fg-2); }
.nv-body    { font: 400 var(--fs-body)/var(--lh-relaxed)   var(--ff-body); color: var(--fg-2); }
.nv-body-sm { font: 400 var(--fs-body-sm)/var(--lh-relaxed) var(--ff-ui);  color: var(--fg-2); }
.nv-caption { font: 500 var(--fs-caption)/1.3 var(--ff-ui); color: var(--fg-3); letter-spacing: 0.02em; }
.nv-label   { font: 500 var(--fs-body-sm)/1.3 var(--ff-ui); color: var(--fg-1); }
.nv-code    { font: 400 var(--fs-body-sm)/1.5 var(--ff-mono); color: var(--fg-1); }

/* p / h1 / etc. */
.nv-type h1, .nv-type .h1 { font: 700 var(--fs-h1)/var(--lh-tight) var(--ff-display); letter-spacing: var(--tr-tight); color: var(--fg-1); }
.nv-type h2, .nv-type .h2 { font: 700 var(--fs-h2)/var(--lh-tight) var(--ff-display); letter-spacing: var(--tr-tight); color: var(--fg-1); }
.nv-type h3, .nv-type .h3 { font: 500 var(--fs-h3)/var(--lh-snug)  var(--ff-display); color: var(--fg-1); }
.nv-type p,  .nv-type .p  { font: 400 var(--fs-body)/var(--lh-relaxed) var(--ff-body); color: var(--fg-2); }