/* ═══════════════════════════════════════════════════════════════
   TWIN RIVER DEVELOPMENT - main.css
   Global variables, resets, typography, utilities
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;600;700;800&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;1,300&display=swap');

/* ── CSS VARIABLES ──────────────────────────────────────────── */
:root {
  --blue:           #0074EC;
  --blue-dark:      #0059B8;
  --blue-light:     rgba(0, 116, 236, 0.16);
  --blue-muted:     rgba(90, 180, 247, 0.10);
  --gray:           #E8EDF8;
  --navy:           #071326;
  --navy-deep:      #050C18;
  --white:          #0C131E;
  --off-white:      #111B28;
  --border:         rgba(255,255,255,0.12);
  --border-light:   rgba(255,255,255,0.06);
  --text-primary:   #F4F7FB;
  --text-secondary: #A6B3C2;
  --text-muted:     #8593A6;
  --font-display:   'Jost', sans-serif;
  --font-body:      'Poppins', sans-serif;
  --sp-1:  4px;  --sp-2:  8px;  --sp-3:  12px; --sp-4:  16px;
  --sp-5:  20px; --sp-6:  24px; --sp-8:  32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-18: 72px; --sp-20: 80px; --sp-24: 96px;
  --radius-sm: 4px; --radius: 8px; --radius-lg: 12px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow:    0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
  --transition: 0.2s ease;
  --transition-slow: 0.35s ease;
  --max-width: 1200px;
  --max-width-narrow: 800px;
  --nav-height: 72px;
}

/* ── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html,
body {
  overflow-x: hidden;
}
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, video, svg { display: block; max-width: 100%; height: auto; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: var(--font-body); border: none; background: none; }

/* ── TYPOGRAPHY ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}
h1 { font-size: clamp(36px, 5vw, 56px); }
h2 { font-size: clamp(28px, 3.5vw, 40px); }
h3 { font-size: clamp(18px, 2vw, 22px); font-weight: 700; }
h4 { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
h5 { font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; }
p  { font-family: var(--font-body); font-weight: 400; color: var(--text-secondary); line-height: 1.75; }
strong { font-weight: 600; color: var(--text-primary); }
em { font-style: normal; color: var(--blue); }

/* ── SECTION LAYOUT ─────────────────────────────────────────── */
.section { padding: var(--sp-20) var(--sp-10); border-bottom: 0.5px solid var(--border); }
.section-alt { background: var(--off-white); }
.section-dark { background: var(--navy); border-bottom: 0.5px solid rgba(255,255,255,0.07); }
.section-inner { max-width: var(--max-width); margin: 0 auto; width: 100%; }
.section-inner--narrow { max-width: var(--max-width-narrow); }

/* ── SECTION LABELS & TITLES ────────────────────────────────── */
.section-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: var(--sp-3);
  display: block;
}
.section-dark .section-label { color: #5AB4F7; }
.section-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin-bottom: var(--sp-12);
  line-height: 1.15;
}
.section-dark .section-title { color: #FFFFFF; }

/* ── UTILITY ─────────────────────────────────────────────────── */
.text-center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 768px) { .section { padding: var(--sp-16) var(--sp-6); } }
@media (max-width: 480px) { .section { padding: var(--sp-12) var(--sp-5); } }
:root {
  color-scheme: dark;
}