/* ============================================================================
 * 유레카 · Design Tokens
 * v1.0 · April 2026
 * Edit token values here. Component styles live in style.css.
 * ============================================================================ */

:root {
  /* --- Surface colors --- */
  --color-cream:      #EFE6D3;  /* Page background */
  --color-cream-dim:  #E5DBC5;  /* Nav / Footer / Issue strip */
  --color-cream-warm: #FFF8EB;  /* Cards / Form surfaces */
  --color-coffee:     #2E1F15;  /* CTA strips / Dark blocks */

  /* --- Text colors --- */
  --color-ink:         #2E1F15;
  --color-ink-muted:   #5A4A3A;
  --color-ink-subtle:  #8A7E6A;
  --color-ink-inverse: #EFE6D3;

  /* --- Accent colors --- */
  --color-burgundy:       #8B2530;
  --color-burgundy-deep:  #6B1A22;
  --color-gold:           #C9A961;

  /* --- Illustration palette (hero SVGs only) --- */
  --color-beige:      #D4B896;
  --color-terracotta: #C4592E;
  --color-forest:     #4A6B3F;
  --color-dusk:       #4A3A6B;
  --color-amber:      #8F6D1E;

  /* --- Borders --- */
  --color-border:        rgba(46, 31, 21, 0.15);
  --color-border-strong: rgba(46, 31, 21, 0.25);

  /* --- Font families --- */
  --font-serif: "EB Garamond", "Noto Serif KR", ui-serif, Georgia, serif;
  --font-sans:  "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- Font sizes --- */
  --text-xs:   0.625rem;   /* 10px */
  --text-sm:   0.6875rem;  /* 11px */
  --text-base: 0.75rem;    /* 12px */
  --text-md:   0.8125rem;  /* 13px */
  --text-lg:   0.9375rem;  /* 15px */
  --text-xl:   1.0625rem;  /* 17px */
  --text-2xl:  1.375rem;   /* 22px */
  --text-3xl:  1.75rem;    /* 28px */
  --text-4xl:  2.125rem;   /* 34px */
  --text-5xl:  2.625rem;   /* 42px */
  --text-6xl:  3rem;       /* 48px */

  /* --- Letter spacing --- */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.1em;
  --tracking-wider:   0.18em;
  --tracking-widest:  0.3em;
  --tracking-brand:   0.22em;

  /* --- Line height --- */
  --leading-tight:   1.1;
  --leading-heading: 1.2;
  --leading-snug:    1.45;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;
  --leading-loose:   1.85;

  /* --- Radius --- */
  --radius-none:      0;
  --radius-card:      2px;
  --radius-container: 12px;

  /* --- Spacing --- */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-7:  2.25rem;   /* 36px — default page padding */
  --space-8:  2.75rem;   /* 44px */
  --space-9:  3rem;      /* 48px */
  --space-10: 3.5rem;    /* 56px */
  --space-12: 4.5rem;    /* 72px */
  --space-16: 6rem;      /* 96px — section rhythm */

  /* --- Layout --- */
  --container-max: 1280px;
  --container-px: 2.25rem;

  /* --- Motion --- */
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
  --ease-editorial:  cubic-bezier(0.22, 1, 0.36, 1);

  /* --- Breakpoints (for reference — CSS uses media queries directly) --- */
  /* sm: 640px  md: 768px  lg: 1024px  xl: 1280px */
}