/* Waymark design tokens — private travel archive. */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Nanum+Myeongjo:wght@400;700;800&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

:root {
  color-scheme: light;

  /* ── Ink & paper ─────────────────────────────────────────── */
  --ink: #1a1613;
  --ink-soft: #3d3833;
  --muted: #6b635b;
  --faint: #98908a;
  --line: #ddd6cc;
  --line-soft: #ece6dd;

  --paper: #faf7f2;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #f4efe7;

  /* ── Accent: ink navy ────────────────────────────────────── */
  --accent: #1b3a6b;
  --accent-deep: #12294d;
  --accent-soft: #eaf0fa;
  --accent-ink: #ffffff;

  /* ── Warm: sunset amber (current stop, D-day, emphasis) ──── */
  --warm: #b45c09;
  --warm-soft: #fdf2e4;
  --warm-ink: #ffffff;

  /* ── Status ──────────────────────────────────────────────── */
  --ok: #1c6b41;      --ok-soft: #e8f4ec;
  --warn: #9a6100;    --warn-soft: #fdf4e3;
  --bad: #a8322c;     --bad-soft: #fdeeed;

  /* ── Category ────────────────────────────────────────────── */
  --stay: #6b4fa8;    --stay-soft: #f1edfa;
  --food: #b0421a;    --food-soft: #fdeee7;
  --spot: #0e6b62;    --spot-soft: #e6f3f1;

  /* ── Type ────────────────────────────────────────────────── */
  --font-display: 'Instrument Serif', 'Nanum Myeongjo', Georgia, 'Times New Roman', serif;
  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Segoe UI', 'Noto Sans KR', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  --step--2: clamp(0.69rem, 0.67rem + 0.10vw, 0.75rem);
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.90rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.06rem);
  --step-1:  clamp(1.20rem, 1.10rem + 0.50vw, 1.40rem);
  --step-2:  clamp(1.44rem, 1.28rem + 0.80vw, 1.90rem);
  --step-3:  clamp(1.73rem, 1.45rem + 1.40vw, 2.60rem);
  --step-4:  clamp(2.07rem, 1.60rem + 2.40vw, 3.60rem);
  --step-5:  clamp(2.49rem, 1.70rem + 4.00vw, 5.20rem);

  --tracking-eyebrow: 0.16em;
  /* Kept shallow: Hangul loses its word spaces under the tight tracking that
     flatters Latin display type. */
  --tracking-display: -0.008em;

  /* ── Space ───────────────────────────────────────────────── */
  --s1: 4px;  --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 20px; --s6: 24px;  --s7: 32px;  --s8: 40px;
  --s9: 56px; --s10: 72px; --s11: 96px; --s12: 128px;

  --gutter: clamp(20px, 4vw, 40px);
  --measure: 1240px;

  /* ── Radius ──────────────────────────────────────────────── */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px;
  --r-lg: 20px; --r-xl: 28px; --r-full: 999px;

  /* ── Elevation (warm-tinted, never pure black) ───────────── */
  --e1: 0 1px 2px rgb(60 44 26 / 6%), 0 1px 1px rgb(60 44 26 / 4%);
  --e2: 0 2px 6px rgb(60 44 26 / 7%), 0 6px 16px rgb(60 44 26 / 5%);
  --e3: 0 8px 24px rgb(60 44 26 / 10%), 0 2px 6px rgb(60 44 26 / 6%);
  --e4: 0 24px 64px rgb(40 28 16 / 18%), 0 6px 16px rgb(40 28 16 / 8%);

  /* ── Motion ──────────────────────────────────────────────── */
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 520ms; --dur-5: 840ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-emphasis: cubic-bezier(0.2, 0, 0, 1);

  /* ── Layers ──────────────────────────────────────────────── */
  --z-sticky: 20; --z-overlay: 40; --z-dialog: 60; --z-toast: 80;
}

[data-theme='dark'] {
  color-scheme: dark;

  --ink: #f4efe7;
  --ink-soft: #d6cec3;
  --muted: #9c948a;
  --faint: #6f675e;
  --line: #38322c;
  --line-soft: #2a2521;

  --paper: #14110f;
  --surface: #1c1815;
  --surface-raised: #241f1b;
  --surface-sunken: #100e0c;

  --accent: #8db2ec;
  --accent-deep: #b3cdf6;
  --accent-soft: #1c2b45;
  --accent-ink: #0e1725;

  --warm: #e79b46;
  --warm-soft: #33240f;
  --warm-ink: #241704;

  --ok: #6cc48f;   --ok-soft: #14291d;
  --warn: #e0ab52; --warn-soft: #2c2210;
  --bad: #e88a84;  --bad-soft: #2f1917;

  --stay: #b39ce8; --stay-soft: #241d38;
  --food: #eb9370; --food-soft: #331e15;
  --spot: #63c2b6; --spot-soft: #122b28;

  --e1: 0 1px 2px rgb(0 0 0 / 40%);
  --e2: 0 2px 8px rgb(0 0 0 / 45%), 0 8px 20px rgb(0 0 0 / 30%);
  --e3: 0 10px 28px rgb(0 0 0 / 50%), 0 2px 8px rgb(0 0 0 / 35%);
  --e4: 0 28px 70px rgb(0 0 0 / 62%), 0 8px 20px rgb(0 0 0 / 40%);
}

/* Short aliases used by the small app stylesheet. */
:root,
[data-theme='dark'] {
  --body: var(--ink-soft);
  --surface-soft: var(--surface-sunken);
  --blue: var(--accent);
  --blue-dark: var(--accent-deep);
  --blue-tint: var(--accent-soft);
  --green: var(--ok);
  --green-tint: var(--ok-soft);
  --orange: var(--warm);
  --orange-tint: var(--warm-soft);
  --red: var(--bad);
  --red-tint: var(--bad-soft);
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --shadow-dialog: var(--e4);
}

/* ── Base ──────────────────────────────────────────────────── */
html {
  min-width: 320px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-synthesis: none;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Any author rule that sets `display` out-ranks the UA's [hidden] rule, so
   `element.hidden = true` silently stops working — the app toggles visibility
   that way throughout. One guard here beats patching each selector. */
[hidden] { display: none !important; }

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

:is(h1, h2, h3, h4) { color: var(--ink); text-wrap: balance; }
p { text-wrap: pretty; }

/* Numbers line up in project metadata and timestamps. */
.u-tnum, table, time, [data-count-to] { font-variant-numeric: tabular-nums; }

.u-eyebrow {
  color: var(--muted);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.u-display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--tracking-display);
  line-height: 1.04;
}

.u-serif-italic { font-family: var(--font-display); font-style: italic; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}