/* ================================================================
   NEXTMOVE · Design Tokens
   Colors, type, spacing, radii, shadows, motion
   ================================================================ */

/* --- Fonts ---
   Primary UI: Manrope (Google Fonts) — modern geometric sans, operational.
   Brand display "next": Merriweather (local, variable) — official brand serif.
   Brand display "MOVE": Covered By Your Grace (local) — official handwritten brand.
   Numerals / data: JetBrains Mono (Google Fonts). */

@font-face {
  font-family: 'Merriweather';
  src: url('fonts/Merriweather-VariableFont_opsz_wdth_wght.ttf') format('truetype-variations'),
       url('fonts/Merriweather-VariableFont_opsz_wdth_wght.ttf') format('truetype');
  font-weight: 300 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Merriweather';
  src: url('fonts/Merriweather-Italic-VariableFont_opsz_wdth_wght.ttf') format('truetype-variations'),
       url('fonts/Merriweather-Italic-VariableFont_opsz_wdth_wght.ttf') format('truetype');
  font-weight: 300 900;
  font-stretch: 75% 125%;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Covered By Your Grace';
  src: url('fonts/CoveredByYourGrace-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {

  /* ============================================================
     COLOR · Brand
     Orange + sky-blue from the logo, warm black, clean whites.
     ============================================================ */

  /* Orange — "next", primary action, energy */
  --nm-orange-50:  #fff4e8;
  --nm-orange-100: #ffe2c2;
  --nm-orange-200: #ffc788;
  --nm-orange-300: #ffa54d;
  --nm-orange-400: #ff8a1f;
  --nm-orange-500: #ef7400;   /* BRAND PRIMARY · logo orange */
  --nm-orange-600: #d06400;
  --nm-orange-700: #a54e00;
  --nm-orange-800: #7a3a00;
  --nm-orange-900: #4d2500;

  /* Sky — "MOVE", secondary accent, movement */
  --nm-sky-50:  #e6f9ff;
  --nm-sky-100: #c0efff;
  --nm-sky-200: #8ae3ff;
  --nm-sky-300: #4ed5fa;
  --nm-sky-400: #1fc6f2;
  --nm-sky-500: #00b8ea;       /* BRAND SECONDARY · logo sky */
  --nm-sky-600: #009bc6;
  --nm-sky-700: #0079a0;
  --nm-sky-800: #005773;
  --nm-sky-900: #003447;

  /* Ink — warm black family (not pure black) */
  --nm-ink-950: #0a0b0d;       /* Near black, deep */
  --nm-ink-900: #13151a;       /* Surface dark */
  --nm-ink-800: #1d2028;
  --nm-ink-700: #2a2e38;
  --nm-ink-600: #3d424f;
  --nm-ink-500: #5a6071;
  --nm-ink-400: #808696;
  --nm-ink-300: #adb2bf;
  --nm-ink-200: #d1d4dc;
  --nm-ink-100: #e8eaee;
  --nm-ink-50:  #f4f5f7;
  --nm-ink-0:   #ffffff;

  /* ============================================================
     COLOR · Semantic
     ============================================================ */

  /* Foreground (text on light surfaces) */
  --fg1: var(--nm-ink-950);        /* Primary text */
  --fg2: var(--nm-ink-600);        /* Secondary text */
  --fg3: var(--nm-ink-400);        /* Tertiary / hint */
  --fg-inverse: var(--nm-ink-0);   /* Text on dark */

  /* Background */
  --bg1: var(--nm-ink-0);          /* Page surface */
  --bg2: var(--nm-ink-50);         /* Subtle section fill */
  --bg3: var(--nm-ink-100);        /* Card / elevated fill */
  --bg-dark: var(--nm-ink-950);    /* Hero / inverted sections */
  --bg-dark-2: var(--nm-ink-900);

  /* Borders */
  --border-subtle: var(--nm-ink-100);
  --border-default: var(--nm-ink-200);
  --border-strong: var(--nm-ink-300);
  --border-inverse: rgba(255,255,255,0.12);

  /* Brand roles */
  --brand-primary: var(--nm-orange-500);
  --brand-primary-hover: var(--nm-orange-600);
  --brand-primary-press: var(--nm-orange-700);
  --brand-secondary: var(--nm-sky-500);
  --brand-secondary-hover: var(--nm-sky-600);

  /* Feedback */
  --success: #1fa971;
  --warning: #e8a500;
  --danger:  #d8453a;
  --info:    var(--nm-sky-500);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(239, 116, 0, 0.28);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */

  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif-brand: 'Merriweather', Georgia, serif;                              /* "next" — brand serif */
  --font-brush-brand: 'Covered By Your Grace', 'Caveat Brush', cursive;            /* "MOVE" — brand handwritten */
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Base type scale (modular, ~1.25 minor-third) */
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  14px;
  --text-base:16px;
  --text-md:  18px;
  --text-lg:  20px;
  --text-xl:  24px;
  --text-2xl: 30px;
  --text-3xl: 38px;
  --text-4xl: 48px;
  --text-5xl: 64px;
  --text-6xl: 80px;
  --text-7xl: 104px;

  /* Line heights */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  /* Weights (Manrope supports 200-800) */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* Tracking */
  --tracking-tight:   -0.02em;
  --tracking-display: -0.03em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.12em;

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

  /* ============================================================
     RADII
     ============================================================ */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* ============================================================
     SHADOWS (soft, layered — warm tint)
     ============================================================ */
  --shadow-xs: 0 1px 2px rgba(20, 22, 28, 0.06);
  --shadow-sm: 0 2px 6px rgba(20, 22, 28, 0.06), 0 1px 2px rgba(20, 22, 28, 0.04);
  --shadow-md: 0 6px 16px rgba(20, 22, 28, 0.08), 0 2px 4px rgba(20, 22, 28, 0.04);
  --shadow-lg: 0 16px 40px rgba(20, 22, 28, 0.10), 0 4px 8px rgba(20, 22, 28, 0.05);
  --shadow-xl: 0 28px 64px rgba(20, 22, 28, 0.14), 0 8px 16px rgba(20, 22, 28, 0.06);
  --shadow-brand: 0 12px 32px rgba(239, 116, 0, 0.28);
  --shadow-sky:   0 12px 32px rgba(0, 184, 234, 0.24);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
  --dur-hero:   600ms;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container-sm: 720px;
  --container-md: 960px;
  --container-lg: 1200px;
  --container-xl: 1440px;
  --gutter: 24px;
}

/* ================================================================
   BASE · semantic element styles
   Opt-in by loading this file; safe defaults when used globally.
   ================================================================ */

html, body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--fg1);
  background: var(--bg1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Display / Headline */
h1, .h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: clamp(40px, 5.2vw, var(--text-5xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg1);
  margin: 0;
}

h2, .h2 {
  font-weight: var(--fw-bold);
  font-size: clamp(30px, 3.6vw, var(--text-3xl));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
  margin: 0;
}

h3, .h3 {
  font-weight: var(--fw-semibold);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
  margin: 0;
}

h4, .h4 {
  font-weight: var(--fw-semibold);
  font-size: var(--text-md);
  line-height: var(--lh-snug);
  color: var(--fg1);
  margin: 0;
}

p, .body {
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--fg2);
  margin: 0;
  text-wrap: pretty;
}

.lead {
  font-size: var(--text-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg2);
  font-weight: var(--fw-regular);
}

.eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand-primary);
}

.caption {
  font-size: var(--text-sm);
  color: var(--fg3);
  line-height: var(--lh-normal);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* Brand lockup helpers — replicate the logo spirit.
   "next" is light & smaller; "MOVE" is bold & larger — matches the real logo. */
.brand-next {
  font-family: var(--font-serif-brand);
  font-weight: 300;
  font-variation-settings: 'wght' 300;
  color: var(--brand-primary);
  letter-spacing: -0.01em;
}

.brand-move {
  font-family: var(--font-brush-brand);
  font-weight: 700;
  color: var(--brand-secondary);
  letter-spacing: 0.01em;
}

/* The 127º signature motif — the brand's "turn angle" */
.brand-127 {
  font-family: var(--font-sans);
  font-weight: var(--fw-black);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
  color: var(--brand-primary);
}