/*
 * Trip Companion Studio v2 — Editorial Design Tokens
 * Shape contract: themes compile the Art Direction Contract into a file of this
 * shape (styles/tokens.css). Components consume tokens exclusively; no hard-coded
 * theme values outside this file. Values below are the DEFAULT editorial system
 * values — themes override via the Art Direction Contract, not by editing components.
 *
 * Sections: palette · type roles · type scale · spacing · layout · imagery ·
 *           containers · lines & dividers · overlays & shadows · motion · safe areas
 */

:root {
  /* ── Palette (theme-owned; these are the default "ink & paper" neutral set) ── */
  --ink: #26251f;            /* warm charcoal — never pure #000 */
  --ink-soft: #6d675c;       /* secondary text, quiet metadata */
  --ink-faint: #756e61;      /* captions, credits (4.76:1 on paper — AA-passing; raised from #a39d90 which failed at 2.54:1) */
  --paper: #faf8f4;          /* warm paper — never pure #fff */
  --paper-deep: #f0ede6;     /* alternate surface */
  --accent: #9a5b46;         /* theme sets; used sparingly (eyebrows, key CTAs) */
  --accent-ink: #7c4635;     /* accent pressed/hover */
  --line: rgba(38, 37, 31, .14);   /* hairlines */
  --line-strong: rgba(38, 37, 31, .28);
  --scrim: 13, 18, 28;       /* rgb triplet for scrim gradients (theme-tinted) */

  /* ── Type roles (theme chooses faces; roles are fixed) ── */
  --font-display: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
  --font-meta: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* or mono per theme */
  --cjk-fallback: "Noto Sans KR", "Hiragino Sans", "Apple SD Gothic Neo", sans-serif;

  /* ── Type scale (see typography.md; audit rendered px at 390/768/1280) ── */
  --text-hero: clamp(2.75rem, 9vw, 5.5rem);
  --text-h1: clamp(2.25rem, 7vw, 4rem);
  --text-h2: clamp(1.5rem, 4.5vw, 2.5rem);
  --text-h3: clamp(1.15rem, 3vw, 1.5rem);
  --text-lede: clamp(1.1rem, 3.5vw, 1.35rem);
  --text-body: 1rem;          /* 16px floor */
  --text-caption: 0.8125rem;  /* 13px floor */
  --text-eyebrow: 0.6875rem;  /* 11px floor, tracked caps */
  --track-eyebrow: 0.14em;
  --leading-display: 1.06;
  --leading-lede: 1.4;
  --leading-body: 1.58;
  --leading-caption: 1.4;

  /* ── Spacing scale (4px base; generous by default — theme may compress, not expand chaos) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --section-gap: var(--space-7);        /* between major sections */
  --section-gap-immersive: var(--space-8); /* around full-bleed/immersive blocks */
  --caption-gap: var(--space-2);        /* image → caption */

  /* ── Layout ── */
  --gutter: var(--space-4);             /* content side padding (≥16px) */
  --gutter-wide: var(--space-5);        /* ≥600px viewports */
  --max-text-width: 38em;               /* body measure 34–45em */
  --max-page-width: 720px;              /* editorial reading column */
  --max-page-wide: 1080px;              /* Places/map grids */

  /* ── Imagery (see image-pipeline.md) ── */
  --ratio-wide: 16 / 9;                 /* desktop hero */
  --ratio-portrait: 4 / 5;              /* mobile hero / feature */
  --ratio-thumb: 1 / 1;
  --thumb-size: 64px;
  --hero-min-height: 72svh;             /* mobile CoverHero */
  --day-hero-ratio: 4 / 5;              /* mobile DayHero; wide on desktop */

  /* ── Containers (cards only on genuinely discrete objects — see editorial-system.md) ── */
  --radius-card: 4px;                   /* editorial default: near-square, NOT 16px */
  --radius-sheet: 14px;                 /* bottom sheets only */
  --card-padding: var(--space-4);
  --card-border: 1px solid var(--line);
  --card-bg: var(--paper);

  /* ── Lines & dividers ── */
  --divider: 1px solid var(--line);     /* hairline between editorial rows */
  --divider-strong: 2px solid var(--ink); /* chapter/section breaks */

  /* ── Overlays & shadows (flat editorial default; shadows rare) ── */
  --scrim-gradient: linear-gradient(
    to bottom,
    rgba(var(--scrim), 0) 0%,
    rgba(var(--scrim), .46) 46%,
    rgba(var(--scrim), .68) 68%,
    rgba(var(--scrim), .93) 93%
  );
  --shadow-sheet: 0 18px 55px rgba(var(--scrim), .18);   /* bottom sheets only */
  --shadow-none: none;

  /* ── Motion (see typography.md §Motion; transform/opacity only) ── */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-editorial: cubic-bezier(.45, .05, .35, .95);

  /* ── Safe areas ── */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --nav-height: 60px;                    /* bottom tab bar, excludes safe area */
}

/* Chapter variation pattern — themes may scope overrides, never fork components:
   .chapter-busan { --accent: #3d6b6e; --scrim: 10, 24, 30; } */

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; }
}

@media (min-width: 600px) {
  :root {
    --gutter: var(--gutter-wide);
    --max-page-width: 760px;
  }
}