/* =========================================================================
   NesDigital — Colors & Type Foundations
   Premium Creative AI Agency
   ========================================================================= */

/* ------------------------------ FONTS ----------------------------------- */
@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins-Light.woff2") format("woff2"),
       url("fonts/Poppins-Light.woff") format("woff");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins-Regular.woff2") format("woff2"),
       url("fonts/Poppins-Regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins-Italic.woff2") format("woff2"),
       url("fonts/Poppins-Italic.woff") format("woff");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins-Medium.woff2") format("woff2"),
       url("fonts/Poppins-Medium.woff") format("woff");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins-SemiBold.woff2") format("woff2"),
       url("fonts/Poppins-SemiBold.woff") format("woff");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins-Bold.woff2") format("woff2"),
       url("fonts/Poppins-Bold.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins-ExtraBold.woff2") format("woff2"),
       url("fonts/Poppins-ExtraBold.woff") format("woff");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins-Black.woff2") format("woff2"),
       url("fonts/Poppins-Black.woff") format("woff");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Variable.ttf") format("truetype-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Italic-Variable.ttf") format("truetype-variations");
  font-weight: 100 900; font-style: italic; font-display: swap;
}

/* ----------------------------- TOKENS ----------------------------------- */
:root {
  /* -------- Brand colors -------- */
  --nd-cyan: #00E5FF;
  --nd-violet: #782FFF;
  --nd-magenta: #FF0080;
  --nd-black: #080810;
  --nd-white: #FFFFFF;

  /* -------- Tints / extended palette (derived for UI breathing room) -------- */
  --nd-cyan-50:   #E6FBFF;
  --nd-cyan-100:  #B8F4FF;
  --nd-cyan-300:  #66ECFF;
  --nd-cyan-500:  #00E5FF;
  --nd-cyan-700:  #00A8BF;
  --nd-violet-50:  #F1ECFF;
  --nd-violet-100: #DCCCFF;
  --nd-violet-300: #A77FFF;
  --nd-violet-500: #782FFF;
  --nd-violet-700: #5A1FCC;
  --nd-magenta-50:  #FFE5F0;
  --nd-magenta-100: #FFB8D6;
  --nd-magenta-300: #FF66A9;
  --nd-magenta-500: #FF0080;
  --nd-magenta-700: #C30062;

  /* -------- Neutral scale (cool, with hint of violet to stay on-brand) -------- */
  --nd-ink-0:   #FFFFFF;
  --nd-ink-50:  #F7F7FB;   /* page wash on white */
  --nd-ink-100: #EEEEF4;   /* hairline / divider on light */
  --nd-ink-200: #DCDCE6;   /* borders */
  --nd-ink-300: #BABAC9;   /* muted strokes */
  --nd-ink-400: #8B8B9F;   /* tertiary text */
  --nd-ink-500: #5C5C73;   /* secondary text */
  --nd-ink-600: #3A3A4E;   /* body strong */
  --nd-ink-700: #23232F;
  --nd-ink-800: #14141C;
  --nd-ink-900: #080810;   /* deep black */

  /* -------- Semantic surface / text -------- */
  --bg-page:        var(--nd-white);
  --bg-elevated:    var(--nd-white);
  --bg-sunken:      var(--nd-ink-50);
  --bg-inverse:     var(--nd-black);

  --fg-1: var(--nd-ink-900);   /* primary text */
  --fg-2: var(--nd-ink-600);   /* body */
  --fg-3: var(--nd-ink-500);   /* secondary */
  --fg-4: var(--nd-ink-400);   /* tertiary / placeholder */
  --fg-on-dark:    var(--nd-white);
  --fg-on-gradient: var(--nd-white);

  --border-1: var(--nd-ink-100);
  --border-2: var(--nd-ink-200);
  --border-strong: var(--nd-ink-300);

  /* -------- Semantic state colors (kept on-brand) -------- */
  --success: #15C97A;
  --warning: #FFB020;
  --danger:  var(--nd-magenta);
  --info:    var(--nd-cyan);

  /* -------- Signature gradients -------- */
  --grad-brand:        linear-gradient(90deg, #00E5FF 0%, #782FFF 50%, #FF0080 100%);
  --grad-brand-diag:   linear-gradient(135deg, #00E5FF 0%, #782FFF 50%, #FF0080 100%);
  --grad-brand-soft:   linear-gradient(135deg, #E6FBFF 0%, #F1ECFF 50%, #FFE5F0 100%);
  --grad-glow:         radial-gradient(60% 60% at 50% 50%, rgba(120,47,255,0.35) 0%, rgba(0,229,255,0.12) 40%, rgba(255,0,128,0.0) 75%);
  --grad-night:        linear-gradient(180deg, #080810 0%, #14141C 100%);
  --grad-night-glow:   radial-gradient(120% 80% at 70% 0%, rgba(120,47,255,0.35) 0%, rgba(0,229,255,0.10) 35%, rgba(8,8,16,0) 70%);

  /* -------- Radii (rounded, clean — per brand brief) -------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* -------- Spacing scale (4-px base) -------- */
  --s-0:  0px;
  --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;

  /* -------- Shadows -------- */
  --shadow-1: 0 1px 2px rgba(8,8,16,0.06), 0 1px 1px rgba(8,8,16,0.04);
  --shadow-2: 0 4px 12px rgba(8,8,16,0.08), 0 2px 4px rgba(8,8,16,0.04);
  --shadow-3: 0 14px 32px rgba(8,8,16,0.10), 0 4px 8px rgba(8,8,16,0.05);
  --shadow-4: 0 28px 64px rgba(8,8,16,0.14), 0 8px 16px rgba(8,8,16,0.06);
  --shadow-glow-cyan:    0 0 0 1px rgba(0,229,255,0.30), 0 12px 32px -8px rgba(0,229,255,0.45);
  --shadow-glow-violet:  0 0 0 1px rgba(120,47,255,0.30), 0 12px 32px -8px rgba(120,47,255,0.45);
  --shadow-glow-magenta: 0 0 0 1px rgba(255,0,128,0.30), 0 12px 32px -8px rgba(255,0,128,0.45);
  --shadow-glow-brand:   0 12px 36px -10px rgba(120,47,255,0.45), 0 6px 18px -6px rgba(0,229,255,0.30);

  /* -------- Motion -------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.55, 0, 1, 0.45);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* -------- Typography families -------- */
  --font-display: "Poppins", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Poppins", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui:      "Inter", "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* -------- Type scale (display + body) -------- */
  --fs-display-1: clamp(56px, 7vw, 96px);   /* hero */
  --fs-display-2: clamp(44px, 5.5vw, 72px); /* section hero */
  --fs-h1: clamp(36px, 4vw, 56px);
  --fs-h2: clamp(28px, 3vw, 40px);
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;
  --fs-eyebrow: 12px;

  /* -------- Line heights / tracking -------- */
  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;
  --tr-tight: -0.02em;
  --tr-normal: 0;
  --tr-wide: 0.04em;
  --tr-eyebrow: 0.18em;
}

/* ---------------------------- BASE -------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ------------------------ SEMANTIC TYPE CLASSES ------------------------- */
.t-display-1, h1.display { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-display-1); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); }
.t-display-2 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-display-2); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); }
.t-h1, h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); margin: 0; }
.t-h2, h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); margin: 0; }
.t-h3, h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-snug); margin: 0; }
.t-h4, h4 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h4); line-height: var(--lh-snug); margin: 0; }
.t-body-lg { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--fg-2); }
.t-body, p { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--fg-2); margin: 0; }
.t-body-sm { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body-sm); line-height: var(--lh-normal); color: var(--fg-3); }
.t-caption { font-family: var(--font-ui); font-weight: 500; font-size: var(--fs-caption); line-height: var(--lh-normal); color: var(--fg-3); }
.t-eyebrow {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}
.t-mono, code, pre { font-family: var(--font-mono); font-size: 13px; }

/* ------------------------ UTILITY DECORATORS ---------------------------- */
.text-gradient {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.bg-gradient { background: var(--grad-brand); color: var(--fg-on-gradient); }
.bg-night    { background: var(--nd-black); color: var(--fg-on-dark); }

/* Underlining accent (the "— PREMIUM CREATIVE AI AGENCY —" mark on the brand board) */
.accent-rule {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-ui); font-weight: 600; letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase; font-size: 11px;
  color: var(--fg-2);
}
.accent-rule::before, .accent-rule::after {
  content: ""; width: 28px; height: 2px;
  background: var(--grad-brand); border-radius: 2px;
}