/* =======================
   ATACK DESIGN SYSTEM (DS)
   Tokens, Utilities & Components
   ======================= */

/* TOKENS */
:root{
  /* Colors */
  --color-bg:#0a0b0c;
  --color-bg-soft:#111214;
  --color-surface:#141518;
  --color-text:#f4f6f8;
  --color-muted:#b1b5bd;
  --color-brand:#c81d25;
  --color-brand-2:#ffeded;
  --color-border:rgba(255,255,255,.10);

  /* Spacing scale (4px grid) */
  --space-0:0;
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-7:28px; --space-8:32px; --space-9:36px; --space-10:40px;
  --radius-sm:10px; --radius:16px; --radius-lg:22px;
  --elev-1:0 6px 14px rgba(0,0,0,.25);
  --elev-2:0 12px 28px rgba(0,0,0,.35);

  /* Typography */
  --font-sans:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  --font-display:Manrope,Inter,sans-serif;
  --fs-xs:.82rem; --fs-sm:.92rem; --fs-md:1rem; --fs-lg:1.1rem; --fs-xl:1.35rem; --fs-2xl:1.8rem; --fs-3xl:2.2rem; --fs-4xl:3.2rem;
  --lh-tight:1.1; --lh-normal:1.5;
}

/* UTILITIES (spacing, layout) */
.u-container{width:min(100%,1200px); margin-inline:auto; padding-inline:24px}
.u-grid-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.u-grid-3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.u-grid-4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.u-flex{display:flex; gap:12px; align-items:center}
.u-center{text-align:center}
.u-hidden{display:none !important}
.u-mt-6{margin-top:var(--space-6)} .u-mt-8{margin-top:var(--space-8)} .u-mb-8{margin-bottom:var(--space-8)}
.u-pt-10{padding-top:var(--space-10)} .u-pb-10{padding-bottom:var(--space-10)}

/* TYPOGRAPHY */
.display{font-family:var(--font-display); font-weight:900; font-size:clamp(2rem,3.2vw + 1rem,58px); line-height:var(--lh-tight); letter-spacing:-.02em}
.h1{font-family:var(--font-display); font-weight:900; font-size:clamp(1.6rem,1.4vw + 1rem,34px)}
.h2{font-family:var(--font-display); font-weight:800; font-size:1.35rem}
.body{font-size:var(--fs-md); line-height:var(--lh-normal)}
.caption{font-size:var(--fs-sm); color:var(--color-muted)}

/* COMPONENTS */
.card{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)); border:1px solid var(--color-border); border-radius:var(--radius); padding:18px}
.chip{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; border:1px solid var(--color-border); background:rgba(255,255,255,.03); font-weight:700; color:var(--color-muted)}
.btn{display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px; font-weight:800; letter-spacing:.02em; border:1px solid transparent; transition:.2s; cursor:pointer}
.btn-primary{background:linear-gradient(135deg,var(--color-brand),#a11319 70%); color:#fff; box-shadow:0 6px 24px rgba(239,68,68,.35)}
.btn-outline{border-color:var(--color-border); background:rgba(255,255,255,.02); color:#fff}
.badge{display:inline-flex; gap:.5rem; align-items:center; border:1px solid var(--color-border); border-radius:999px; padding:.35rem .7rem; color:var(--color-muted); background:rgba(255,255,255,.03)}

/* PARALLAX BACKGROUNDS */
.parallax{position:relative; overflow:hidden}
.parallax::before, .parallax::after{
  content:""; position:absolute; inset:-10% -10% auto -10%;
  height:140%; z-index:-1; pointer-events:none;
  background-repeat:no-repeat; background-size:cover;
  opacity:.9;
}
.parallax::before{background-image:var(--para-layer-1, none); transform:translate3d(0,0,0)}
.parallax::after{background-image:var(--para-layer-2, none); transform:translate3d(0,0,0); mix-blend-mode:screen; opacity:.6}

/* Light & Glass variants inherit tokens from main theme files */