/* Pinnacle Circuits — Design Tokens
   Source of truth for color, type, space, motion.
   Brand guide: ../brand/BRAND_GUIDE.md
   Extracted from live pinnaclecircuits.com (navy #00408b + yellow #ffc600 + Open Sans). */

:root {
  /* ── Palette (raw brand) ───────────────────────────────────────── */
  --palette-navy: #00408b;
  --palette-navy-dark: #002f66;
  --palette-navy-deeper: #001f44;
  --palette-navy-light: #2b579a;
  --palette-navy-soft: #428bca;
  --palette-yellow: #ffc600;
  --palette-yellow-dark: #e6b200;
  --palette-yellow-ink: #413408;
  --palette-white: #ffffff;
  --palette-gray-50: #f7f8fa;
  --palette-gray-100: #eef1f5;
  --palette-gray-200: #dde3eb;
  --palette-gray-300: #c5ced9;
  --palette-gray-400: #8a94a3;
  --palette-gray-500: #5c6570;
  --palette-gray-600: #3d454f;
  --palette-gray-700: #333333;
  --palette-gray-800: #1a1f26;
  --palette-gray-900: #090909;
  --palette-black: #000000;
  --palette-success: #3a7d34;
  --palette-warning: #f0ad4e;
  --palette-error: #ec3f41;

  /* Legacy aliases (prefer navy/yellow names in new CSS) */
  --palette-copper: var(--palette-yellow);
  --palette-copper-light: var(--palette-yellow);
  --palette-copper-dark: var(--palette-yellow-dark);
  --palette-sand-50: var(--palette-gray-50);
  --palette-sand-100: var(--palette-gray-100);
  --palette-sand-200: var(--palette-gray-200);
  --palette-sand-300: var(--palette-gray-300);
  --palette-olive: var(--palette-navy-soft);
  --palette-olive-light: var(--palette-navy-light);

  /* ── Semantic ──────────────────────────────────────────────────── */
  --color-bg: var(--palette-white);
  --color-bg-alt: var(--palette-gray-50);
  --color-bg-elevated: var(--palette-white);
  --color-bg-inverse: var(--palette-navy-deeper);
  --color-bg-hero: var(--palette-navy-deeper);
  --color-text: var(--palette-gray-700);
  --color-text-secondary: var(--palette-gray-500);
  --color-text-muted: var(--palette-gray-400);
  --color-text-inverse: var(--palette-white);
  --color-heading: var(--palette-navy);
  --color-heading-inverse: var(--palette-white);
  --color-link: var(--palette-navy);
  --color-link-hover: var(--palette-navy-light);
  --color-border: var(--palette-gray-200);
  --color-border-strong: var(--palette-gray-300);
  --color-border-focus: var(--palette-navy);
  --color-accent: var(--palette-yellow);
  --color-accent-hover: var(--palette-yellow-dark);
  --color-accent-subtle: #ffe58a;
  --color-accent-ink: var(--palette-yellow-ink);
  --color-brand: var(--palette-navy);
  --color-brand-hover: var(--palette-navy-dark);
  --color-success: var(--palette-success);
  --color-warning: var(--palette-warning);
  --color-error: var(--palette-error);

  /* ── Component ─────────────────────────────────────────────────── */
  /* Primary CTA = yellow (matches legacy "Free Instant Access") */
  --btn-primary-bg: var(--palette-yellow);
  --btn-primary-bg-hover: var(--palette-yellow-dark);
  --btn-primary-text: var(--palette-yellow-ink);
  /* Secondary = navy outline / fill for alternate actions */
  --btn-secondary-bg: transparent;
  --btn-secondary-border: var(--palette-navy);
  --btn-secondary-text: var(--palette-navy);
  --btn-brand-bg: var(--palette-navy);
  --btn-brand-bg-hover: var(--palette-navy-dark);
  --btn-brand-text: var(--palette-white);
  --btn-inverse-bg: var(--palette-white);
  --btn-inverse-text: var(--palette-navy);
  --nav-bg: rgba(255, 255, 255, 0.94);
  --nav-bg-dark: rgba(0, 31, 68, 0.92);
  --nav-text: var(--palette-navy);
  --nav-text-on-dark: var(--palette-white);
  --card-bg: var(--palette-white);
  --card-border: var(--palette-gray-200);
  --input-bg: var(--palette-white);
  --input-border: var(--palette-gray-300);
  --input-text: var(--palette-gray-700);
  --overlay-hero: linear-gradient(
    105deg,
    rgba(0, 31, 68, 0.9) 0%,
    rgba(0, 64, 139, 0.62) 48%,
    rgba(0, 64, 139, 0.38) 100%
  );

  /* ── Typography (brand: Open Sans) ─────────────────────────────── */
  --font-display: "Open Sans", "Segoe UI", sans-serif;
  --font-body: "Open Sans", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Consolas", monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-hero: clamp(2.5rem, 6vw, 4.25rem);

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-wider: 0.14em;

  /* ── Spacing (4px grid) ────────────────────────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6rem;
  --space-12: 8rem;
  --section-y: clamp(3.5rem, 8vw, 6.5rem);
  --container: 72rem;
  --container-narrow: 42rem;
  --gutter: clamp(1rem, 4vw, 2rem);

  /* ── Radius / elevation / motion ───────────────────────────────── */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(0, 64, 139, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 64, 139, 0.1);
  --shadow-lg: 0 12px 40px rgba(0, 31, 68, 0.16);
  --shadow-focus: 0 0 0 3px rgba(0, 64, 139, 0.35);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-base: 280ms;
  --duration-slow: 500ms;
  --duration-reveal: 700ms;

  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 1ms;
    --duration-base: 1ms;
    --duration-slow: 1ms;
    --duration-reveal: 1ms;
  }
}