/* ==========================================================================
   SOMMARE Design Tokens
   브랜드 5색(디자인참고)을 기준으로, 글자 대비(WCAG AA 4.5:1)를 맞추려고
   본문용 단계만 한 칸 진하게 더했어요. 원색 값은 --brand-* 에 그대로 둬요.
   ========================================================================== */
@layer reset, base, layout, components, pages, utilities;

:root {
  /* Brand (원색) */
  --brand-ivory: #FAF8F5;   /* Background */
  --brand-brown: #3A2A1E;   /* Primary */
  --brand-taupe: #9E826C;   /* Accent  (큰 글자·장식 전용, 3.38:1) */
  --brand-gray:  #7F7065;   /* Sub text 원색 (4.49:1) */
  --brand-greige:#CFC1B4;   /* Divider */

  /* Neutral scale (따뜻한 회갈색 계열) */
  --ivory-50:  #FDFCFA;
  --ivory-100: #FAF8F5;
  --ivory-200: #F4F0EA;
  --ivory-300: #ECE6DD;
  --ivory-400: #E1D8CC;
  --greige-500:#CFC1B4;
  --taupe-500: #9E826C;
  --taupe-600: #86694F;
  --taupe-700: #7A5F4A;
  --gray-600:  #6F6157;
  --brown-600: #5E4B3C;
  --brown-700: #4A3727;
  --brown-800: #3A2A1E;
  --brown-900: #2A1F16;
  --brown-950: #1C140E;
  --oak-300:   #D9B98F;
  --oak-500:   #B98B5A;
  --walnut-600:#6B4A33;

  /* Role tokens */
  --bg:          var(--ivory-100);
  --bg-alt:      var(--ivory-200);
  --bg-deep:     var(--ivory-300);
  --surface:     var(--ivory-50);
  --ink:         var(--brown-800);
  --ink-strong:  var(--brown-900);
  --text:        var(--brown-800);
  --text-sub:    var(--gray-600);   /* 5.62:1 */
  --text-faint:  var(--brand-gray); /* 4.49:1, 14px 이상 보조 정보에만 */
  --accent:      var(--taupe-500);
  --accent-text: var(--taupe-700);  /* 5.56:1, 작은 강조 글자 */
  --line:        var(--brand-greige);
  --line-soft:   color-mix(in srgb, var(--brand-greige) 55%, transparent);
  --line-strong: var(--brown-800);
  --focus:       #9A5B2E;

  /* Dark surface (짙은 갈색 섹션·푸터) */
  --dark-bg:       var(--brown-900);
  --dark-bg-2:     #33261B;
  --dark-text:     var(--ivory-100);
  --dark-sub:      #BFB2A5;  /* 7.75:1 */
  --dark-line:     rgba(250, 248, 245, .14);

  /* Status (관리자·폼) */
  --good: #4F6B4A;  --good-soft: #E7EDE3;
  --warn: #9A6A1F;  --warn-soft: #F5ECDC;
  --bad:  #A2412F;  --bad-soft:  #F6E4DF;
  --info: #4C5F73;  --info-soft: #E3E8EE;

  /* Type */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --font-serif: "Cormorant Garamond", "Noto Serif KR", Georgia, serif;
  --font-serif-ko: "Noto Serif KR", "Cormorant Garamond", serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display-xl: clamp(2.75rem, 1.6rem + 5.2vw, 6.25rem);
  --fs-display-lg: clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem);
  --fs-display-md: clamp(1.875rem, 1.3rem + 2.4vw, 3.25rem);
  --fs-display-sm: clamp(1.5rem, 1.15rem + 1.5vw, 2.375rem);
  --fs-title-lg:   clamp(1.3rem, 1.12rem + .7vw, 1.75rem);
  --fs-title:      clamp(1.125rem, 1.05rem + .3vw, 1.3125rem);
  --fs-body-lg:    clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  --fs-body:       1rem;
  --fs-small:      .9375rem;
  --fs-caption:    .8125rem;
  --fs-micro:      .75rem;

  --lh-tight: 1.18;
  --lh-snug:  1.38;
  --lh-body:  1.72;
  --tracking-tight: -.025em;
  --tracking-display: -.035em;
  --tracking-wide: .32em;

  /* Space (4px base) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px;
  --s-11: 80px; --s-12: 96px; --s-13: 128px; --s-14: 160px;
  --section-y: clamp(88px, 6vw + 56px, 176px);
  --gutter: clamp(20px, 4.4vw, 64px);
  --container: 1360px;
  --container-narrow: 880px;
  --header-h: 76px;

  /* Radius: 가구 모서리처럼 작고 단정하게 */
  --r-xs: 2px; --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-xl: 22px; --r-pill: 999px;

  /* Elevation (따뜻한 그림자) */
  --sh-1: 0 1px 2px rgba(42, 31, 22, .06), 0 1px 1px rgba(42, 31, 22, .04);
  --sh-2: 0 6px 18px -6px rgba(42, 31, 22, .14), 0 2px 6px rgba(42, 31, 22, .05);
  --sh-3: 0 22px 48px -18px rgba(42, 31, 22, .28), 0 6px 14px -6px rgba(42, 31, 22, .08);
  --sh-inset: inset 0 0 0 1px var(--line-soft);

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.55, .06, .68, .19);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --ease-soft: cubic-bezier(.22, .61, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --d-1: 140ms; --d-2: 220ms; --d-3: 320ms; --d-4: 480ms; --d-5: 720ms; --d-6: 1000ms; --d-7: 1400ms;

  /* Layers */
  --z-base: 1; --z-sticky: 20; --z-header: 50; --z-menu: 60; --z-overlay: 80; --z-modal: 90; --z-toast: 100; --z-cursor: 120;

  color-scheme: light;
}