/* tokens.css — singletalk.co.kr editorial design tokens.
 *
 * Mirrors od-flutter/lib/core/design/tokens.dart (the app's `T` class).
 * If a token changes here, change it there too (and vice versa).
 *
 * The site reads as: cream stage, ink-black text, single terracotta
 * accent, three families (Pretendard / Noto Serif KR / JetBrains Mono),
 * hairline borders (no shadows), small radii. Same magazine-flat tone
 * as the Flutter app.
 */

:root {
  /* brand / semantic colors */
  --t-primary:        #C75A3E;
  --t-primary-dark:   #A24530;
  --t-primary-soft:   #F4E5DD;
  --t-secondary:      #3A2B23;
  --t-info:           #3DBBE8;
  --t-success:        #3CC76A;
  --t-danger:         #C75A3E;
  --t-warn:           #E7A93B;

  /* text + neutrals — warm grey ladder against cream */
  --t-text:           #161413;
  --t-text-subtle:    #736C66;
  --t-text-muted:     #A8A099;
  --t-text-on-primary:#F8F5F0;
  --t-bg:             #F8F5F0;
  --t-bg-alt:         #EFE7DC;
  --t-surface:        #FFFFFF;
  --t-border:         #E6DFD6;
  --t-border-strong:  #161413;
  --t-overlay:        rgba(22, 20, 19, 0.4);

  /* Deep brown used for serif body on tinted surfaces (primarySoft pad). */
  --t-accent-ink:     #3A2B23;

  /* spacing (8pt base) — use calc(var(--t-sp) * N) or shorthands below */
  --t-sp:             8px;
  --t-sp-half:        4px;
  --t-sp-1:           8px;
  --t-sp-2:           16px;
  --t-sp-3:           24px;
  --t-sp-4:           32px;
  --t-sp-5:           40px;
  --t-sp-6:           48px;
  --t-sp-8:           64px;
  --t-sp-10:          80px;

  /* radius — magazine-flat */
  --t-r-sm:           4px;
  --t-r-md:           6px;
  --t-r-lg:           8px;
  --t-r-pill:         999px;

  /* type scale (px) */
  --t-display-serif:  38px;
  --t-headline-serif: 28px;
  --t-display-lg:     33px;
  --t-title-lg:       21px;
  --t-title-md:       18px;
  --t-title-sm:       16px;
  --t-body:           15px;
  --t-body-sm:        13px;
  --t-caption:        12px;
  --t-micro:          10px;

  /* type families */
  --t-sans:  'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, 'Helvetica Neue', Arial, sans-serif;
  --t-serif: 'Noto Serif KR', 'Nanum Myeongjo', serif;
  --t-mono:  'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* type weights */
  --t-w-regular:  400;
  --t-w-medium:   500;
  --t-w-semibold: 600;
  --t-w-bold:     700;

  /* tracking */
  --t-track-tight:   -0.02em;   /* serif headlines */
  --t-track-eyebrow:  0.14em;   /* mono eyebrows */

  /* motion */
  --t-dur-fast:   120ms;
  --t-dur-med:    220ms;
}

/* ── reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--t-sans);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--t-text);
  background: var(--t-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* ── primitives ─────────────────────────────────────────────────────── */
.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--t-sp-3);
}
.container-wide { max-width: 960px; }

.hairline {
  height: 1px;
  background: var(--t-border);
  border: 0;
}

.eyebrow {
  display: inline-block;
  font-family: var(--t-mono);
  font-size: 11px;
  font-weight: var(--t-w-semibold);
  letter-spacing: var(--t-track-eyebrow);
  text-transform: uppercase;
  color: var(--t-primary);
  line-height: 1;
}
.eyebrow--muted { color: var(--t-text-subtle); }
.eyebrow--ink   { color: var(--t-text); }

.eyebrow-row {
  display: flex; align-items: center; gap: var(--t-sp-1);
  flex-wrap: wrap;
}
.eyebrow-row .sep {
  width: 4px; height: 4px;
  background: var(--t-border);
  border-radius: 50%;
  display: inline-block;
}