/* ==========================================================================
   ANDYWIKI Editorial Archive — Design Tokens (Olive)
   Trimmed + adapted from the uploaded design-tokens.css for the homepage.
   Olive is the global anchor. Warm editorial neutrals. Serif-led type.
   ========================================================================== */

:root,
[data-theme="light"] {
  /* ---- Olive scale (primary brand accent) ---- */
  --olive-700: #4e5a34;
  --olive-650: #55613a;
  --olive-600: #5c6940;
  --olive-550: #657247;
  --olive-500: #6e7b4a;
  --olive-450: #7b8857;
  --olive-400: #87935e;
  --olive-350: #98a471;
  --olive-300: #aab38c;
  --olive-250: #bcc3a4;
  --olive-200: #cdd4b7;
  --olive-150: #dde2ca;
  --olive-100: #e9edd9;
  --olive-50:  #f5f7ee;

  /* ---- Warm editorial neutrals ---- */
  --warm-000: #fffdfa;
  --warm-050: #fcfaf5;
  --warm-100: #f7f4ed;
  --warm-150: #f3efe6;
  --warm-200: #ece6d9;
  --warm-250: #e3dccd;
  --warm-300: #d9d3c4;
  --warm-350: #cdc6b6;
  --warm-400: #beb7a7;
  --warm-500: #a89f8d;
  --warm-600: #8a8678;
  --warm-700: #666457;
  --warm-800: #454338;
  --warm-900: #1f1f1a;

  /* ---- Secondary muted editorial accents ---- */
  --navy-deep: #33485c;  --navy-soft: #dfe7ef;
  --burgundy-muted: #6b4340;  --burgundy-soft: #efe4e2;
  --ochre-soft: #9a7a3e;  --ochre-tint: #f4ecda;
  --clay-soft: #a66b4b;   --clay-tint: #f3e7df;
  --sage-gray: #98a08a;   --sage-tint: #edf0e8;

  /* ---- Semantic backgrounds ---- */
  --color-bg-page: var(--warm-100);
  --color-bg-page-alt: var(--warm-150);
  --color-bg-surface: var(--warm-050);
  --color-bg-surface-soft: var(--warm-150);
  --color-bg-elevated: var(--warm-000);
  --color-bg-inverse: var(--warm-900);

  /* ---- Text ---- */
  --color-text-primary: var(--warm-900);
  --color-text-body: var(--warm-800);
  --color-text-secondary: var(--warm-700);
  --color-text-muted: var(--warm-600);
  --color-text-inverse: var(--warm-050);
  --color-text-on-accent: #ffffff;

  /* ---- Borders ---- */
  --color-border-soft: var(--warm-300);
  --color-border-default: var(--warm-350);
  --color-border-strong: var(--warm-400);

  /* ---- Brand accent ---- */
  --color-accent: var(--olive-600);
  --color-accent-hover: var(--olive-700);
  --color-accent-soft: var(--olive-100);
  --color-accent-softer: var(--olive-50);
  --color-link: var(--olive-700);
  --color-link-hover: var(--olive-600);
  --color-focus-ring: rgba(92, 105, 64, 0.30);
  --color-selection-bg: rgba(110, 123, 74, 0.18);

  /* ---- Access states ---- */
  --color-access-public: var(--olive-600);
  --color-access-public-bg: var(--olive-100);
  --color-access-members: var(--burgundy-muted);
  --color-access-members-bg: var(--burgundy-soft);
  --color-access-external: var(--navy-deep);
  --color-access-external-bg: var(--navy-soft);

  /* ---- Section accent (context-scoped; olive default) ---- */
  --section-accent: var(--olive-600);
  --section-accent-soft: var(--olive-100);
  --section-accent-strong: var(--olive-700);

  /* ---- Type families ---- */
  --font-serif:
    "Newsreader", "Noto Serif KR", "Iowan Old Style",
    "Palatino Linotype", Georgia, serif;
  --font-sans:
    "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo",
    "Malgun Gothic", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  --font-mono: "SFMono-Regular", "JetBrains Mono", "IBM Plex Mono", Consolas, monospace;

  /* Role hooks — overridden by [data-fonts] tweak */
  --font-display: var(--font-serif);
  --font-heading: var(--font-serif);
  --font-body: var(--font-sans);
  --font-meta: var(--font-sans);

  /* ---- Weights ---- */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- Type scale ---- */
  --text-2xs: 0.6875rem;
  --text-xs:  0.75rem;
  --text-sm:  0.875rem;
  --text-base:1rem;
  --text-md:  1.0625rem;
  --text-lg:  1.1875rem;
  --text-xl:  1.375rem;
  --text-2xl: 1.625rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;
  --text-5xl: 3.25rem;
  --text-hero: clamp(2.6rem, 1.6rem + 4.4vw, 5rem);
  --text-section: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem);

  /* ---- Line heights / tracking ---- */
  --leading-tight: 1.12;
  --leading-snug: 1.26;
  --leading-normal: 1.5;
  --leading-relaxed: 1.72;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.16em;
  --tracking-widest: 0.28em;

  /* ---- Spacing ---- */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem;    --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem;    --space-10: 2.5rem; --space-12: 3rem;
  --space-14: 3.5rem; --space-16: 4rem;  --space-20: 5rem;
  --space-24: 6rem;   --space-28: 7rem;  --space-32: 8rem;

  /* ---- Radius / border / shadow ---- */
  --radius-xs: 0.375rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.125rem;
  --radius-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(31,31,26,0.04);
  --shadow-sm: 0 3px 10px rgba(31,31,26,0.05);
  --shadow-md: 0 12px 30px rgba(31,31,26,0.07);
  --shadow-lg: 0 22px 50px rgba(31,31,26,0.10);

  /* ---- Layout ---- */
  --max-wide: 78rem;
  --max-default: 68rem;
  --max-narrow: 46rem;
  --max-reading: 40rem;
  --pad-x: clamp(1.25rem, 4vw, 3rem);
  --header-h: 4.75rem;

  /* ---- Motion ---- */
  --dur-fast: 140ms;
  --dur-normal: 220ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ---- Tweak-driven hooks (defaults) ---- */
  --collection-accent: var(--olive-600);
  --collection-accent-soft: var(--olive-100);
}

/* ==========================================================================
   DARK THEME — "warm ink" editorial. Not pure black: olive-tinted charcoal.
   Light cover cards stay light → gallery / framed-print effect.
   ========================================================================== */
[data-theme="dark"] {
  /* warm ink backgrounds */
  --color-bg-page: #16150f;
  --color-bg-page-alt: #1c1b13;
  --color-bg-surface: #201e16;
  --color-bg-surface-soft: #26241a;
  --color-bg-elevated: #26241a;
  --color-bg-inverse: #f5f7ee;

  /* softened off-white text (never pure white on near-black) */
  --color-text-primary: #f1ece0;
  --color-text-body: #d6d1c2;
  --color-text-reading: #ece7d9; /* 장문 본문 전용(본문보다 밝게 — 칼럼 가독성) */
  --color-text-secondary: #b1ac9d;
  --color-text-muted: #8a8678;
  --color-text-inverse: #1f1f1a;
  --color-text-on-accent: #15140e;

  --color-border-soft: rgba(245, 247, 238, 0.09);
  --color-border-default: rgba(245, 247, 238, 0.16);
  --color-border-strong: rgba(245, 247, 238, 0.26);

  /* olive brightened for legibility on dark */
  --color-accent: #aab38c;
  --color-accent-hover: #bcc3a4;
  --color-accent-soft: rgba(170, 179, 140, 0.16);
  --color-accent-softer: rgba(170, 179, 140, 0.10);
  --color-link: #bcc3a4;
  --color-link-hover: #cdd4b7;
  --color-focus-ring: rgba(170, 179, 140, 0.42);
  --color-selection-bg: rgba(170, 179, 140, 0.24);

  /* secondary editorial accents brightened */
  --navy-deep: #9db8d4;   --navy-soft: rgba(157, 184, 212, 0.16);
  --burgundy-muted: #d49f8a; --burgundy-soft: rgba(212, 159, 138, 0.15);
  --ochre-soft: #ccab6a;  --ochre-tint: rgba(204, 171, 106, 0.16);
  --clay-soft: #cf9a7b;   --clay-tint: rgba(207, 154, 123, 0.16);
  --sage-gray: #aab39a;   --sage-tint: rgba(170, 179, 154, 0.16);

  /* access states */
  --color-access-public: #aab38c;   --color-access-public-bg: rgba(170, 179, 140, 0.16);
  --color-access-members: #d49f8a;  --color-access-members-bg: rgba(212, 159, 138, 0.16);
  --color-access-external: #9db8d4; --color-access-external-bg: rgba(157, 184, 212, 0.16);

  --section-accent: var(--color-accent);
  --section-accent-soft: var(--color-accent-soft);
  --section-accent-strong: var(--color-accent-hover);

  --collection-accent: var(--color-accent);
  --collection-accent-soft: var(--color-accent-soft);
}