/**
 * New Gen Research — design tokens (single source for theme CSS).
 * Mirrors docs/branding.md
 */

:root {
  /* Colors — branding.md §2 */

  --color-primary: #1b2d6b; /* Navy Blue */
  --color-primary-dark: #0a1a47; /* Deep Navy */
  --color-primary-hover: #0a1a47;

  --color-secondary: #6d6e71; /* Steel Gray */
  --color-highlight: #b0b8c8; /* Silver Blue */
  --color-highlight-muted: #d0d4de;

  --color-accent: #1b2d6b;
  --color-accent-hover: #0a1a47;

  --color-background-muted: #f2f4f7; /* Off-White */
  --color-background: #ffffff;
  --color-surface: #ffffff;

  --color-text: #1b2d6b;
  --color-text-secondary: #6d6e71;

  --color-border: #d0d4de;
  --color-border-card: rgba(0, 0, 0, 0.1);

  /* Calm, cool-toned feedback — no warm reds/oranges per brand guide */
  --color-warning: #6d6e71;
  --color-danger: #1b2d6b;

  --color-on-primary: #ffffff;
  --color-on-accent: #ffffff;

  /* Tags & badges — branding.md §5 */
  --color-tag-brand: #e6ecf8;
  --color-tag-neutral: #edeeef;
  --color-tag-neutral-text: #444446;

  --color-surface-muted: color-mix(
    in srgb,
    var(--color-background-muted) 75%,
    var(--color-surface)
  );

  --color-border-subtle: color-mix(
    in srgb,
    var(--color-border) 85%,
    var(--color-surface)
  );

  /* Typography — Option A (Space Grotesk + DM Sans), Rajdhani for hero labels */
  --font-display:
    "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:
    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-logo:
    "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-hero-brand: "Rajdhani", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 600; /* brand max — never above 600 */
  --font-weight-display: 600;

  /* Type scale — branding.md §3 */
  --text-2xs: 10px;
  --text-xs: 11px; /* eyebrow min */
  --text-sm: 13px; /* eyebrow max, buttons */
  --text-base: 15px; /* body min */
  --text-md: 16px; /* body max */
  --text-lg: 17px; /* H3 */
  --text-xl: 22px; /* H2 */
  --text-2xl: 28px; /* H1 */
  --text-3xl: 36px; /* display min */
  --text-4xl: 48px; /* display max */

  /* Line heights */
  --leading-tight: 1.2;
  --leading-snug: 1.25; /* headings (1.2–1.3) */
  --leading-normal: 1.3;
  --leading-relaxed: 1.5;
  --leading-loose: 1.65;
  --leading-body: 1.7;

  /* Letter spacing */
  --tracking-display: -0.02em;
  --tracking-h1: -0.01em;
  --tracking-label: 0.08em; /* eyebrow / category labels */
  --tracking-caption: 0.04em;

  /* Spacing scale — 8px base, branding.md §6 */
  --space-1: 4px; /* xs */
  --space-2: 8px; /* sm */
  --space-3: 12px;
  --space-4: 16px; /* md */
  --space-5: 20px;
  --space-6: 24px; /* lg */
  --space-8: 32px;
  --space-10: 40px; /* xl */
  --space-12: 48px;
  --space-16: 64px; /* 2xl */
  --space-20: 80px;
  --space-24: 96px;

  /* Border radius — branding.md §5 */
  --radius-none: 0;
  --radius-sm: 6px; /* buttons, inputs */
  --radius-md: 8px;
  --radius-lg: 12px; /* cards */
  --radius-full: 9999px;

  /* No drop shadows — borders only per brand guide */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-accent: none;

  /* Flat fills — gradients prohibited per brand guide */
  --gradient-dark-band: #0a1a47;
  --gradient-dark-band-soft: #1b2d6b;
  --banner-gradient: #1b2d6b;

  --banner-deal: #8fe8c3;
  --banner-amount: #ffffff;
  --banner-tag: #e6ecf8;

  /* Layout */
  --outer-layout-max: 1360px;
  --layout-max: 1280px;
  --header-height: 72px;
  --header-height-mobile: 56px;
  --banner-height: 48px;
  --banner-height-mobile: 36px;
  --home-fold-chrome: calc(var(--banner-height) + var(--header-height));
  --home-fold-chrome-mobile: calc(
    var(--banner-height-mobile) + var(--header-height-mobile)
  );
  --size-touch: 44px;
  --size-touch-lg: 48px;

  /* Motion — branding.md §7 */
  --ease-ui: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-hero: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-ui: 200ms;
  --duration-page: 500ms;
  --duration-hero: 550ms;
  --duration-hero-stagger: 70ms;
  --hero-autoplay-duration: 6000ms;

  /* Focus — branding.md §5 form inputs */
  --focus-ring: 0 0 0 2px #b0b8c8;
  --focus-offset: 0;
}