/*
 Merci design tokens (colors, type, spacing, motion) as CSS custom properties.
*/

:root {
  /* Fonts */
  --merci-font-serif: "DM Serif Display", Georgia, serif;
  --merci-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* Colors (proposed web) */
  --merci-offwhite: #FFF9F4;
  --merci-cream: #FFEBD9;
  --merci-white: #FFFFFF;
  --merci-coral: #FFBAB2;
  --merci-blush: #FFE3DF;
  --merci-coral-deep: #A14F45;
  --merci-brown: #4A3328;
  --merci-brown-900: #3D2A21;
  --merci-brown-600: #6E5246;
  --merci-brown-500: #86675A;
  --merci-kraft: #C8A27A;
  --merci-line: #F1DDD3;
  --merci-field: #E6CFC4;
  --merci-success: #4F6F4A;
  --merci-error: #A8443A;
  --merci-warning: #8A6420;
  /* Colors (source - from logo PDF / catalog) */
  --merci-source-merci-coral: #FFBAB2;
  --merci-source-merci-cream: #FFEBD9;
  --merci-source-catalog-blush: #FFC1C6;
  /* Spacing */
  --merci-space-4: 4px;
  --merci-space-8: 8px;
  --merci-space-12: 12px;
  --merci-space-16: 16px;
  --merci-space-24: 24px;
  --merci-space-32: 32px;
  --merci-space-48: 48px;
  --merci-space-64: 64px;
  --merci-space-96: 96px;
  --merci-space-120: 120px;
  /* Radius */
  --merci-radius-photo-tile: 12px;
  --merci-radius-tile: 18px;
  --merci-radius-input: 12px;
  --merci-radius-pill: 999px;
  /* Hairline + shadow overlay */
  --merci-hairline: 1px solid #F1DDD3;
  --merci-shadow-overlay: 0 12px 32px rgba(74, 51, 40, .08);
  /* Layout sizes */
  --merci-container: 1280px;
  --merci-content: 1200px;
  --merci-text-column: 720px;
  --merci-faq-column: 800px;
  --merci-section-pad: 112px;
  /* Motion */
  --merci-ease-out: cubic-bezier(.22,.68,0,1);
  --merci-ease-in-out: cubic-bezier(.65,0,.35,1);
  --merci-dur-micro: 160ms;
  --merci-dur-small: 240ms;
  --merci-dur-medium: 420ms;
  --merci-dur-large: 700ms;
  --merci-dur-signature: 1200ms;
  --merci-reveal-distance: 24px;
  --merci-stagger: 60ms;
  --merci-hover-lift: -4px;
  /* Typography - fluid type scale (375 to 1280 px viewport) */
  --merci-fs-display: clamp(40px, calc(40px + (64 - 40) * ((100vw - 375px) / 905)), 64px);
  --merci-fs-h1: clamp(36px, calc(36px + (52 - 36) * ((100vw - 375px) / 905)), 52px);
  --merci-fs-h2: clamp(30px, calc(30px + (40 - 30) * ((100vw - 375px) / 905)), 40px);
  --merci-fs-h3: clamp(22px, calc(22px + (26 - 22) * ((100vw - 375px) / 905)), 26px);
  --merci-fs-h4: clamp(18px, calc(18px + (20 - 18) * ((100vw - 375px) / 905)), 20px);
  --merci-fs-body-l: clamp(17px, calc(17px + (18 - 17) * ((100vw - 375px) / 905)), 18px);
  --merci-fs-body: clamp(16px, calc(16px + (16 - 16) * ((100vw - 375px) / 905)), 16px);
  --merci-fs-small: clamp(14px, calc(14px + (14 - 14) * ((100vw - 375px) / 905)), 14px);
  --merci-fs-caption: clamp(12.5px, calc(12.5px + (12.5 - 12.5) * ((100vw - 375px) / 905)), 12.5px);
  --merci-fs-price-card: clamp(15px, calc(15px + (16 - 15) * ((100vw - 375px) / 905)), 16px);
  --merci-fs-price-pdp: clamp(22px, calc(22px + (24 - 22) * ((100vw - 375px) / 905)), 24px);
  /* Typography - line heights */
  --merci-lh-display: 1.05;
  --merci-lh-headings: 1.15;
  --merci-lh-body: 1.65;
}

@media (max-width: 1024px) {
  :root {
    --merci-section-pad: 80px;
  }
}

@media (max-width: 767px) {
  :root {
    --merci-section-pad: 56px;
  }
}

html[lang="ar"] {
  --merci-font-serif: "Noto Naskh Arabic", "IBM Plex Sans Arabic", serif;
  --merci-font-sans: "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif;
  --merci-lh-body: 1.85;
  --merci-lh-headings: 1.35;
}