/* ============================================================
   VARIABLES.CSS — Technicalseals Design System
   Light, professional, with purposeful warmth
   ============================================================ */

:root {
  /* ── Backgrounds ────────────────────────────────── */
  --color-bg-main:        #FFFFFF;
  --color-bg-warm:        #F7F6F3;
  --color-bg-cool:        #F2F3F5;
  --color-bg-hero:        #0D1B3E;
  --color-bg-footer:      #0D1B3E;

  /* ── Text ───────────────────────────────────────── */
  --color-text-heading:   #111318;
  --color-text-primary:   #2C2E33;
  --color-text-secondary: #62656E;
  --color-text-muted:     #9B9EA6;
  --color-text-white:     #FFFFFF;

  /* ── Accent — one warm tone, used sparingly ─────── */
  --color-accent:         #B55A30;
  --color-accent-hover:   #C96A3D;

  /* ── Borders ────────────────────────────────────── */
  --color-border:         #E8E8EB;
  --color-border-hover:   #D0D0D5;

  /* ── Typography ─────────────────────────────────── */
  --font-heading:   'Outfit', system-ui, -apple-system, sans-serif;
  --font-body:      'Inter', system-ui, -apple-system, sans-serif;

  --text-display:   clamp(2.75rem, 5.5vw, 4.25rem);
  --text-h1:        clamp(2rem, 4vw, 3rem);
  --text-h2:        clamp(1.5rem, 2.5vw, 2rem);
  --text-h3:        1.25rem;
  --text-h4:        1.0625rem;
  --text-body:      0.9375rem;
  --text-small:     0.875rem;
  --text-xs:        0.8125rem;
  --text-xxs:       0.6875rem;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;
  --weight-extra:   800;

  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-body:   1.65;

  --tracking-tight:  -0.025em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;

  /* ── Spacing ────────────────────────────────────── */
  --space-4:   4px;   --space-8:   8px;
  --space-12:  12px;  --space-16:  16px;
  --space-20:  20px;  --space-24:  24px;
  --space-28:  28px;  --space-32:  32px;
  --space-40:  40px;  --space-48:  48px;
  --space-56:  56px;  --space-64:  64px;
  --space-80:  80px;  --space-96:  96px;

  /* ── Radius ─────────────────────────────────────── */
  --radius-sm:    4px;
  --radius-base:  6px;
  --radius-card:  8px;

  /* ── Shadows ────────────────────────────────────── */
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.06);

  /* ── Transitions ────────────────────────────────── */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* ── Layout ─────────────────────────────────────── */
  --container-max-width: 1080px;
  --container-padding:   24px;
  --nav-height:          72px;
  --section-py:          var(--space-80);
}

@media (min-width: 768px) {
  :root {
    --nav-height: 102px;
  }
}