/* ============================================================================
   foundation.css — responsive grid + design-token foundation for the marketing
   site (something.com). Intentionally minimal. A fuller design system (full type
   scale, color ramps, button variants, motion) layers on top of these tokens
   later WITHOUT a rewrite: add values here, reference them everywhere.

   What lives here:
     1. Reset
     2. Tokens (breakpoints documented, container, spacing scale, type, color, radius)
     3. Container
     4. 12-column responsive grid (.grid + .col-* + breakpoint variants)
   Page-specific styling (hero, nav) lives in home.css and only references tokens.
   ============================================================================ */

/* ---- 1. Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ---- 2. Tokens ------------------------------------------------------------- */
/* Breakpoints (reference; used in the media queries below):
     sm 640px   md 768px   lg 1024px   xl 1280px                                */
:root {
  /* layout */
  --container-max: 1280px;
  --gutter: 24px;            /* grid gap + container side padding */
  --container-pad: 24px;

  /* spacing scale (8px base) — extend as the design system grows */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* type (placeholders; real scale comes later) */
  --font-display: 'Prata', Georgia, serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;

  /* color (placeholders; real ramps come later) */
  --ink-soft: var(--ink2);
  --surface: var(--white);
  --line: var(--border);
  --accent: var(--burgundy);       /* -> app burgundy #611A1E */
  --accent-hover: var(--burgundy-hover);
  --on-accent: var(--white);

  /* radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-pill: 999px;
}

/* ---- 3. Container --------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ---- 4. 12-column responsive grid ----------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
}
/* base (mobile-first) spans */
.col-1{grid-column:span 1}.col-2{grid-column:span 2}.col-3{grid-column:span 3}
.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}
.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-9{grid-column:span 9}
.col-10{grid-column:span 10}.col-11{grid-column:span 11}.col-12{grid-column:span 12}

/* >= 640px (sm) */
@media (min-width: 640px) {
  .col-sm-1{grid-column:span 1}.col-sm-2{grid-column:span 2}.col-sm-3{grid-column:span 3}
  .col-sm-4{grid-column:span 4}.col-sm-5{grid-column:span 5}.col-sm-6{grid-column:span 6}
  .col-sm-7{grid-column:span 7}.col-sm-8{grid-column:span 8}.col-sm-9{grid-column:span 9}
  .col-sm-10{grid-column:span 10}.col-sm-11{grid-column:span 11}.col-sm-12{grid-column:span 12}
}
/* >= 768px (md) */
@media (min-width: 768px) {
  .col-md-1{grid-column:span 1}.col-md-2{grid-column:span 2}.col-md-3{grid-column:span 3}
  .col-md-4{grid-column:span 4}.col-md-5{grid-column:span 5}.col-md-6{grid-column:span 6}
  .col-md-7{grid-column:span 7}.col-md-8{grid-column:span 8}.col-md-9{grid-column:span 9}
  .col-md-10{grid-column:span 10}.col-md-11{grid-column:span 11}.col-md-12{grid-column:span 12}
}
/* >= 1024px (lg) */
@media (min-width: 1024px) {
  .col-lg-1{grid-column:span 1}.col-lg-2{grid-column:span 2}.col-lg-3{grid-column:span 3}
  .col-lg-4{grid-column:span 4}.col-lg-5{grid-column:span 5}.col-lg-6{grid-column:span 6}
  .col-lg-7{grid-column:span 7}.col-lg-8{grid-column:span 8}.col-lg-9{grid-column:span 9}
  .col-lg-10{grid-column:span 10}.col-lg-11{grid-column:span 11}.col-lg-12{grid-column:span 12}
}

/* small helpers */
.hide-mobile { display: none; }
@media (min-width: 768px) { .hide-mobile { display: revert; } .hide-desktop { display: none; } }