/* =========================================================
   NEO — Foundations: Color + Type
   "Brands of the next era"
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

/* ---------- Satoshi (brand sans) ----------
   Variable font carries the full 300–900 weight axis in one file. */
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-Variable.woff2') format('woff2-variations'),
       url('fonts/Satoshi-Variable.woff')  format('woff-variations'),
       url('fonts/Satoshi-Variable.ttf')   format('truetype-variations');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-VariableItalic.woff2') format('woff2-variations'),
       url('fonts/Satoshi-VariableItalic.woff')  format('woff-variations'),
       url('fonts/Satoshi-VariableItalic.ttf')   format('truetype-variations');
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Brand color tokens (from brand board) ---------- */
  --neo-ink:        #0A0A0F;   /* primary near-black */
  --neo-ink-2:      #14141B;   /* slight lift, surfaces on dark */
  --neo-ink-3:      #1E1E27;   /* card / well on dark */
  --neo-line-dark:  #2A2A33;   /* hairline on dark */

  --neo-paper:      #F7F7F9;   /* primary off-white background */
  --neo-stone:      #E6E6EB;   /* secondary surface / divider */
  --neo-stone-2:    #D8D8DE;   /* heavier divider */
  --neo-line:       #C9C9D0;   /* hairline on light */

  --neo-violet:     #A78BFA;   /* signature accent — "eclipse violet" */
  --neo-violet-2:   #8B6CF5;   /* deeper hover */
  --neo-violet-3:   #6E4DE6;   /* press / link visited */
  --neo-violet-50:  #EDE7FE;   /* subtle wash */

  /* Signature gradient — the eclipse glow */
  --neo-glow:
    radial-gradient(60% 60% at 70% 50%,
      rgba(167,139,250,0.85) 0%,
      rgba(110, 77, 230, 0.35) 35%,
      rgba(10,10,15,0) 70%);
  --neo-gradient-violet:
    linear-gradient(135deg, #C7B6FD 0%, #A78BFA 45%, #6E4DE6 100%);

  /* ---------- Semantic colors (light surface — default) ---------- */
  --bg:          var(--neo-paper);
  --bg-elev:     #FFFFFF;
  --bg-sunken:   var(--neo-stone);
  --fg:          var(--neo-ink);
  --fg-2:        #4A4A55;   /* secondary copy */
  --fg-3:        #7A7A85;   /* muted / captions / eyebrow */
  --fg-on-accent:#FFFFFF;
  --accent:      var(--neo-violet);
  --accent-fg:   var(--neo-violet-3);   /* accent used as text color */
  --line:        var(--neo-line);
  --line-soft:   var(--neo-stone);

  /* ---------- Type families ---------- */
  /* Satoshi — geometric humanist sans, the NEO brand face.
     Uniform stroke, open apertures, crisp terminals. */
  --font-sans:    'Satoshi', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Satoshi', 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ---------- Type scale (1.250 — major third) ---------- */
  --fs-12: 0.75rem;   /* 12 — eyebrow / caption */
  --fs-14: 0.875rem;  /* 14 — small / meta */
  --fs-16: 1rem;      /* 16 — body */
  --fs-18: 1.125rem;  /* 18 — lead */
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;
  --fs-96: 6rem;

  /* ---------- Tracking ---------- */
  --tr-eyebrow: 0.18em;   /* ALL-CAPS labels */
  --tr-tight:  -0.02em;   /* display headlines */
  --tr-normal:  0;
  --tr-wide:    0.04em;

  /* ---------- Line-height ---------- */
  --lh-tight:   1.04;
  --lh-snug:    1.15;
  --lh-body:    1.55;
  --lh-loose:   1.7;

  /* ---------- Weights — Satoshi axis: 300 → 900 ---------- */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   900;

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

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

  /* ---------- Shadow & elevation ---------- */
  --shadow-1: 0 1px 2px rgba(10,10,15,0.06);
  --shadow-2: 0 8px 24px rgba(10,10,15,0.08);
  --shadow-3: 0 24px 48px -12px rgba(10,10,15,0.18);
  --glow-violet: 0 0 32px rgba(167,139,250,0.55), 0 0 80px rgba(110,77,230,0.35);

  /* ---------- Hairline borders ---------- */
  --border-hair: 1px solid var(--line);
  --border-hair-dark: 1px solid var(--neo-line-dark);

  /* ---------- Motion ---------- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;
}

/* Dark surface override — apply with class or data-attribute */
.neo-dark, [data-theme="dark"] {
  --bg:        var(--neo-ink);
  --bg-elev:   var(--neo-ink-2);
  --bg-sunken: #050507;
  --fg:        #F2F2F4;
  --fg-2:      #B4B4BD;
  --fg-3:      #7A7A85;
  --line:      var(--neo-line-dark);
  --line-soft: #1F1F28;
}

/* =========================================================
   Base elements
   ========================================================= */
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
}

/* ---------- Display & headings ---------- */
.neo-display-xl, h1.neo {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(3rem, 6vw, var(--fs-96));
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
}
.neo-display, h2.neo {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(2rem, 4vw, var(--fs-72));
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
}
.neo-headline, h3.neo {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--fs-40);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
}
.neo-title, h4.neo {
  font-weight: var(--fw-regular);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
}
.neo-subtitle, h5.neo {
  font-weight: var(--fw-medium);
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
}

/* ---------- Body ---------- */
.neo-lead {
  font-weight: var(--fw-light);
  font-size: var(--fs-18);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.neo-body, p.neo {
  font-weight: var(--fw-light);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.neo-small {
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

/* ---------- Eyebrow (NEO's signature label) ---------- */
.neo-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-12);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}
.neo-eyebrow--accent { color: var(--accent-fg); }

/* ---------- Mono / numerals ---------- */
.neo-mono, code.neo {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  letter-spacing: var(--tr-normal);
}

/* ---------- Accent inline (the purple keyword) ---------- */
.neo-accent { color: var(--accent-fg); }

/* ---------- Bullet dot separators (eyebrow row) ---------- */
.neo-dotrow { display: inline-flex; align-items: center; gap: 14px; }
.neo-dotrow > * + *::before {
  content: "•";
  color: var(--fg-3);
  margin-right: 14px;
  margin-left: -10px;
}