/* ==========================================================================
   HAPPY BEAR GROUP — DESIGN TOKENS
   Single source of truth for color, type, spacing, radius, shadow, motion.
   Mirrors wordpress-theme/happy-bear-group/assets/css/tokens.css exactly —
   keep both in sync if edited.
   ========================================================================== */

:root {
  /* ---- Brand color system (as specified in brief) ---- */
  --color-bg: #F5EFE4;          /* background */
  --color-ink: #29231E;         /* dark text */
  --color-brown: #4A3528;       /* brown */
  --color-gold: #B8893D;        /* gold / amber accent */
  --color-green: #78836A;       /* soft green */
  --color-sand: #E9DDCA;        /* light sand */

  /* ---- Derived tones (generated from the five brand colors above) ---- */
  --color-white: #FFFFFF;
  --color-ink-70: rgba(41, 35, 30, 0.70);
  --color-ink-50: rgba(41, 35, 30, 0.50);
  --color-ink-15: rgba(41, 35, 30, 0.15);
  --color-brown-dark: #2E2119;   /* deep coffee — dark section backgrounds */
  --color-brown-darker: #221812;
  --color-brown-light: #6B5645; /* lighter tint of --color-brown, for a 2nd element next to a brown one */
  --color-gold-light: #D4AC6E;   /* hover / lighter accent */
  --color-gold-dark: #9C7332;    /* pressed state */
  --color-gold-tint: rgba(184, 137, 61, 0.10); /* subtle backgrounds/badges */
  --color-green-tint: rgba(120, 131, 106, 0.12);
  --color-green-light: #9AA28F; /* lighter tint of --color-green, for a 2nd element next to a green one */
  --color-sand-dark: #DED0B6;
  --color-border: rgba(41, 35, 30, 0.12);
  --color-border-dark: rgba(245, 239, 228, 0.14);
  --color-overlay-hero: linear-gradient(180deg, rgba(34,24,18,0.5) 0%, rgba(28,20,15,0.68) 55%, rgba(20,14,10,0.9) 100%);
  --color-success: #4E7A51;
  --color-error: #A33E3E;

  /* ---- Semantic tokens ---- */
  --surface-page: var(--color-bg);
  --surface-raised: var(--color-white);
  --surface-sand: var(--color-sand);
  --surface-dark: var(--color-brown-dark);
  --text-primary: var(--color-ink);
  --text-muted: var(--color-ink-70);
  --text-faint: var(--color-ink-50);
  --text-on-dark: var(--color-bg);
  --text-on-dark-muted: rgba(245, 239, 228, 0.72);
  --accent: var(--color-gold);
  --accent-hover: var(--color-gold-light);
  --accent-active: var(--color-gold-dark);

  /* ---- Typography ---- */
  --font-heading: 'Poppins', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans', -apple-system, sans-serif;
  --font-body: 'Inter', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans', -apple-system, sans-serif;

  --text-xs: 0.8125rem;   /* 13px */
  --text-sm: 0.9375rem;   /* 15px */
  --text-base: 1rem;      /* 16px */
  --text-md: 1.125rem;    /* 18px */
  --text-lg: 1.375rem;    /* 22px */
  --text-xl: 1.75rem;     /* 28px */
  --text-2xl: 2.25rem;    /* 36px */
  --text-3xl: 2.875rem;   /* 46px */
  --text-4xl: 3.75rem;    /* 60px */
  --text-5xl: 4.5rem;     /* 72px */

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.12em;

  /* ---- Spacing scale (8pt system) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6.5rem;
  --space-12: 8rem;

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ---- Shadow (consistent elevation scale) ---- */
  --shadow-sm: 0 1px 2px rgba(34, 24, 18, 0.06), 0 1px 3px rgba(34, 24, 18, 0.08);
  --shadow-md: 0 6px 16px rgba(34, 24, 18, 0.10), 0 2px 6px rgba(34, 24, 18, 0.06);
  --shadow-lg: 0 16px 40px rgba(34, 24, 18, 0.16), 0 4px 12px rgba(34, 24, 18, 0.08);
  --shadow-gold: 0 10px 24px rgba(184, 137, 61, 0.28);

  /* ---- Motion tokens ---- */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --duration-fast: 160ms;
  --duration-base: 320ms;
  --duration-slow: 560ms;
  --duration-reveal: 700ms;

  /* ---- Layout ---- */
  --container-max: 1280px;
  --container-narrow: 860px;
  --header-height: 84px;
  --header-height-scrolled: 68px;

  /* ---- Z-index scale ---- */
  --z-base: 0;
  --z-card-hover: 10;
  --z-sticky-cta: 40;
  --z-header: 60;
  --z-overlay: 90;
  --z-modal: 100;
  --z-toast: 110;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --duration-reveal: 0ms;
  }
}