/* ============================================================
   HK TRISENTA — Design Tokens
   Mercedes-Benz inspired corporate identity system
   ============================================================ */

:root {
  /* color — core */
  --ink-900: #0B0B0F;
  --ink-800: #15151B;
  --ink-700: #1F1F26;
  --ink-500: #3A3A42;
  --ink-300: #7A7A82;
  --ink-100: #C9C9CE;
  --paper-50: #F4F4F1;
  --paper-100: #FFFFFF;
  --paper-200: #E8E8E3;

  /* color — silver */
  --silver-300: #E0E0E0;
  --silver-500: #C0C0C0;
  --silver-700: #8A8A8F;

  /* color — navy (signature) */
  --navy-900: #0E2557;
  --navy-700: #1B3A8C;
  --navy-500: #3D5DAA;
  --navy-300: #A6B4D9;

  /* color — copper */
  --copper-900: #7A4A1E;
  --copper-700: #B87333;
  --copper-500: #D49459;
  --copper-300: #E8C8A6;

  /* color — semantic */
  --success: #1F8A5A;
  --warning: #D4A017;
  --danger: #C0392B;

  /* gradients */
  --grad-hero-dark: linear-gradient(135deg, #0B0B0F 0%, #15151B 50%, #0E2557 100%);
  --grad-hero-light: linear-gradient(135deg, #F4F4F1 0%, #FFFFFF 60%, #E8E8E3 100%);
  --grad-copper-glow: radial-gradient(circle at 30% 30%, rgba(184,115,51,.25) 0%, transparent 60%);
  --grad-kinetic: linear-gradient(90deg, #1B3A8C 0%, #3D5DAA 40%, #B87333 100%);

  /* type families */
  --font-display: "Inter Tight", "Helvetica Neue", system-ui, sans-serif;
  --font-body: "Inter", "Helvetica Neue", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* type scale (modular, ratio 1.333) */
  --fs-overline: 0.6875rem;     /* 11 */
  --fs-caption:  0.8125rem;     /* 13 */
  --fs-body-sm:  0.9375rem;     /* 15 */
  --fs-body:     1.0625rem;     /* 17 */
  --fs-lead:     1.375rem;      /* 22 */
  --fs-h6:       1.125rem;      /* 18 */
  --fs-h5:       1.5rem;        /* 24 */
  --fs-h4:       2rem;          /* 32 */
  --fs-h3:       2.625rem;      /* 42 */
  --fs-h2:       3.5rem;        /* 56 */
  --fs-h1:       4.75rem;       /* 76 */
  --fs-display:  7rem;          /* 112 */

  /* weight & tracking */
  --tracking-tight: -0.02em;
  --tracking-wide: 0.16em;
  --lh-body: 1.55;
  --lh-display: 1.05;

  /* spacing — 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 192px;

  /* radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* elevation */
  --shadow-sm: 0 1px 2px rgba(11,11,15,.06), 0 1px 1px rgba(11,11,15,.04);
  --shadow-md: 0 8px 24px -8px rgba(11,11,15,.18), 0 2px 6px rgba(11,11,15,.06);
  --shadow-lg: 0 24px 48px -12px rgba(11,11,15,.25);
  --shadow-xl: 0 40px 80px -20px rgba(11,11,15,.35);
  --glow-navy: 0 0 0 1px rgba(27,58,140,.5), 0 12px 32px -8px rgba(27,58,140,.45);
  --glow-copper: 0 0 32px -8px rgba(184,115,51,.6);

  /* motion — easing */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.83, 0, 0.17, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-linear: linear;

  /* motion — duration */
  --dur-instant: 120ms;
  --dur-quick: 220ms;
  --dur-base: 420ms;
  --dur-slow: 720ms;
  --dur-cinematic: 1400ms;
  --dur-marquee: 28000ms;

  /* breakpoints (used by container queries if needed) */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;

  /* z-index scale */
  --z-base: 0;
  --z-content: 10;
  --z-overlay: 100;
  --z-nav: 1000;
  --z-modal: 2000;
  --z-toast: 3000;
  --z-cursor: 9999;

  /* container */
  --container-max: 1440px;
  --container-tablet: 1024px;
  --gutter: 24px;
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}