/**
 * RSN-GRUPP design tokens — V6 Client Approved
 * Values from reference/design-inventory-v6.json + live Pencil resolved fills.
 */

:root {
  /* Brand / surfaces (V2 palette used by V6) */
  --rsn-navy: #081b33;
  --rsn-hero-ink: #081321;
  --rsn-corporate-blue: #1267b1;
  --rsn-blue-hover: #0d5594;
  --rsn-rack-red: #c92a2a;
  --rsn-red-hover: #ae2020;
  --rsn-graphite: #1b222b;
  --rsn-steel: #627181;
  --rsn-ice: #f2f6fa;
  --rsn-warm: #f5f1ea;
  --rsn-border: #d8e0e8;
  --rsn-white: #ffffff;

  /* Section-specific fills from V6 nodes */
  --rsn-navigator-bg: #d8e2ec;
  --rsn-protective-bg: #07182b;
  --rsn-about-bg: #f7f9fb;
  --rsn-footer-bg: #061426;
  --rsn-mobile-soft: #f4f7fa;

  /* Legacy / UI system tokens still referenced in components */
  --rsn-accent-red: #d62828;
  --rsn-accent-red-hover: #b91f1f;
  --rsn-steel-gray: #8d959e;
  --rsn-border-strong: #c4cad0;
  --rsn-text-secondary: #5f6872;
  --rsn-surface-muted: #eceff1;
  --rsn-disabled-bg: #e5e8eb;
  --rsn-disabled-text: #9aa2aa;
  --rsn-focus-ring: #d62828;
  --rsn-overlay: rgba(6, 20, 38, 0.56);

  /* Typography */
  --rsn-font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rsn-fs-12: 0.75rem;
  --rsn-fs-13: 0.8125rem;
  --rsn-fs-14: 0.875rem;
  --rsn-fs-15: 0.9375rem;
  --rsn-fs-16: 1rem;
  --rsn-fs-18: 1.125rem;
  --rsn-fs-20: 1.25rem;
  --rsn-fs-24: 1.5rem;
  --rsn-fs-28: 1.75rem;
  --rsn-fs-32: 2rem;
  --rsn-fs-40: 2.5rem;
  --rsn-fs-48: 3rem;
  --rsn-fs-56: 3.5rem;
  --rsn-lh-tight: 1.06;
  --rsn-lh-snug: 1.2;
  --rsn-lh-body: 1.5;
  --rsn-lh-relaxed: 1.6;

  /* Radii */
  --rsn-radius-button: 12px;
  --rsn-radius-card: 20px;
  --rsn-radius-field: 12px;
  --rsn-radius-chip: 999px;

  /* Spacing scale */
  --rsn-space-4: 4px;
  --rsn-space-8: 8px;
  --rsn-space-12: 12px;
  --rsn-space-16: 16px;
  --rsn-space-20: 20px;
  --rsn-space-24: 24px;
  --rsn-space-32: 32px;
  --rsn-space-40: 40px;
  --rsn-space-48: 48px;
  --rsn-space-64: 64px;
  --rsn-space-80: 80px;
  --rsn-space-96: 96px;
  --rsn-space-120: 120px;

  /* Layout */
  --rsn-page-max: 1440px;
  --rsn-container: 1240px;
  --rsn-gutter: 100px;
  --rsn-header-h: 92px;
  --rsn-header-h-mobile: 76px;

  /* Breakpoints (for reference in JS / media queries) */
  --rsn-bp-mobile: 390px;
  --rsn-bp-sm: 360px;
  --rsn-bp-md: 768px;
  --rsn-bp-lg: 1024px;
  --rsn-bp-xl: 1280px;
  --rsn-bp-desktop: 1440px;
  --rsn-bp-xxl: 1920px;

  /* Motion */
  --rsn-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --rsn-duration-fast: 180ms;
  --rsn-duration: 200ms;
  --rsn-duration-reveal: 520ms;

  /* Semantic aliases */
  --rsn-color-text: var(--rsn-graphite);
  --rsn-color-text-muted: var(--rsn-steel);
  --rsn-color-bg: var(--rsn-white);
  --rsn-color-primary: var(--rsn-rack-red);
  --rsn-color-primary-hover: var(--rsn-red-hover);
  --rsn-color-link: var(--rsn-corporate-blue);
}

@media (max-width: 1439px) {
  :root {
    --rsn-gutter: clamp(16px, 4vw, 100px);
  }
}

@media (max-width: 1023px) {
  :root {
    --rsn-header-h: var(--rsn-header-h-mobile);
    --rsn-gutter: 16px;
  }
}