/* ============================================================
   variables.css — Design Tokens & CSS Reset
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');

:root {
  --navy:         #071220;
  --navy-mid:     #0c1c35;
  --accent:       #2563eb;
  --accent-hover: #1d4ed8;
  --accent-light: #dbeafe;
  --green:        #2563eb;
  --green-dk:     #25D366;

  --gray-50:  #f8fafc; --gray-100: #f1f5f9; --gray-200: #e2e8f0;
  --gray-300: #cbd5e1; --gray-400: #94a3b8; --gray-500: #64748b;
  --gray-600: #475569; --gray-700: #334155; --gray-800: #1e293b;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 20px rgba(7,18,32,0.12);
  --shadow-lg: 0 20px 60px rgba(7,18,32,0.22);

  --r-sm:4px; --r-md:10px; --r-lg:16px; --r-xl:24px; --r-full:9999px;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --max-w: 1240px;
  --nav-h: 76px;
}

/* Reset */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family: var(--font-body);
  background: var(--navy); /* dark bg eliminates white stripe between sections */
  color: var(--gray-800);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button, input, select, textarea { font-family:var(--font-body); }
ul { list-style:none; }

/* Utilities */
.container { max-width:var(--max-w); margin-inline:auto; padding-inline:40px; }
.section    { padding-block:60px; }
.section--dark  { background: var(--navy); }
.section--white { background: #ffffff; }
.section--sky   { background: #eff6ff; }

.section__tag { display:block; font-size:14px; font-weight:600; letter-spacing:2.5px; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
.section--dark .section__tag { color:#93c5fd; }

.section__title { font-family:var(--font-display); font-size:clamp(22px,3vw,38px); font-weight:700; color:var(--gray-800); line-height:1.15; margin-bottom:10px; }
.section--dark .section__title { color:white; }

.section__desc { font-size:15px; color:var(--gray-500); line-height:1.75; max-width:520px; font-weight:300; }
.section--dark .section__desc { color:rgba(255,255,255,0.55); }

@media (max-width:768px) { .container{padding-inline:20px;} .section{padding-block:48px;} }