/* ============================================================
   nformal Design System — token bundle
   Synced from the "nformal Design System" claude.ai project.
   Do not hand-edit values here; update the source project and
   re-sync instead.
   ============================================================ */

/* ---- Webfonts -------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,300..800;1,400..600&display=swap');

@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/fonts/SpaceGrotesk-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/fonts/SpaceGrotesk-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/fonts/SpaceGrotesk-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/fonts/SpaceGrotesk-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Brand greens (the signal) ------------------------- */
  --green-spring: #70F5A3;   /* C56 M4  Y36 K0  — primary accent  */
  --green-lime:   #BDFF6B;   /* C26 M0  Y58 K0  — secondary pop   */

  --green-spring-700: #2FB96B;
  --green-spring-600: #3FD17C;
  --green-spring-500: #5CE393;
  --green-spring-300: #9DF8C0;
  --green-spring-100: #DDFCEA;
  --green-lime-600:   #97E23F;
  --green-lime-100:   #EEFBD6;

  /* ---- Supporting hues (charts, illustration) ------------ */
  --teal:  #85ABB3;
  --slate: #6B77A2;
  --teal-100:  #E4EDEF;
  --slate-100: #E6E8F0;

  /* ---- Ink & neutrals (green-tinted cool grays) ---------- */
  --ink:        #0E1412;
  --ink-2:      #18211D;
  --ink-3:      #243029;

  --gray-900:   #1B221F;
  --gray-800:   #303a36;
  --gray-700:   #4a554f;
  --gray-600:   #66726c;
  --gray-500:   #879089;
  --gray-400:   #aab2ac;
  --gray-300:   #c9cfca;
  --gray-200:   #dfe4e0;
  --gray-150:   #E8ECEC;
  --gray-100:   #EEF1F0;
  --gray-50:    #F5F7F7;
  --white:      #FFFFFF;
  --mist:       #E8F0ED;

  /* ---- Semantic status ----------------------------------- */
  --status-success: #2FB96B;
  --status-warning: #E8B23A;
  --status-danger:  #E5604D;
  --status-info:    #6B77A2;

  /* ---- Semantic aliases ----------------------------------- */
  --surface-page:      var(--gray-50);
  --surface-card:      var(--white);
  --surface-sunken:    var(--mist);
  --surface-inverse:   var(--ink);
  --surface-inverse-2: var(--ink-2);

  --text-strong:   var(--ink);
  --text-body:     var(--gray-800);
  --text-muted:    var(--gray-600);
  --text-subtle:   var(--gray-500);
  --text-on-dark:  var(--gray-50);
  --text-on-dark-muted: #9aa8a0;
  --text-on-accent: var(--ink);

  --accent:        var(--green-spring);
  --accent-strong: var(--green-spring-600);
  --accent-soft:   var(--green-spring-100);
  --accent-alt:    var(--green-lime);

  --border-subtle: var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong: var(--gray-800);
  --border-on-dark: var(--ink-3);
  --focus-ring:    var(--green-spring-600);

  --link:        var(--ink);
  --link-hover:  var(--green-spring-700);

  /* ---- Typography ------------------------------------------ */
  --font-display: 'Space Grotesk', 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-text:    'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    'Space Grotesk', ui-monospace, 'SF Mono', Menlo, monospace;

  --w-light: 300;
  --w-regular: 400;
  --w-medium: 500;
  --w-bold: 700;

  --size-display-2xl: 5.5rem;
  --size-display-xl:  4rem;
  --size-display-lg:  3rem;
  --size-display-md:  2.25rem;
  --size-h1: 2rem;
  --size-h2: 1.5rem;
  --size-h3: 1.25rem;
  --size-body-lg: 1.125rem;
  --size-body: 1rem;
  --size-body-sm: 0.875rem;
  --size-caption: 0.75rem;
  --size-overline: 0.6875rem;

  --lh-tight: 1.02;
  --lh-snug: 1.15;
  --lh-heading: 1.2;
  --lh-body: 1.55;
  --lh-relaxed: 1.7;

  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-normal: 0em;
  --tracking-wide: 0.08em;
  --tracking-overline: 0.16em;

  /* ---- Spacing, radii, shadows, motion --------------------- */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  --border-w: 1px;
  --border-w-strong: 1.5px;

  --shadow-xs: 0 1px 2px rgba(14, 20, 18, 0.06);
  --shadow-sm: 0 2px 8px rgba(14, 20, 18, 0.07);
  --shadow-md: 0 8px 24px rgba(14, 20, 18, 0.09);
  --shadow-lg: 0 18px 48px rgba(14, 20, 18, 0.12);
  --shadow-accent: 0 10px 30px rgba(47, 185, 107, 0.28);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  --container: 1200px;
  --container-narrow: 760px;
}

/* ---- Base element defaults -------------------------------- */
.n-overline {
  font-family: var(--font-text);
  font-size: var(--size-overline);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  font-weight: var(--w-medium);
  color: var(--text-muted);
}

::selection { background: var(--green-spring); color: var(--ink); }