/* ──────────────────────────────────────────────────────────
   Gide-on · The Switch · Brand Book v1
   Design tokens + component classes
   ──────────────────────────────────────────────────────── */

:root {
  /* Core palette */
  --c-ink:    #0E0E10;   /* primary dark — text, logos */
  --c-cream:  #F4EFE6;   /* primary light — surfaces, paper */
  --c-signal: #FF5C2E;   /* signature accent — coral/orange */

  /* Secondary — supports without competing */
  --c-teal:   #1B4E50;   /* deep teal · the cool "off" counterpart */
  --c-sand:   #EAC9A2;   /* warm sand · kids, paper, softness */

  /* Grayscale ramp · warm neutral, biased toward ink */
  --g-50:  #F4F3F0;
  --g-100: #E6E4DE;
  --g-200: #CFCDC6;
  --g-300: #B0AEA6;
  --g-400: #8A8881;
  --g-500: #6A6862;
  --g-600: #4F4D48;
  --g-700: #383631;
  --g-800: #221F1C;
  --g-900: #0E0E10;

  /* Type */
  --f-sans: "Space Grotesk", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
}

/* ─── Reset ─── */
html, body { margin: 0; padding: 0; background: var(--c-ink); }
body { font-family: var(--f-sans); -webkit-font-smoothing: antialiased; color: var(--c-ink); }
* { box-sizing: border-box; }

/* ─── Deck pages ─── */
deck-stage > section {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--c-cream);
  color: var(--c-ink);
  font-family: var(--f-sans);
  padding: 90px 140px;
  overflow: hidden;
}

deck-stage > section.theme-ink    { background: var(--c-ink);    color: var(--c-cream); }
deck-stage > section.theme-signal { background: var(--c-signal); color: var(--c-ink); }
deck-stage > section.theme-teal   { background: var(--c-teal);   color: var(--c-cream); }
deck-stage > section.theme-sand   { background: var(--c-sand);   color: var(--c-ink); }

/* ─── Page chrome ─── */
.page-head {
  position: absolute;
  top: 56px;
  left: 140px;
  right: 140px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 24px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.55;
  z-index: 2;
}
.page-foot {
  position: absolute;
  bottom: 56px;
  left: 140px;
  right: 140px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 24px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.55;
  z-index: 2;
}
.page-foot strong { font-weight: 700; }

.page-num { letter-spacing: 0.16em; }

/* ─── Toggle component ─── */
.toggle {
  --h: 1em;
  --track: var(--c-signal);
  --knob: var(--c-cream);
  display: inline-block;
  width: calc(var(--h) * 1.85);
  height: var(--h);
  border-radius: 999px;
  position: relative;
  vertical-align: baseline;
  background: var(--track);
  flex: none;
}
.toggle::after {
  content: '';
  position: absolute;
  width: calc(var(--h) * 0.72);
  height: calc(var(--h) * 0.72);
  border-radius: 50%;
  right: calc(var(--h) * 0.14);
  top: calc(var(--h) * 0.14);
  background: var(--knob);
}
.toggle--ink    { --track: var(--c-ink);    --knob: var(--c-cream); }
.toggle--cream  { --track: var(--c-cream);  --knob: var(--c-ink); }
.toggle--signal { --track: var(--c-signal); --knob: var(--c-cream); }
.toggle--teal   { --track: var(--c-teal);   --knob: var(--c-cream); }
.toggle--sand   { --track: var(--c-sand);   --knob: var(--c-ink); }

/* ─── Wordmark ─── */
.wm {
  display: inline-flex;
  align-items: baseline;
  gap: 0.12em;
  font-family: var(--f-sans);
  font-weight: 700;
  letter-spacing: -0.038em;
  line-height: 1;
  white-space: nowrap;
}
.wm .toggle { --h: 0.72em; } /* sits on cap-height */
.wm[data-size=cover]  { font-size: 260px; }
.wm[data-size=hero]   { font-size: 180px; }
.wm[data-size=xl]     { font-size: 120px; }
.wm[data-size=lg]     { font-size: 96px; }
.wm[data-size=md]     { font-size: 64px; }
.wm[data-size=sm]     { font-size: 32px; }
.wm[data-size=xs]     { font-size: 20px; }
.wm[data-size=tiny]   { font-size: 14px; }

/* ─── Square mark ─── */
.mark-sq {
  background: var(--c-ink);
  color: var(--c-cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12em;
  border-radius: 0.18em;
  font-family: var(--f-sans);
  font-weight: 700;
  letter-spacing: -0.04em;
}
.mark-sq .mark-sq__g {
  font-size: 0.46em;
  line-height: 1;
}
.mark-sq .toggle { --h: 0.16em; }
.mark-sq.is-signal { background: var(--c-signal); color: var(--c-ink); }
.mark-sq.is-cream  { background: var(--c-cream);  color: var(--c-ink); }
.mark-sq.is-teal   { background: var(--c-teal);   color: var(--c-cream); }

/* ─── Circle mark ─── */
.mark-circ {
  background: var(--c-signal);
  color: var(--c-ink);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.06em;
  font-family: var(--f-sans);
  font-weight: 700;
  letter-spacing: -0.04em;
}
.mark-circ .mark-circ__g {
  font-size: 0.5em;
  line-height: 1;
}
.mark-circ .toggle { --h: 0.13em; }
.mark-circ.is-ink   { background: var(--c-ink);   color: var(--c-cream); }
.mark-circ.is-cream { background: var(--c-cream); color: var(--c-ink); }
.mark-circ.is-teal  { background: var(--c-teal);  color: var(--c-cream); }
.mark-circ.is-sand  { background: var(--c-sand);  color: var(--c-ink); }

/* ─── Type utilities ─── */
.h-display { font-family: var(--f-sans); font-weight: 700; letter-spacing: -0.045em; line-height: 0.92; }
.h-title   { font-family: var(--f-sans); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.h-body    { font-family: var(--f-sans); font-weight: 400; letter-spacing: -0.005em; line-height: 1.45; }
.h-mono    { font-family: var(--f-mono); font-weight: 500; letter-spacing: 0.04em; }
.eyebrow   { font-family: var(--f-mono); font-weight: 500; font-size: 24px; letter-spacing: 0.22em; text-transform: uppercase; }

.rule { height: 1px; background: currentColor; opacity: 0.2; }
.rule--thick { height: 4px; background: currentColor; opacity: 1; }

/* ─── Annotation/spec lines (used in anatomy page) ─── */
.anno { position: absolute; font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-signal); }
.anno::before, .anno::after { content: ''; position: absolute; background: var(--c-signal); }

/* ─── Swatch ─── */
.swatch {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px 28px;
  border-radius: 8px;
  min-height: 220px;
  font-family: var(--f-mono);
}
.swatch__name { font-weight: 700; font-size: 22px; letter-spacing: -0.01em; font-family: var(--f-sans); }
.swatch__role { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.75; margin-top: 4px; font-family: var(--f-mono); }
.swatch__hex  { font-size: 14px; letter-spacing: 0.06em; opacity: 0.8; }
.swatch__row  { display: flex; justify-content: space-between; align-items: flex-end; }

/* ─── Generic grid helpers ─── */
.row { display: flex; }
.col { display: flex; flex-direction: column; }
.grow { flex: 1; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
.gap-32 { gap: 32px; }
.gap-48 { gap: 48px; }

/* ─── Decoration: faint dotted grid for cover ─── */
.dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.07;
  pointer-events: none;
}