/* ═══════════════════════════════════════════════════════════
   GLOBAL.CSS — Umbrella Corp HQ
   Design tokens, typography, buttons, utilities
═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');

/* ─── Design Tokens ─────────────────────────────────────── */

:root {
  /* Brand Colors */
  --void:        #0a0a0a;
  --corp-red:    #c1121f;
  --ivory:       #f0ede8;
  --carbon:      #1e1e1e;
  --steel:       #555555;
  --deep-red:    #7a0d15;

  /* Typography */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  /* Layout */
  --container-max:    1440px;
  --container-pad:    120px;
  --container-pad-md: 60px;
  --container-pad-sm: 24px;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-med:  0.4s ease;
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);

  /* Navigation */
  --nav-height: 80px;
}

/* ─── Base ──────────────────────────────────────────────── */

html {
  scroll-behavior: auto; /* Lenis handles smooth scroll */
}

body {
  background:    var(--void);
  color:         var(--ivory);
  font-family:   var(--font-body);
  font-weight:   400;
  font-size:     16px;
  line-height:   1.6;
  cursor:        none;
  overflow-x:    hidden;
}

::selection {
  background: var(--corp-red);
  color:      var(--ivory);
}

/* ─── Layout ────────────────────────────────────────────── */

.container {
  max-width: var(--container-max);
  margin:    0 auto;
  padding:   0 var(--container-pad);
}

@media (max-width: 1200px) {
  .container {
    padding: 0 var(--container-pad-md);
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 var(--container-pad-sm);
  }
}

/* ─── Typography Scale ──────────────────────────────────── */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family:    var(--font-display);
  font-weight:    400;
  line-height:    0.95;
  letter-spacing: 0.02em;
}

.section-tag {
  font-size:      12px;
  color:          var(--corp-red);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  margin-bottom:  16px;
  display:        block;
  font-family:    var(--font-body);
  font-weight:    500;
}

.section-heading {
  font-family: var(--font-display);
  font-size:   clamp(48px, 6vw, 96px);
  line-height: 0.95;
  color:       var(--ivory);
}

.section-heading .accent {
  color: var(--corp-red);
}

.section-subtext {
  font-size:   18px;
  color:       var(--steel);
  line-height: 1.7;
  max-width:   600px;
  margin-top:  24px;
}

/* ─── Buttons ───────────────────────────────────────────── */

.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  padding:         16px 40px;
  font-family:     var(--font-body);
  font-size:       14px;
  font-weight:     500;
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  transition:      all var(--transition-med);
  cursor:          pointer;
  position:        relative;
  overflow:        hidden;
  text-decoration: none;
}

.btn-primary {
  background:   var(--corp-red);
  color:        var(--ivory);
  border:       1px solid var(--corp-red);
}

.btn-primary:hover {
  background:   var(--deep-red);
  border-color: var(--deep-red);
}

.btn-secondary {
  background:   transparent;
  color:        var(--ivory);
  border:       1px solid rgba(240, 237, 232, 0.3);
}

.btn-secondary:hover {
  border-color: var(--corp-red);
  color:        var(--corp-red);
}

.btn-white {
  background: var(--ivory);
  color:      var(--void);
  border:     1px solid var(--ivory);
}

.btn-white:hover {
  background: transparent;
  color:      var(--ivory);
}

/* ─── Utility Classes ───────────────────────────────────── */

.text-red       { color: var(--corp-red); }
.text-steel     { color: var(--steel); }
.text-ivory     { color: var(--ivory); }
.overflow-hidden { overflow: hidden; }
.relative       { position: relative; }

/* ─── Image Placeholder ─────────────────────────────────── */

.img-placeholder {
  background:     #141414;
  display:        flex;
  align-items:    center;
  justify-content: center;
  color:          var(--steel);
  font-size:      11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-family:    var(--font-body);
  border:         1px dashed rgba(255, 255, 255, 0.1);
}

/* ─── Tag / Badge ───────────────────────────────────────── */

.tag {
  font-size:      11px;
  padding:        5px 12px;
  background:     rgba(193, 18, 31, 0.1);
  color:          var(--corp-red);
  border:         1px solid rgba(193, 18, 31, 0.25);
  font-family:    var(--font-body);
  font-weight:    500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ─── Divider ───────────────────────────────────────────── */

.divider {
  width:      60px;
  height:     2px;
  background: var(--corp-red);
  margin:     32px 0;
}