/*
  Wasabi Life Design Tokens v1
  Usage: load before wasabi-design-system.css and components.css.
  Keep semantic names stable so a future dark theme can replace values only.
*/

:root {
  color-scheme: light;

  /* Brand and semantic color */
  --wl-color-brand: #8FA563;
  --wl-color-primary: #5F733C;
  --wl-color-primary-dark: #4A5D3A;
  --wl-color-primary-light: #6B8E4E;
  --wl-color-primary-soft: #EEF3E5;
  --wl-color-primary-faint: #F5F7F0;
  --wl-color-canvas: #FAF8F3;
  --wl-color-canvas-soft: #FBFAF5;
  --wl-color-surface: #FFFFFF;
  --wl-color-surface-soft: #F4F2EB;
  --wl-color-ink: #2B2B28;
  --wl-color-ink-deep: #1F2419;
  --wl-color-text-secondary: #55584F;
  --wl-color-text-caption: #666960;
  --wl-color-accent: #D4A23A;
  --wl-color-accent-soft: #F8EBC9;
  --wl-color-success: #2F6D46;
  --wl-color-success-soft: #E7F2EA;
  --wl-color-warning: #8A5A0A;
  --wl-color-warning-soft: #FFF3D6;
  --wl-color-error: #B42318;
  --wl-color-error-soft: #FDECEA;
  --wl-color-border: #DEDAD1;
  --wl-color-border-strong: #BEB8AA;
  --wl-color-overlay: rgba(31, 36, 25, 0.68);
  --wl-color-glass: rgba(251, 250, 245, 0.88);

  /* Typography: Korean readability first, no viewport-scaled type. */
  --wl-font-sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --wl-font-point: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --wl-type-display-size: 3.5rem;
  --wl-type-display-weight: 850;
  --wl-type-display-leading: 1.12;
  --wl-type-h1-size: 2.75rem;
  --wl-type-h1-weight: 820;
  --wl-type-h1-leading: 1.18;
  --wl-type-h2-size: 2rem;
  --wl-type-h2-weight: 800;
  --wl-type-h2-leading: 1.28;
  --wl-type-h3-size: 1.375rem;
  --wl-type-h3-weight: 760;
  --wl-type-h3-leading: 1.4;
  --wl-type-body-lg-size: 1.1875rem;
  --wl-type-body-lg-leading: 1.72;
  --wl-type-body-size: 1.0625rem;
  --wl-type-body-leading: 1.75;
  --wl-type-caption-size: 0.875rem;
  --wl-type-caption-leading: 1.55;
  --wl-letter-spacing: 0;

  /* 4/8px spacing rhythm */
  --wl-space-0: 0;
  --wl-space-1: 4px;
  --wl-space-2: 8px;
  --wl-space-3: 12px;
  --wl-space-4: 16px;
  --wl-space-5: 24px;
  --wl-space-6: 32px;
  --wl-space-7: 48px;
  --wl-space-8: 64px;
  --wl-space-9: 96px;

  /* Shape and elevation */
  --wl-radius-xs: 4px;
  --wl-radius-sm: 6px;
  --wl-radius-md: 8px;
  --wl-radius-card: 8px;
  --wl-radius-panel: 12px;
  --wl-radius-pill: 999px;
  --wl-shadow-1: 0 1px 2px rgba(31, 36, 25, 0.05), 0 8px 24px rgba(31, 36, 25, 0.05);
  --wl-shadow-2: 0 2px 4px rgba(31, 36, 25, 0.06), 0 16px 40px rgba(31, 36, 25, 0.09);
  --wl-shadow-3: 0 4px 10px rgba(31, 36, 25, 0.08), 0 24px 64px rgba(31, 36, 25, 0.13);

  /* Motion */
  --wl-motion-fast: 200ms;
  --wl-motion-base: 300ms;
  --wl-motion-slow: 400ms;
  --wl-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --wl-ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* Layout and interaction */
  --wl-container: 1080px;
  --wl-reading-measure: 72ch;
  --wl-touch-target: 44px;
  --wl-control-height: 48px;
  --wl-header-height: 72px;
  --wl-focus-ring: 0 0 0 2px var(--wl-color-surface), 0 0 0 5px var(--wl-color-primary-light);

  /* Compatibility aliases for the established Wasabi layers. */
  --wasabi-color-green: var(--wl-color-brand);
  --wasabi-color-green-deep: var(--wl-color-primary-light);
  --wasabi-color-green-cta: var(--wl-color-primary);
  --wasabi-color-cream: var(--wl-color-canvas);
  --wasabi-color-paper: var(--wl-color-surface);
  --wasabi-color-ink: var(--wl-color-ink);
  --wasabi-color-muted: var(--wl-color-text-secondary);
  --wasabi-color-mustard: var(--wl-color-accent);
  --wasabi-font-sans: var(--wl-font-sans);
  --wasabi-container-max: var(--wl-container);
}

@media (max-width: 48rem) {
  :root {
    --wl-type-display-size: 2.5rem;
    --wl-type-h1-size: 2.125rem;
    --wl-type-h2-size: 1.625rem;
    --wl-type-h3-size: 1.25rem;
    --wl-header-height: 64px;
  }
}