/* ==========================================================================
   다유니넛츠 Design Tokens — 색상·타이포·레이아웃 단일 원천
   ========================================================================== */

:root {
    /* ── Brand palette ── */
    --brand-green: #075640;
    --brand-gold: #c5a35e;
    --brand-fresh: #85c341;
    --brand-brown: #743308;
    --brand-cream: #f3f1eb;

    /* ── Surfaces ── */
    --white: #ffffff;
    --surface-subtle: #f9fafb;
    --surface-muted: #f8f9fa;
    --surface-muted-hover: #f1f3f5;
    --surface-panel: #fcfcfc;
    --surface-placeholder: #f7f7f7;

    /* ── Neutrals (form · border) ── */
    --gray-900: #111827;
    --gray-800: #1f2937;
    --gray-700: #374151;
    --gray-600: #4b5563;
    --gray-500: #6b7280;
    --gray-400: #9ca3af;
    --gray-300: #d1d5db;
    --gray-200: #e5e7eb;
    --gray-100: #f3f4f6;
    --border-default: var(--gray-200);
    --text-muted: var(--gray-500);
    --text-subtle: var(--gray-400);
    --text-strong: var(--gray-900);
    --text-secondary: var(--gray-600);
    --text-body: var(--gray-700);

    /* ── Partner / channel colors ── */
    --naver-green: #03c75a;
    --naver-green-dark: #029a4a;
    --kakao-yellow: #fae100;
    --kakao-text: #3c1e1e;
    --fab-buy-text: #f8e6c4;

    /* ── Semantic aliases (컴포넌트 · 상태) ── */
    --badge-muted: var(--gray-500);
    --surface-hover: var(--surface-subtle);
    --btn-dark-hover: var(--gray-800);

    /* ── Layout / type scale ── */
    --space-page: clamp(1rem, 3vw, 1.5rem);
    --header-padding-x: 1.5rem;
    --header-height: 4rem;
    --header-height-scrolled: 3rem;

    /* ── Spacing rhythm (mobile-first · 320–430px tuned) ── */
    --section-py: 2.75rem;
    --section-py-lg: 4.5rem;
    --section-py-xl: 4rem;
    /* Main 마지막 콘텐츠 → Footer 상단(padding) 직전 간격 */
    --page-end-padding: 5rem;
    --section-head-gap: 1.75rem;
    --title-body-gap: 0.875rem;
    --title-body-gap-lg: 1.25rem;
    --eyebrow-title-gap: 0.625rem;
    --card-padding: clamp(1.125rem, 3vw, 1.375rem);
    --card-padding-md: 1.75rem;
    --card-padding-lg: 2rem;
    --btn-min-height: 2.75rem;

    --text-hero: clamp(2rem, 6vw + 0.65rem, 3rem);
    --text-section: clamp(1.375rem, 3.5vw + 0.65rem, 2.25rem);
    --text-subsection: clamp(1.375rem, 4vw + 0.5rem, 2.25rem);
    --text-body-lg: clamp(1.0625rem, 1.5vw + 0.8rem, 1.25rem);
    --text-body: clamp(1rem, 0.5vw + 0.9rem, 1.0625rem);
    /* 보조 라벨 14px · 한 단계 위(본문·값) 16px */
    --text-ui-sm: 0.875rem;
    --text-ui-md: 1rem;
    --text-caption: var(--text-ui-sm);
    --text-footer-legal: clamp(0.875rem, 0.35vw + 0.78rem, 0.9375rem);
    --header-logo-h: clamp(2.125rem, 7vw, 2.75rem);

    /* ── Korean UI typography rhythm (line-height · letter-spacing) ── */
    --leading-ko-display: 1.25;
    --leading-ko-heading: 1.35;
    --leading-ko-body: 1.65;
    --leading-ko-body-lg: 1.75;
    --tracking-ko-heading: -0.025em;
    --tracking-ko-body: -0.012em;
    --tracking-ko-ui: -0.01em;

    /* ── Label caps — breadcrumb · product-badge (장식·eyebrow만 소형 허용) ── */
    --label-caps-font-size: var(--text-ui-sm);
    --label-caps-font-size-md: var(--text-ui-md);
    --label-caps-letter-spacing: 0.1em;
    --label-caps-letter-spacing-md: 0.12em;
    --label-caps-line-height: 1.4;
    --label-caps-font-weight: 500;
    --label-caps-current-font-weight: 800;

    /* ── Buttons ── */
    --btn-fill-duration: 0.3s ease;
    --btn-radius-pill: 9999px;
    --btn-radius-card: 0.75rem;
    --radius-card: 0.75rem;
    --radius-card-md: 1rem;
    --radius-pill: 9999px;
    --btn-dark: var(--gray-900);
    --btn-shadow-md: 0 10px 40px rgba(0, 0, 0, 0.15);
    --btn-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-card-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-card-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-card-soft: 0 10px 40px -15px rgba(0, 0, 0, 0.05);
    --shadow-promo: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-brand-card: 0 4px 24px -8px rgba(0, 0, 0, 0.06);
    --shadow-brand-card-hover: 0 12px 32px -12px rgba(0, 0, 0, 0.1);
    --shadow-fab: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

    /* ── Spacing scale (Tailwind 4px grid) ── */
    --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-16: 4rem;

    /* ── Form ── */
    --form-radius: 0.75rem;
    --form-control-height: 3.25rem; /* 52px — input · select 공통 */
    --form-border: var(--border-default);
    --form-border-focus: var(--brand-green);
    --form-bg: var(--white);
    --form-error: #dc2626;
}

@media (min-width: 768px) {
    :root {
        --header-height: 5rem;
        --header-height-scrolled: 4rem;
        --space-page: 3rem;
        --section-py: 4.5rem;
        --section-py-xl: 6rem;
        --page-end-padding: 6rem;
        --section-head-gap: 3.5rem;
        --title-body-gap: 1.5rem;
        --title-body-gap-lg: 2.5rem;
        --eyebrow-title-gap: 1rem;
        --card-padding: 2rem;
        --card-padding-md: 2.5rem;
    }
}

@media (min-width: 1024px) {
    :root {
        --header-height: 5.5rem;
        --header-height-scrolled: 4.625rem;
        --section-head-gap: 4rem;
        --title-body-gap-lg: 3rem;
        --card-padding-lg: 3rem;
    }
}

@media (min-width: 1316px) {
    :root {
        --header-padding-x: 3rem;
    }
}