/**
 * Design Tokens — New Super Photography
 * Source of truth: DESIGN_SYSTEM.md
 */

:root {
  /* Brand colors */
  --color-black: #0D0D0D;
  --color-gold: #D4AF37;
  --color-gold-deep: #A87918;
  --color-charcoal: #2B2B2B;
  --color-silver: #B8B9BC;
  --color-ivory: #FAF8F3;
  --color-white: #FFFFFF;
  --color-text: #171717;
  --color-muted: #666666;
  --color-muted-on-dark: #C8C5BE;
  --color-border: #E5E1D8;
  --color-border-dark: #3A3936;
  --color-focus: #F2C45A;
  --color-error: #C62828;
  --color-success: #2E7D32;

  /* Typography */
  --font-heading: "Playfair Display", Georgia, serif;
  --font-body: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* Type scale */
  --text-xs: 0.75rem;          /* 12px */
  --text-sm: 0.875rem;         /* 14px */
  --text-base: 1rem;           /* 16px */
  --text-lg: 1.125rem;         /* 18px */
  --text-xl: 1.25rem;          /* 20px mobile baseline */
  --text-2xl: 1.625rem;        /* 26px mobile baseline */
  --text-3xl: 2rem;            /* 32px mobile baseline */
  --text-4xl: 2.375rem;        /* 38px mobile baseline */
  --text-hero: clamp(2.25rem, 8vw, 4.5rem);

  /* Spacing Scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;

  /* Layout dimensions */
  --container-max-width: 1280px;
  --container-narrow-width: 680px;
  --container-gutter: var(--space-4); /* 16px - 20px on mobile */
  --section-padding-y: var(--space-12); /* 48px mobile */

  /* Component tokens */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --min-tap-target: 44px;

  /* Motion & transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;

  /* Subtle elevations */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.16);
  --shadow-dark: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* Tablet adjustments */
@media (min-width: 768px) {
  :root {
    --text-xl: 1.375rem;        /* 22px */
    --text-2xl: 1.875rem;       /* 30px */
    --text-3xl: 2.25rem;        /* 36px */
    --text-4xl: 2.75rem;        /* 44px */
    --container-gutter: var(--space-8); /* 32px */
    --section-padding-y: var(--space-16); /* 64px */
  }
}

/* Desktop refinements */
@media (min-width: 1024px) {
  :root {
    --text-3xl: 2.5rem;         /* 40px */
    --text-4xl: 3.25rem;        /* 52px */
    --text-hero: clamp(2.5rem, 5vw, 5rem);
    --container-gutter: var(--space-12); /* 48px */
    --section-padding-y: var(--space-24); /* 96px */
  }
}