/* ============================================================================
   NODWISE MARKETING · THEME TOKENS
   ----------------------------------------------------------------------------
   The resolved values of the product's token layer (grays, primary, secondary,
   surfaces, sizes) that every page, typography role and component reads.

   The product declares these inside Tailwind's `@theme`, which a browser ignores,
   so a static page has to publish them on :root itself. These are exactly the
   values the design handoff was rendered against
   (docs/design_handoff_marketing_v2/.../css/_preview-shim.css), minus the
   preview-only comparison faces. Change a value here only when the product's
   token changes.

   Link order: fonts.css, then this file, then typography-site.css.
   ============================================================================ */

:root {
  color-scheme: dark;

  --font-sans: "DM Sans", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --font-serif: "DM Serif Display", Georgia, Cambria, "Times New Roman", Times, serif;

  --gray-50: #F4F9FE;
  --gray-100: #E4F1FF;
  --gray-200: #CCD9E6;
  --gray-300: #ADB9C5;
  --gray-400: #8B97A2;
  --gray-500: #68737E;
  --gray-600: #49545E;
  --gray-700: #2F3943;
  --gray-800: #172029;
  --gray-900: #030A12;
  --gray-950: #000810;

  --primary-200: #D4FF00;
  --primary-400: #849E00;
  --primary-600: #4A5800;
  --primary-700: #333D00;
  --secondary-50: #F4F9FE;
  --secondary-100: #C2E1FF;
  --secondary-200: #3D9EFF;
  --secondary-300: #0770D9;
  --secondary-400: #0052A3;
  --secondary-500: #002E5C;
  --secondary-600: #001F3D;
  --secondary-700: #000810;

  --text1: light-dark(var(--gray-900), var(--secondary-50));
  --text2: light-dark(var(--gray-700), var(--gray-100));
  --text3: var(--gray-500);
  --text-muted: light-dark(var(--gray-300), color-mix(in srgb, var(--gray-100) 50%, transparent));
  --text-accent: light-dark(var(--primary-700), var(--primary-200));
  --text-accent-2: #0770D9;
  --surface2: light-dark(#F3F0E8, #1A1F26);
  --surface-menu-text: light-dark(var(--gray-700), var(--secondary-50));
  --surface-menu-text-hover: light-dark(#000A14, var(--primary-400));
  --surface-menu-text-selected: light-dark(#001F3D, var(--primary-200));
  --surface-link-text: light-dark(var(--gray-600), var(--secondary-100));
  --surface-link-text-hover: light-dark(var(--gray-800), var(--secondary-50));
  --surface-link-text-selected: light-dark(#001F3D, var(--secondary-200));

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 20px;
  --space-5: 32px;
  --space-6: 52px;
  --space-7: 84px;
  --radius-1: 4px;
  --radius-2: 8px;
  --radius-3: 12px;
  --radius-4: 16px;
  --radius-pill: 9999px;

  /* Small-text weight: a dark surface uses 300 (halation). Not light-dark(): font-weight does
     not honour it, so the pair has to come by selector. */
  --weight-small: 400;
  --weight-overline: 500;
}

html[data-theme="dark"] { --weight-small: 300; --weight-overline: 400; }

html[data-theme="light"] { color-scheme: light; --weight-small: 400; --weight-overline: 500; }
html[data-theme="dark"]  { color-scheme: dark; }