/* ============================================================
   Switch On AI — Design System v3 (Brutalist / Editorial Zine)
   Inspired by: tochkicamp.ru, IBM Plex specimens, brutalist zines
   ============================================================ */

:root {
  /* ---- Colour tokens ---- */
  --bg:           #FAFAF7;   /* paper cream */
  --bg-elev:     #F2F1ED;   /* subtle elevation */
  --ink:          #0A0A0A;   /* primary ink */
  --ink-2:        #2A2A2A;   /* secondary ink */
  --graphite:    #404040;   /* meta / labels */
  --mute:         #6B6B6B;   /* muted body */
  --rule:         #0A0A0A;   /* hairline rules */
  --rule-soft:   #C8C6C0;   /* dotted soft */
  --hi:           #FFE600;   /* yellow highlight */
  --hi-soft:     #FFF59A;   /* faint hi */
  --invert-bg:   #0A0A0A;   /* inverted block bg */
  --invert-ink:  #FAFAF7;

  /* ---- Type ---- */
  --font-mono:   'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-sans:   'IBM Plex Sans', system-ui, -apple-system, sans-serif;

  /* ---- Scale ---- */
  --fs-mono-xs:  11px;
  --fs-mono-sm:  12px;
  --fs-mono-md:  13px;
  --fs-mono-lg:  15px;
  --fs-body:     16px;
  --fs-lede:     20px;
  --fs-h3:       22px;
  --fs-h2:       40px;
  --fs-h1:       88px;
  --fs-display:  120px;

  /* ---- Spacing ---- */
  --space-1:     4px;
  --space-2:     8px;
  --space-3:     16px;
  --space-4:     24px;
  --space-5:     32px;
  --space-6:     48px;
  --space-7:     64px;
  --space-8:     96px;
  --space-9:     128px;

  /* ---- Layout ---- */
  --container-max: 1100px;
  --container-pad: 32px;
  --line:        1.5;
  --line-tight:  1.2;

  /* ---- Motion ---- */
  --t-fast:      120ms;
  --t-med:       200ms;
  --ease:        cubic-bezier(.4, 0, .2, 1);
}

/* ============================================================
   Reset & base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  line-height: var(--line);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }

a { color: var(--ink); text-decoration: none; }
a:hover { background: var(--ink); color: var(--bg); }

::selection { background: var(--hi); color: var(--ink); }

/* ============================================================
   Typography primitives
   ============================================================ */
.t-mono-xs   { font-family: var(--font-mono); font-size: var(--fs-mono-xs); letter-spacing: .08em; text-transform: uppercase; }
.t-mono-sm   { font-family: var(--font-mono); font-size: var(--fs-mono-sm); letter-spacing: .08em; text-transform: uppercase; }
.t-mono-md   { font-family: var(--font-mono); font-size: var(--fs-mono-md); }
.t-display   { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.04em; line-height: var(--line-tight); }
.t-sans      { font-family: var(--font-sans); }

.hi  { background: var(--hi); color: var(--ink); padding: 0 8px; display: inline-block; }
.box { background: var(--ink); color: var(--bg); padding: 2px 6px; display: inline-block; }

/* ============================================================
   Container
   ============================================================ */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* ============================================================
   Hairlines & dividers
   ============================================================ */
.rule        { border-bottom: 1px solid var(--rule); }
.rule-double { border-bottom: 3px double var(--rule); }
.rule-top    { border-top: 1px solid var(--rule); }
.rule-thick  { border-top: 2px solid var(--rule); }
.rule-dot    { border-bottom: 1px dotted var(--rule); }

/* ASCII separator strip */
.ascii-rule {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
  color: var(--graphite);
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
  white-space: nowrap;
  overflow: hidden;
  letter-spacing: 0;
}

/* ============================================================
   Responsive scale
   ============================================================ */
@media (max-width: 900px) {
  :root {
    --fs-h1: 56px;
    --fs-h2: 32px;
    --fs-h3: 20px;
    --fs-lede: 18px;
    --container-pad: 20px;
    --space-8: 64px;
    --space-9: 80px;
  }
}

@media (max-width: 600px) {
  :root {
    --fs-h1: 40px;
    --fs-h2: 26px;
    --fs-display: 56px;
    --container-pad: 16px;
    --space-7: 40px;
    --space-8: 48px;
  }
}