/* ============================================================
   MLG CONSTRUCTION MANAGEMENT — BRAND SYSTEM
   Core tokens, components, and layout primitives
   ============================================================ */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  /* --- Brand core --- */
  --navy:        #232D4B;   /* rgb(35,45,75)  — MLG Blue */
  --orange:      #E57200;   /* rgb(229,114,0) — MLG Orange */

  /* --- Navy ramp --- */
  --navy-950: #11162A;
  --navy-900: #161D33;
  --navy-800: #1C2640;
  --navy-700: #232D4B;   /* = brand navy */
  --navy-600: #313D63;
  --navy-500: #44527E;
  --navy-400: #6B779B;

  /* --- Orange ramp --- */
  --orange-700: #B85B00;
  --orange-600: #C96400;
  --orange-500: #E57200;  /* = brand orange */
  --orange-400: #F4923A;
  --orange-200: #FBD3AE;
  --orange-50:  #FCF1E6;

  /* --- Neutral (cool slate) ramp --- */
  --n-950: #0F1320;
  --n-900: #1A1E2B;
  --n-800: #2A3040;
  --n-700: #3D4453;
  --n-600: #565E70;
  --n-500: #727A8C;
  --n-400: #9AA1B1;
  --n-300: #C3C8D2;
  --n-200: #E0E3EA;
  --n-150: #EAECF1;
  --n-100: #F2F4F7;
  --n-50:  #F8F9FB;
  --white: #FFFFFF;

  /* --- Semantic --- */
  --bg:          var(--white);
  --bg-alt:      var(--n-50);
  --ink:         var(--navy-950);
  --ink-soft:    var(--n-700);
  --ink-muted:   var(--n-500);
  --line:        var(--n-200);
  --line-soft:   var(--n-150);
  --accent:      var(--orange-500);
  --accent-ink:  var(--orange-700);

  /* --- Type --- */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* --- Spacing (4px base) --- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px;
  --s20: 80px; --s24: 96px; --s32: 128px;

  /* --- Radius (precise / squared) --- */
  --r-sm: 2px;
  --r:    3px;
  --r-md: 6px;
  --r-lg: 10px;

  /* --- Shadow --- */
  --shadow-sm: 0 1px 2px rgba(17,22,42,.06), 0 1px 3px rgba(17,22,42,.08);
  --shadow:    0 4px 12px rgba(17,22,42,.08), 0 2px 4px rgba(17,22,42,.06);
  --shadow-lg: 0 18px 50px rgba(17,22,42,.14), 0 8px 16px rgba(17,22,42,.08);

  --maxw: 1180px;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:var(--accent-ink); text-decoration:none; }
h1,h2,h3,h4,h5{ font-family:var(--font-display); margin:0; line-height:1.05; letter-spacing:-.01em; color:var(--ink); font-weight:700; }
p{ margin:0; }

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px; }
.section{ padding:104px 0; border-top:1px solid var(--line-soft); }
.section--alt{ background:var(--bg-alt); }
.section--navy{ background:var(--navy-700); color:var(--n-200); border-top:none; }
.section--navy h1,.section--navy h2,.section--navy h3,.section--navy h4{ color:var(--white); }

.eyebrow{
  font-family:var(--font-mono);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
  display:flex; align-items:center; gap:12px;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--accent); display:inline-block; }
.section--navy .eyebrow{ color:var(--orange-400); }

.sec-head{ max-width:760px; margin-bottom:56px; }
.sec-head h2{
  font-size:clamp(30px,4vw,46px);
  font-weight:800;
  letter-spacing:-.02em;
  margin:18px 0 16px;
}
.sec-head p{ font-size:18px; color:var(--ink-soft); max-width:620px; }
.section--navy .sec-head p{ color:var(--n-300); }

.grid{ display:grid; gap:24px; }
.eyebrow-num{ font-family:var(--font-mono); color:var(--ink-muted); font-size:13px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:600; font-size:15px;
  letter-spacing:.01em;
  padding:13px 24px; border-radius:var(--r);
  border:1.5px solid transparent; cursor:pointer;
  transition:.16s ease; line-height:1; white-space:nowrap;
}
.btn .ar{ transition:transform .16s ease; }
.btn:hover .ar{ transform:translateX(3px); }
.btn--primary{ background:var(--navy-700); color:#fff; border-color:var(--navy-700); }
.btn--primary:hover{ background:var(--navy-800); border-color:var(--navy-800); }
.btn--accent{ background:var(--orange-500); color:#fff; border-color:var(--orange-500); }
.btn--accent:hover{ background:var(--orange-600); border-color:var(--orange-600); }
.btn--ghost{ background:transparent; color:var(--navy-700); border-color:var(--n-300); }
.btn--ghost:hover{ border-color:var(--navy-700); background:var(--white); }
.btn--onnavy{ background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
.btn--onnavy:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.btn--sm{ padding:9px 16px; font-size:13.5px; }

/* ============================================================
   CARDS / SURFACES
   ============================================================ */
.card{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-md); padding:28px;
}
.card--pad-lg{ padding:36px; }

/* ============================================================
   MONO LABEL
   ============================================================ */
.mono{ font-family:var(--font-mono); }
.tag{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font-family:var(--font-mono); font-size:11.5px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase;
  padding:5px 10px; border-radius:var(--r-sm);
  background:var(--orange-50); color:var(--accent-ink);
  border:1px solid var(--orange-200);
}
.tag--navy{ background:var(--navy-700); color:#fff; border-color:var(--navy-700); }
.tag--neutral{ background:var(--n-100); color:var(--n-600); border-color:var(--n-200); }

/* ============================================================
   IMAGE PLACEHOLDER (striped)
   ============================================================ */
.ph{
  position:relative; width:100%; aspect-ratio:4/3; overflow:hidden;
  background:
    repeating-linear-gradient(135deg, var(--n-100) 0 14px, var(--n-150) 14px 28px);
  border:1px solid var(--line); border-radius:var(--r-md);
  display:flex; align-items:flex-end;
}
.ph__cap{
  font-family:var(--font-mono); font-size:12px; color:var(--n-500);
  background:var(--white); border:1px solid var(--line);
  padding:5px 9px; margin:12px; border-radius:var(--r-sm);
}

/* ============================================================
   DEFINITION ROWS
   ============================================================ */
.do-dont{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.dd{ border-radius:var(--r-md); border:1px solid var(--line); overflow:hidden; }
.dd__bar{ font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; padding:10px 16px; font-weight:600; }
.dd--do .dd__bar{ background:#E8F3EC; color:#1E6E45; }
.dd--dont .dd__bar{ background:#FBE9E9; color:#A22; }
.dd__body{ padding:18px 16px; font-size:15px; color:var(--ink-soft); background:#fff; }

@media (max-width:760px){
  .do-dont{ grid-template-columns:1fr; }
  .section{ padding:72px 0; }
  .wrap{ padding:0 22px; }
}