/*
 * Astral Commerce Design System Foundation v1.0
 * Package 9.1 — single source of truth for brand, type, spacing and layout.
 */
:root {
  /* Brand and semantic colour */
  --acp-color-bg: #fbf8f1;
  --acp-color-surface: #ffffff;
  --acp-color-surface-subtle: #f7f4ed;
  --acp-color-soft: #f2f6f1;
  --acp-color-sage-50: #f5f8f6;
  --acp-color-sage-100: #e4eee7;
  --acp-color-sage-200: #d7e5db;
  --acp-color-sage-300: #bed3c4;
  --acp-color-sage-400: #9dbdab;
  --acp-color-sage-500: #7fa48f;
  --acp-color-sage-600: #527a69;
  --acp-color-sage-700: #2f5d50;
  --acp-color-sage-800: #21483e;
  --acp-color-sage-900: #17372f;
  --acp-color-text: #1f2b26;
  --acp-color-heading: #16392f;
  --acp-color-muted: #68756f;
  --acp-color-border: #d9e0db;
  --acp-color-border-strong: #bcc9c1;
  --acp-color-gold: #c89a3d;
  --acp-color-gold-soft: #f4e9cf;
  --acp-color-berry: #ae3157;
  --acp-color-chocolate: #7a401f;
  --acp-color-success: #2f7058;
  --acp-color-warning: #9b6725;
  --acp-color-error: #a94f42;
  --acp-color-info: #3f6f8b;
  --acp-color-focus: #1f6f5b;

  /* Typography families */
  --acp-font-heading: "EB Garamond", Georgia, "Times New Roman", serif;
  --acp-font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Type scale */
  --acp-font-size-xs: .75rem;
  --acp-font-size-sm: .875rem;
  --acp-font-size-md: 1rem;
  --acp-font-size-lg: 1.125rem;
  --acp-font-size-xl: 1.25rem;
  --acp-font-size-2xl: 1.5rem;
  --acp-heading-sm: clamp(1.25rem, 1.6vw, 1.5rem);
  --acp-heading-md: clamp(1.5rem, 2vw, 1.875rem);
  --acp-heading-lg: clamp(1.875rem, 2.8vw, 2.375rem);
  --acp-heading-xl: clamp(2.25rem, 3.5vw, 2.75rem);
  --acp-display-lg: clamp(2.75rem, 4.4vw, 3.75rem);
  --acp-display-xl: clamp(3.25rem, 5.2vw, 4.25rem);
  --acp-product-title: clamp(2.75rem, 4vw, 3.5rem);
  --acp-line-tight: 1.02;
  --acp-line-heading: 1.12;
  --acp-line-body: 1.62;
  --acp-tracking-tight: -.025em;
  --acp-tracking-label: .12em;

  /* 4/8 point spacing system */
  --acp-space-0: 0;
  --acp-space-1: 4px;
  --acp-space-2: 8px;
  --acp-space-3: 12px;
  --acp-space-4: 16px;
  --acp-space-5: 20px;
  --acp-space-6: 24px;
  --acp-space-8: 32px;
  --acp-space-10: 40px;
  --acp-space-12: 48px;
  --acp-space-14: 56px;
  --acp-space-16: 64px;
  --acp-space-20: 80px;
  --acp-space-24: 96px;
  --acp-space-32: 128px;
  --acp-section-space: clamp(64px, 7vw, 112px);

  /* Layout */
  --acp-container-reading: 800px;
  --acp-container-content: 1120px;
  --acp-container: 1280px;
  --acp-container-wide: 1440px;
  --acp-gutter: clamp(16px, 3vw, 40px);
  --acp-header-height: 82px;
  --acp-grid-gap: clamp(24px, 3vw, 48px);

  /* Radius */
  --acp-radius-xs: 6px;
  --acp-radius-sm: 8px;
  --acp-radius-md: 14px;
  --acp-radius-lg: 20px;
  --acp-radius-xl: 28px;
  --acp-radius-2xl: 36px;
  --acp-radius-pill: 999px;

  /* Elevation */
  --acp-shadow-0: none;
  --acp-shadow-1: 0 4px 14px rgba(23, 59, 49, .06);
  --acp-shadow-2: 0 10px 28px rgba(23, 59, 49, .09);
  --acp-shadow-3: 0 20px 56px rgba(18, 32, 27, .14);
  --acp-shadow-soft: var(--acp-shadow-2);
  --acp-shadow-overlay: var(--acp-shadow-3);

  /* Motion */
  --acp-motion-fast: 120ms;
  --acp-motion-normal: 180ms;
  --acp-motion-slow: 320ms;
  --acp-ease: cubic-bezier(.2, .8, .2, 1);
  --acp-ease-out: cubic-bezier(.16, 1, .3, 1);

  /* Controls */
  --acp-control-height-sm: 40px;
  --acp-control-height: 48px;
  --acp-control-height-lg: 56px;
  --acp-focus-ring: 0 0 0 3px rgba(31, 111, 91, .28);
}

.acp-storefront-astral {
  --acp-color-sage-700: #355f52;
  --acp-color-sage-800: #1e453b;
  --acp-color-heading: #173c31;
}

@media (max-width: 1024px) {
  :root {
    --acp-display-xl: clamp(2.75rem, 6vw, 3.5rem);
    --acp-display-lg: clamp(2.5rem, 5vw, 3.125rem);
    --acp-product-title: clamp(2.375rem, 5vw, 3rem);
    --acp-heading-xl: clamp(2rem, 4vw, 2.5rem);
    --acp-section-space: clamp(56px, 8vw, 88px);
  }
}

@media (max-width: 767px) {
  :root {
    --acp-display-xl: clamp(2.5rem, 11vw, 3.125rem);
    --acp-display-lg: clamp(2.25rem, 9.5vw, 2.75rem);
    --acp-product-title: clamp(2.125rem, 9vw, 2.625rem);
    --acp-heading-xl: clamp(1.875rem, 8vw, 2.25rem);
    --acp-heading-lg: clamp(1.625rem, 7vw, 2rem);
    --acp-heading-md: clamp(1.375rem, 6vw, 1.75rem);
    --acp-gutter: 18px;
    --acp-section-space: 56px;
  }
}

@media (max-width: 359px) {
  :root {
    --acp-display-xl: 2.25rem;
    --acp-display-lg: 2.125rem;
    --acp-product-title: 2rem;
    --acp-gutter: 16px;
  }
}