/* ==========================================================================
   TH Heritage Cabinetry Design Tokens
   Generated from DESIGN.md — TH Heritage Cabinetry Artisan
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

:root {
  /* ── Colors: Primary ── */
  --color-primary: #1C1917;
  --color-on-primary: #FFFFFF;
  --color-primary-container: #44403C;
  --color-on-primary-container: #E7E5E4;

  /* ── Colors: Secondary ── */
  --color-secondary: #78716C;
  --color-on-secondary: #FFFFFF;
  --color-secondary-container: #D6D3D1;
  --color-on-secondary-container: #44403C;

  /* ── Colors: Tertiary (Accent) ── */
  --color-tertiary: #C27803;
  --color-on-tertiary: #FFFFFF;
  --color-tertiary-container: #FDE68A;
  --color-on-tertiary-container: #78350F;

  /* ── Colors: Neutral & Surface ── */
  --color-neutral: #F5F0EB;
  --color-surface: #FFFFFF;
  --color-surface-dim: #E7E0D8;
  --color-surface-container: #F5F0EB;
  --color-surface-container-high: #EDE8E2;
  --color-on-surface: #1C1917;
  --color-on-surface-variant: #78716C;

  /* ── Colors: Outline ── */
  --color-outline: #A8A29E;
  --color-outline-variant: #D6D3D1;

  /* ── Colors: Status ── */
  --color-error: #DC2626;
  --color-on-error: #FFFFFF;
  --color-success: #16A34A;
  --color-on-success: #FFFFFF;

  /* ── Colors: Inverse ── */
  --color-inverse-surface: #1C1917;
  --color-inverse-on-surface: #F5F0EB;

  /* ── Typography: Font Families ── */
  --font-display: 'Cormorant Garamond', 'Garamond', 'Georgia', serif;
  --font-body: 'Be Vietnam Pro', 'Inter', 'Helvetica Neue', sans-serif;

  /* ── Typography: Headline Display ── */
  --text-headline-display-size: 72px;
  --text-headline-display-weight: 700;
  --text-headline-display-line: 1.05;
  --text-headline-display-tracking: -0.03em;

  /* ── Typography: Headline Large ── */
  --text-headline-lg-size: 48px;
  --text-headline-lg-weight: 600;
  --text-headline-lg-line: 1.1;
  --text-headline-lg-tracking: -0.02em;

  /* ── Typography: Headline Medium ── */
  --text-headline-md-size: 32px;
  --text-headline-md-weight: 500;
  --text-headline-md-line: 1.2;
  --text-headline-md-tracking: -0.01em;

  /* ── Typography: Headline Small ── */
  --text-headline-sm-size: 24px;
  --text-headline-sm-weight: 500;
  --text-headline-sm-line: 1.3;
  --text-headline-sm-tracking: 0;

  /* ── Typography: Body Large ── */
  --text-body-lg-size: 18px;
  --text-body-lg-weight: 400;
  --text-body-lg-line: 1.7;

  /* ── Typography: Body Medium ── */
  --text-body-md-size: 16px;
  --text-body-md-weight: 400;
  --text-body-md-line: 1.6;

  /* ── Typography: Body Small ── */
  --text-body-sm-size: 14px;
  --text-body-sm-weight: 400;
  --text-body-sm-line: 1.5;

  /* ── Typography: Label Large ── */
  --text-label-lg-size: 14px;
  --text-label-lg-weight: 600;
  --text-label-lg-line: 1;
  --text-label-lg-tracking: 0.08em;

  /* ── Typography: Label Medium ── */
  --text-label-md-size: 12px;
  --text-label-md-weight: 500;
  --text-label-md-line: 1;
  --text-label-md-tracking: 0.06em;

  /* ── Typography: Label Small ── */
  --text-label-sm-size: 11px;
  --text-label-sm-weight: 500;
  --text-label-sm-line: 1;
  --text-label-sm-tracking: 0.05em;

  /* ── Rounded ── */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ── Spacing ── */
  --space-base: 8px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 80px;
  --space-section: 96px;
  --space-gutter: 24px;
  --container-max: 1280px;

  /* ── Elevation (Shadows) ── */
  --shadow-sm: 0 1px 3px rgba(28, 25, 23, 0.05);
  --shadow-md: 0 4px 16px rgba(28, 25, 23, 0.08);
  --shadow-lg: 0 8px 32px rgba(28, 25, 23, 0.12);
  --shadow-xl: 0 16px 48px rgba(28, 25, 23, 0.16);

  /* ── Transitions ── */
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;

  /* ── Z-Index Scale ── */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal-backdrop: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-normal: 0ms;
    --transition-slow: 0ms;
  }
}