/* ============================================================
   TETRACON (PVT.) LTD. — Design Tokens (Corporate Blue)
   Primary #0057B8 · Secondary #0B2C52 · Accent #00AEEF
   Background #FFFFFF · Section Background #F5F7FA
   ============================================================ */

:root {

  /* ---------- Color: Core brand palette ---------- */
  --primary: #3379C6;
  --primary-hover: #336BA5;
  --accent: #00AEEF;

  /* Dark neutrals — corporate navy for footer / dark bands */
  --navy-950: #39495A;
  --navy-900: #3C5675;
  --navy-800: #416082;
  --navy-700: #486A91;
  --navy-600: #4F75A6;
  --navy-500: #5881B8;

  /* Accent range — tints/shades of the brand accent only */
  --teal-700: #005A80;
  --teal-600: #0072A3;
  --teal-500: #0090C9;
  --teal-400: #00AEEF;

  --cyan-500: #33BEF2;
  --cyan-400: #33C0F2;
  --cyan-300: #66D0F5;

  --white: #ffffff;
  --gray-50: #FFFFFF;
  --gray-100: #F5F7FA;
  --gray-200: #E3E8EF;
  --gray-300: #C9D3DF;
  --gray-500: #64748A;
  --gray-600: #47536B;
  --gray-700: #2E3A4E;

  /* ---------- Color: Semantic ---------- */
  --bg-page: #FFFFFF;
  --bg-alt: #F5F7FA;
  --bg-dark: var(--navy-900);
  --bg-dark-deep: var(--navy-950);

  --text-primary: #14213D;
  --text-secondary: #5B6675;
  --text-on-dark: #F3F8FC;
  --text-on-dark-dim: #A9C6DE;

  --border-light: #E3E8EF;
  --border-dark: rgba(255, 255, 255, 0.12);

  --grad-primary: linear-gradient(135deg, var(--primary) 0%, var(--teal-500) 55%, var(--accent) 100%);
  --grad-primary-hover: linear-gradient(135deg, var(--accent) 0%, var(--teal-500) 55%, var(--primary) 100%);
  --grad-mesh: radial-gradient(circle at 15% 20%, rgba(0, 174, 239, 0.20), transparent 45%),
               radial-gradient(circle at 85% 15%, rgba(51, 121, 198, 0.28), transparent 50%),
               radial-gradient(circle at 50% 90%, rgba(57, 73, 90, 0.55), transparent 60%);
  --grad-line: linear-gradient(90deg, transparent, var(--accent), transparent);

  /* ---------- Typography ---------- */
  --font-display: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'Inter', 'Segoe UI', sans-serif;

  --fs-hero: clamp(2.6rem, 5.4vw, 5rem);
  --fs-h1: clamp(2.2rem, 4vw, 3.4rem);
  --fs-h2: clamp(1.8rem, 3vw, 2.6rem);
  --fs-h3: clamp(1.3rem, 2vw, 1.7rem);
  --fs-h4: 1.15rem;
  --fs-lead: clamp(1.05rem, 1.6vw, 1.3rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-normal: 1.6;

  --ls-tight: -0.02em;
  --ls-wide: 0.14em;

  /* ---------- Spacing ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 5rem;
  --space-16: 7rem;
  --space-20: 9rem;

  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  /* ---------- Radius & Shadow ---------- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(11, 44, 82, 0.06);
  --shadow-md: 0 10px 30px rgba(11, 44, 82, 0.10);
  --shadow-lg: 0 24px 60px rgba(11, 44, 82, 0.16);
  --shadow-glow: 0 0 0 1px rgba(0, 87, 184, 0.25), 0 20px 50px rgba(0, 174, 239, 0.22);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 220ms;
  --dur-mid: 480ms;
  --dur-slow: 900ms;

  /* ---------- Z-index ---------- */
  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;
}

[data-theme="dark"] {
  --bg-page: var(--navy-900);
  --bg-alt: var(--navy-800);
  --text-primary: var(--text-on-dark);
  --text-secondary: var(--text-on-dark-dim);
  --border-light: var(--border-dark);
}