/* base.css
   Shared reset, variables, utilities, and common components.
   Load this first, then load projectnuke.css OR nukediy.css.
*/

/* ========== Reset / Normalize (small & focused) ========== */
*,
*::before,
*::after { box-sizing: border-box; }
html, body, #root { height: 100%; }
html { font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body { margin: 0; line-height: 1.45; color: #111; background: #fff; -webkit-font-feature-settings: "kern"; font-feature-settings: "kern"; }

/* ========== CSS Variables (brand neutral defaults) ========== */
:root{
  /* Layout */
  --container-max-width: 1200px;
  --page-padding: 24px;

  /* Typography */
  --heading-1: 2.25rem;   /* 36px */
  --heading-2: 1.5rem;    /* 24px */
  --heading-3: 1.125rem;  /* 18px */
  --body-size: 1rem;      /* 16px */
  --mono-font: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;

  /* Neutral tokens */
  --surface: #ffffff;
  --muted: #6b7280;
  --border: rgba(0,0,0,0.08);
  --radius-sm: 8px;
  --radius-md: 16px;
  --shadow-sm: 0 6px 18px rgba(10,10,10,0.06);
  --shadow-lg: 0 24px 60px rgba(10,10,10,0.12);

  /* animation */
  --ease: cubic-bezier(.2,.9,.3,1);
}

/* ========== Layout helpers ========== */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
}

/* Simple responsive grid */
.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}
.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }
@media (max-width: 900px) {
  .row { grid-template-columns: 1fr; }
  .col-6, .col-4, .col-3 { grid-column: auto; }
}

/* ========== Typography ========== */
h1, .h1 { font-size: var(--heading-1); margin: 0 0 12px 0; line-height: 1.05; }
h2, .h2 { font-size: var(--heading-2); margin: 0 0 10px 0; }
h3, .h3 { font-size: var(--heading-3); margin: 0 0 8px 0; }
p { font-size: var(--body-size); margin: 0 0 12px 0; color: var(--muted); }

/* micro copy */
.lead { font-size: 1.125rem; color: inherit; opacity: .92; }

/* ========== Buttons ========== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), opacity .18s var(--ease);
  text-decoration: none;
  vertical-align: middle;
  box-shadow: var(--shadow-sm);
}
.btn:active { transform: translateY(1px) scale(.998); }
.btn-ghost { background: transparent; border: 1px solid var(--border); color: inherit; }
.btn-sm { padding: 6px 10px; border-radius: 8px; font-size: 0.85rem; }

/* ========== Cards ========== */
.card {
  background: var(--surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.card-body { padding: 18px; }

/* Hero helper */
.hero {
  padding: 64px 0;
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 40px;
  align-items: center;
}
@media (max-width: 960px) { .hero { grid-template-columns: 1fr; } }

/* Media utilities */
.media { width: 100%; height: auto; display: block; border-radius: 12px; object-fit: cover; }

/* small UI elements */
.kicker { text-transform: uppercase; letter-spacing: .18em; font-weight:700; font-size: .78rem; color: var(--muted); }
.badge { display:inline-block; padding:6px 10px; border-radius:999px; font-weight:700; font-size:.75rem; }

/* primary layout nav */
.nav {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 14px 0;
}
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.brand .logo { width:40px; height:40px; display:inline-grid; place-items:center; border-radius:8px; }

/* link reset */
a { color: inherit; text-decoration: none; }

/* Accessibility focus */
:focus { outline: 3px solid rgba(0,0,0,0.06); outline-offset: 3px; }

/* small utility classes */
.row-center { display:flex; align-items:center; gap:12px; }
.muted { color: var(--muted); }
.space-y > * + * { margin-top: 12px; }
.hidden { display:none !important; }