/* =========================================================
   mg-base.css — Make-Up Gears design system · tokens & base
   Single source of truth (brief C2). Load before components.
   ========================================================= */

/* ---------- 1. Design tokens ---------- */
:root {
  /* core surfaces (brief C2 — unchanged) */
  --ink:    #15181B;   /* page background        */
  --stage:  #1E2226;   /* raised surface         */
  --paper:  #E7E8E4;   /* primary text           */
  --muted:  #8A9199;   /* secondary text         */
  --chalk:  #86B6E8;   /* single accent          */
  --rule:   rgba(231,232,228,.14);

  /* light document surface — spec tables, technical docs */
  --doc-bg:  #EEEFEA;
  --doc-ink: #1C1F22;

  /* functional/semantic colours (not accents) */
  --ok:      #7FB98C;
  --warn:    #D9A84E;
  --danger:  #C96A5A;

  /* accent tints (derived from --chalk, not new accents) */
  --chalk-soft:   rgba(134,182,232,.12);
  --chalk-strong: #5A8FC4;

  --focus-ring: 2px solid var(--chalk);
}

/* ---------- 2. Typography ---------- */
/* Type scale — 7 steps */
:root {
  --text-xs:  0.75rem;  --text-xs-lh: 1.4;  --text-xs-tr: .01em;
  --text-sm:  0.875rem; --text-sm-lh: 1.5;  --text-sm-tr: 0;
  --text-md:  1rem;     --text-md-lh: 1.6;  --text-md-tr: 0;
  --text-lg:  1.25rem;  --text-lg-lh: 1.5;  --text-lg-tr: -.01em;
  --text-xl:  1.75rem;  --text-xl-lh: 1.3;  --text-xl-tr: -.02em;
  --text-2xl: 2.5rem;   --text-2xl-lh: 1.15; --text-2xl-tr: -.03em;
  --text-3xl: 3.5rem;   --text-3xl-lh: 1.05; --text-3xl-tr: -.04em;

  /* families */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-data:    "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- 3. Spacing scale — 6 steps ---------- */
:root {
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 40px;
  --sp-6: 64px;
}

/* ---------- 4. Radius — near-zero (technical aesthetic) ---------- */
:root {
  --r-0: 0;
  --r-1: 2px;
}

/* ---------- 5. Breakpoints ---------- */
/* 360 / 600 / 900 / 1280 — consumed in media queries below */

/* ---------- 6. Base / reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--text-md-lh);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0 0 var(--sp-3);
  color: var(--paper);
  overflow-wrap: break-word;
}
h1 { font-size: var(--text-2xl); line-height: var(--text-2xl-lh); letter-spacing: var(--text-2xl-tr); }
h2 { font-size: var(--text-xl);  line-height: var(--text-xl-lh);  letter-spacing: var(--text-xl-tr); }
h3 { font-size: var(--text-lg);  line-height: var(--text-lg-lh);  letter-spacing: var(--text-lg-tr); }

p { margin: 0 0 var(--sp-3); }
a { color: var(--chalk); text-underline-offset: 3px; }
a:hover { color: var(--chalk-strong); }
img { max-width: 100%; display: block; height: auto; }
ul, ol { padding-left: 1.25rem; }
code, .data {
  font-family: var(--font-data);
  font-size: .92em;
}

/* ---- Article code — first-class data, always monospace ---- */
.art-code {
  font-family: var(--font-data);
  font-size: var(--text-sm);
  letter-spacing: .02em;
  color: var(--chalk);
  background: var(--chalk-soft);
  border: 1px solid var(--rule);
  border-radius: var(--r-1);
  padding: 2px 8px;
  white-space: nowrap;
  user-select: all; /* copyable */
}

/* ---------- 7. Focus — WCAG 2.2 AA, never removed ---------- */
:focus { outline: none; }
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

/* ---------- 8. Layout helpers ---------- */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--sp-3); }
.section { padding-block: var(--sp-5); }
.section--tight { padding-block: var(--sp-3); }

.grid { display: grid; gap: var(--sp-3); }
.grid--2 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

@media (min-width: 600px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.muted { color: var(--muted); }
.center { text-align: center; }

.skip-link {
  position: fixed;
  top: -60px; left: var(--sp-3);
  background: var(--chalk);
  color: var(--ink);
  padding: 10px 16px;
  z-index: 3000;
  border-radius: var(--r-1);
  font-weight: 600;
  transition: top .2s ease;
}
.skip-link:focus { top: var(--sp-2); }

/* ---------- 9. Reduced motion — global gate ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}