/* thegammvibe — design tokens
   Concept: 내면의 정렬 — minimal × editorial × organic-tech
*/

:root {
  /* ---- color: warm earth (default) ---- */
  /* base — deep warm brown, not pure black */
  --bg: #1a120a;
  --bg-2: #221709;
  --bg-3: #2c1d0c;

  /* ink — warm cream, sits well on orange */
  --ink: #f4e7d3;
  --ink-2: #c9a878;
  --ink-3: #8a6b3f;
  --rule: #3a2812;
  --rule-2: #4d3618;

  /* single accent: ember orange / 정렬의 색 */
  --accent: #e6741c;
  --accent-soft: #c95f0e;
  --accent-deep: #5c471d;
  --accent-glow: color-mix(in oklab, var(--accent) 60%, transparent);

  /* ---- type ---- */
  --serif: "Newsreader", "Source Serif Pro", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --sans: "Inter Tight", system-ui, -apple-system, sans-serif;

  /* scale */
  --t-xs: 11px;
  --t-sm: 13px;
  --t-md: 15px;
  --t-lg: 18px;
  --t-xl: 22px;
  --t-2xl: 30px;
  --t-3xl: 44px;
  --t-4xl: 64px;
  --t-5xl: 96px;
  --t-6xl: 144px;

  /* spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 144px;

  /* layout */
  --col: 1240px;
  --col-narrow: 720px;
  --gutter: 24px;

  /* motion */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* light mode override — warm cream paper */
:root[data-mode="light"] {
  --bg: #f3e3cb;
  --bg-2: #ecd9bb;
  --bg-3: #e3cba4;
  --ink: #2a1a08;
  --ink-2: #5c3f1d;
  --ink-3: #8a6b3f;
  --rule: #d2b483;
  --rule-2: #b8975f;
  --accent: #c95f0e;
  --accent-soft: #a04a08;
  --accent-deep: #5c471d;
  --accent-glow: color-mix(in oklab, var(--accent) 35%, transparent);
}

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--t-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
  overflow-x: hidden;
}

@media (max-width: 640px) {
  :root { --gutter: 18px; }
}
@media (max-width: 380px) {
  :root { --gutter: 14px; }
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, svg { display: block; max-width: 100%; }

::selection { background: var(--accent); color: var(--bg); }

/* ---- utilities ---- */
.serif { font-family: var(--serif); font-weight: 300; letter-spacing: -0.01em; }
.mono { font-family: var(--mono); }
.sans { font-family: var(--sans); }

.eyebrow {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.dim { color: var(--ink-2); }
.dimmer { color: var(--ink-3); }
.accent { color: var(--accent); }

.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

.container {
  max-width: var(--col);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container-narrow {
  max-width: var(--col-narrow);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* korean / english bilingual line */
.bi { display: flex; flex-direction: column; gap: 2px; }
.bi .ko { font-family: var(--serif); }
.bi .en {
  font-family: var(--mono);
  font-size: 0.78em;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  text-transform: lowercase;
}

/* dot grid background */
.grid-dots {
  background-image: radial-gradient(circle at 1px 1px, var(--rule) 1px, transparent 0);
  background-size: 24px 24px;
}

/* subtle noise — adds organic texture without imagery */
.noise::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  z-index: 1;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMDAnIGhlaWdodD0nMjAwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPScyJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoJTIzbiknLz48L3N2Zz4=");
}