/* ==========================================================================
   AKAVARI CONSULTANCY — Design Tokens
   Single source of truth for color, type, spacing, radius, shadow, motion.
   ========================================================================== */

:root {
  /* ---- Brand core (fixed by logo) ---- */
  --navy-900: #111F37;      /* primary brand navy */
  --red-600:  #C12126;      /* primary brand red */

  /* ---- Extended navy ramp ---- */
  --navy-950: #0A1526;      /* deepest — footer, high-contrast panels */
  --navy-850: #152A4A;      /* card surfaces on dark sections */
  --navy-700: #1E3862;      /* borders / hover on dark */
  --navy-500: #3E547C;      /* muted headings on dark */
  --navy-300: #8B98B4;      /* muted body copy on dark */
  --navy-100: #E7EAF1;      /* soft navy-grey tint — section backgrounds */
  --navy-050: #F3F5F9;      /* faint tint — alternating light sections */

  /* ---- Extended red ramp ---- */
  --red-700: #98191D;       /* hover / pressed state */
  --red-500: #D94146;       /* lighter red for dark-bg accents */
  --red-100: #F9DADA;       /* badge / tag backgrounds */
  --red-050: #FCEDED;       /* faint red wash */

  /* ---- Neutrals ---- */
  --white:    #FFFFFF;
  --off-white:#FAF9F6;
  --grey-050: #F5F6F8;
  --grey-100: #EBEDF1;
  --grey-300: #C7CCD6;
  --grey-500: #7C8798;      /* soft navy-grey — secondary text */
  --charcoal: #1A1D24;      /* body copy on light backgrounds */

  /* ---- Semantic ---- */
  --bg-page: var(--off-white);
  --bg-surface: var(--white);
  --bg-sunken: var(--navy-050);
  --bg-inverse: var(--navy-900);
  --text-primary: var(--navy-900);
  --text-secondary: var(--grey-500);
  --text-on-dark: var(--white);
  --text-on-dark-muted: var(--navy-300);
  --accent: var(--red-600);
  --accent-hover: var(--red-700);
  --border-light: var(--grey-100);
  --border-dark: var(--navy-700);

  /* ---- Typography ---- */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-h1: clamp(2.5rem, 2rem + 2.4vw, 4.25rem);
  --fs-h2: clamp(1.875rem, 1.55rem + 1.4vw, 2.75rem);
  --fs-h3: clamp(1.3rem, 1.15rem + 0.6vw, 1.625rem);
  --fs-h4: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --fs-body-lg: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8125rem;

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-normal: 1.55;

  /* ---- Spacing scale ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 6.5rem;
  --sp-10: 9rem;

  /* ---- Radius ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 999px;

  /* ---- Shadow (navy-tinted, never pure black) ---- */
  --shadow-sm: 0 2px 8px rgba(17, 31, 55, 0.06);
  --shadow-md: 0 12px 28px rgba(17, 31, 55, 0.10);
  --shadow-lg: 0 24px 60px rgba(17, 31, 55, 0.16);
  --shadow-red: 0 12px 24px rgba(193, 33, 38, 0.24);

  /* ---- Motion (durations validated against real-world easing data) ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-base: 300ms;
  --dur-slow: 450ms;

  /* ---- Layout ---- */
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --header-h: 104px;
  --header-h-scrolled: 80px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}