/* variables.css — Design Tokens for SM Zenith Agency */
:root {
  /* ── Colors ── */
  --bg:           #F8F7F4;
  --bg-white:     #FFFFFF;
  --dark:         #0D0D0F;
  --dark-2:       #161618;
  --navy:         #1A3C5E;
  --navy-mid:     #1E4870;
  --navy-light:   #2D6A9F;
  --gold:         #C8A96A;
  --gold-hover:   #B8964E;
  --gold-subtle:  rgba(200, 169, 106, 0.12);
  --text-1:       #0D0D0F;
  --text-2:       #5A5A6E;
  --text-3:       #9B9BAD;
  --border:       #E4E4EB;
  --border-dark:  rgba(255, 255, 255, 0.08);
  --trust-green:  #1B5E3B;

  /* ── Typography ── */
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* ── Type Scale ── */
  --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:  2rem;
  --text-4xl:  2.5rem;
  --text-5xl:  3.25rem;
  --text-hero: clamp(2.75rem, 6vw, 4.5rem);

  /* ── Spacing (8px grid) ── */
  --sp-1:  8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  32px;
  --sp-5:  40px;
  --sp-6:  48px;
  --sp-7:  64px;
  --sp-8:  80px;
  --sp-9:  96px;
  --sp-10: 120px;

  /* ── Layout ── */
  --container:    1200px;
  --container-sm: 800px;
  --pad:          clamp(16px, 4vw, 32px);
  --section-pad:  clamp(72px, 10vw, 120px);

  /* ── Radius ── */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 32px;

  /* ── Shadows ── */
  --shadow-card:     0 1px 4px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06);
  --shadow-elevated: 0 8px 24px rgba(0,0,0,0.10), 0 24px 48px rgba(0,0,0,0.06);
  --shadow-nav:      0 1px 0 var(--border);

  /* ── Transitions ── */
  --ease:   cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.15s;
  --t-base: 0.25s;
  --t-slow: 0.45s;
}