/* ============================================================================
   The Next Level 360 — Foundations
   Colors • Typography • Spacing • Radii • Shadows
   ============================================================================
   Import this file before any component CSS.
   ----------------------------------------------------------------------------
   Substitution flag: Metropolis is the canonical brand typeface. It is NOT a
   Google Font and is not bundled here. Manrope is used as the live substitute
   (geometric sans, double-storey 'g', similar metrics). When you have the
   real Metropolis .otf/.ttf, drop them into /fonts and uncomment the
   @font-face block below.
   ============================================================================ */

/* Manrope — current substitute for Metropolis.
   JetBrains Mono — the canonical --font-mono family (free webfont). */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

/*
@font-face {
  font-family: 'Metropolis';
  src: url('./fonts/Metropolis-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Metropolis';
  src: url('./fonts/Metropolis-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Metropolis';
  src: url('./fonts/Metropolis-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Metropolis';
  src: url('./fonts/Metropolis-ExtraBold.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Metropolis';
  src: url('./fonts/Metropolis-BlackItalic.woff2') format('woff2');
  font-weight: 900; font-style: italic; font-display: swap;
}
*/

:root {
  /* ---------- COLOR — PRIMARY ---------- */
  --color-red:           #E4042C;  /* primary accent */
  --color-red-deep:      #C1031F;  /* hover state */
  --color-black:         #111110;  /* near-black, body fg on light */
  --color-white:         #F4F4F4;  /* off-white canvas */
  --color-pure-white:    #FFFFFF;

  /* ---------- COLOR — SECONDARY ---------- */
  --color-graphite:      #4D4F4F;  /* muted text */
  --color-coral:         #FF4C2E;  /* warm red variant */
  --color-indigo:        #1A175B;  /* deep indigo accent bg */
  --color-mint:          #E0F4E0;  /* pale mint surface */

  /* ---------- COLOR — SEMANTIC ---------- */
  --color-bg:            var(--color-white);
  --color-bg-elevated:   var(--color-pure-white);
  --color-bg-inverse:    var(--color-black);
  --color-fg:            var(--color-black);
  --color-fg-muted:      var(--color-graphite);
  --color-fg-inverse:    var(--color-white);
  --color-accent:        var(--color-red);
  --color-accent-hover:  var(--color-red-deep);
  --color-border:        rgba(17, 16, 17, 0.08);
  --color-border-strong: rgba(17, 16, 17, 0.18);
  --color-divider:       rgba(17, 16, 17, 0.06);
  --color-focus-ring:    var(--color-red);

  /* on inverse surfaces */
  --color-fg-on-dark:        #F4F4F4;
  --color-fg-muted-on-dark:  rgba(244, 244, 244, 0.64);
  --color-border-on-dark:    rgba(244, 244, 244, 0.12);

  /* ---------- TYPOGRAPHY — FAMILY ---------- */
  --font-display: 'Manrope', 'Metropolis', system-ui, -apple-system, sans-serif;
  --font-body:    'Manrope', 'Metropolis', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- TYPOGRAPHY — WEIGHTS ---------- */
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;
  --weight-extrabold:  800;

  /* ---------- TYPOGRAPHY — SIZE SCALE ---------- */
  --text-xs:    0.75rem;     /* 12 */
  --text-sm:    0.875rem;    /* 14 */
  --text-base:  1rem;        /* 16 */
  --text-lg:    1.125rem;    /* 18 */
  --text-xl:    1.375rem;    /* 22 */
  --text-2xl:   1.75rem;     /* 28 */
  --text-3xl:   2.25rem;     /* 36 */
  --text-4xl:   3rem;        /* 48 */
  --text-5xl:   4rem;        /* 64 */
  --text-6xl:   5.5rem;      /* 88 */
  --text-7xl:   7.5rem;      /* 120 */

  /* ---------- TYPOGRAPHY — TRACKING ---------- */
  --tracking-tight:   -0.03em;
  --tracking-snug:    -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.12em;  /* eyebrow caps */

  /* ---------- TYPOGRAPHY — LEADING ---------- */
  --leading-display:  0.95;
  --leading-headline: 1.05;
  --leading-snug:     1.25;
  --leading-body:     1.55;
  --leading-loose:    1.7;

  /* ---------- SPACING (4px base) ---------- */
  --space-0:   0;
  --space-1:   0.25rem;   /* 4 */
  --space-2:   0.5rem;    /* 8 */
  --space-3:   0.75rem;   /* 12 */
  --space-4:   1rem;      /* 16 */
  --space-5:   1.25rem;   /* 20 */
  --space-6:   1.5rem;    /* 24 */
  --space-8:   2rem;      /* 32 */
  --space-10:  2.5rem;    /* 40 */
  --space-12:  3rem;      /* 48 */
  --space-16:  4rem;      /* 64 */
  --space-20:  5rem;      /* 80 */
  --space-24:  6rem;      /* 96 */
  --space-32:  8rem;      /* 128 */

  /* ---------- RADII ---------- */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-sm:    0 1px 2px rgba(17, 16, 17, 0.06);
  --shadow-md:    0 8px 24px rgba(17, 16, 17, 0.08);
  --shadow-lg:    0 24px 60px rgba(17, 16, 17, 0.16);
  --shadow-xl:    0 40px 100px rgba(17, 16, 17, 0.22);
  --shadow-red:   0 12px 32px rgba(228, 4, 44, 0.28);
  --shadow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  /* ---------- MOTION ---------- */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);   /* @kind other */
  --duration-fast:   180ms;   /* @kind other */
  --duration-base:   240ms;   /* @kind other */
  --duration-slow:   480ms;   /* @kind other */

  /* ---------- LAYOUT ---------- */
  --container-max:  1280px;
  --container-pad:  clamp(1rem, 4vw, 2rem);
}

/* ============================================================================
   Semantic typography classes
   Use these in markup; do not reach for ad-hoc font-size/weight.
   ============================================================================ */

.nl-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

.nl-display {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: clamp(var(--text-5xl), 9vw, var(--text-7xl));
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg);
}

.nl-h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
  line-height: var(--leading-headline);
  letter-spacing: var(--tracking-snug);
  color: var(--color-fg);
}

.nl-h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl));
  line-height: var(--leading-headline);
  letter-spacing: var(--tracking-snug);
  color: var(--color-fg);
}

.nl-h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--color-fg);
}

.nl-h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--color-fg);
}

.nl-lead {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--color-fg-muted);
}

.nl-body {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-fg);
}

.nl-body-sm {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-fg);
}

.nl-caption {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--color-fg-muted);
}

.nl-italic-accent {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  letter-spacing: var(--tracking-tight);
}

/* The "360" treatment — italic black, with red brush underneath */
.nl-360 {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  color: var(--color-accent);
  letter-spacing: var(--tracking-snug);
}

/* ============================================================================
   Base reset — minimal
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-fg);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--color-fg);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--color-accent); }

:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

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