/* AromaMatch Design Tokens
   Source: aromamatch_logo.jpg (extracted) + Beauty/Spa industry rules
   Generated for landing v2 — master source of truth
*/

:root {
  /* ── Brand rose-gold (from logo) ─────────────────────────── */
  --am-rose-950: #3d221c;
  --am-rose-900: #4f2f27;
  --am-rose-800: #5c352c;   /* body text on light — contrast ~9:1 */
  --am-rose-700: #7a4a40;   /* deep CTA bg, white text ~5.5:1 */
  --am-rose-600: #8b5348;   /* primary brand (logo darkened) */
  --am-rose-500: #a96b5e;   /* PRIMARY — exact logo mark */
  --am-rose-400: #c48b7b;
  --am-rose-300: #d4a395;   /* mid dusty rose (logo) */
  --am-rose-200: #e0b0a2;
  --am-rose-100: #e8b8aa;   /* blush */
  --am-rose-50:  #fbcfc6;   /* pale blush / highlights */
  --am-rose-25:  #fdf0ec;   /* wash / soft section bg */

  /* ── Neutrals ────────────────────────────────────────────── */
  --am-cream:    #fdfcfa;   /* page bg (logo background) */
  --am-ivory:    #f7f1eb;   /* alt section bg */
  --am-sand:     #f0e6dc;
  --am-line:     rgba(169, 107, 94, 0.14);
  --am-line-soft:rgba(169, 107, 94, 0.08);

  --am-charcoal: #2d2422;   /* body text */
  --am-muted:    #6b5e5a;   /* secondary text — ~5.2:1 on cream */
  --am-faint:    #9a8b86;   /* tertiary / captions */

  /* ── Functional ──────────────────────────────────────────── */
  --am-white:    #ffffff;
  --am-success:  #5f8a6a;
  --am-warning:  #c4923a;
  --am-error:    #b54a4a;

  /* ── Gradients ───────────────────────────────────────────── */
  --am-gradient: linear-gradient(135deg, #e0b0a2 0%, #a96b5e 48%, #7a4a40 100%);
  --am-gradient-soft: linear-gradient(180deg, #fdf0ec 0%, #f7f1eb 100%);
  --am-gradient-text: linear-gradient(120deg, #a96b5e 0%, #c48b7b 50%, #8b5348 100%);

  /* ── Shadows (soft, beauty-premium) ──────────────────────── */
  --am-shadow-xs: 0 1px 2px rgba(45, 36, 34, 0.04);
  --am-shadow-sm: 0 2px 12px rgba(45, 36, 34, 0.06);
  --am-shadow-md: 0 6px 28px rgba(45, 36, 34, 0.08);
  --am-shadow-lg: 0 16px 48px rgba(45, 36, 34, 0.10);
  --am-shadow-rose: 0 8px 28px rgba(169, 107, 94, 0.22);

  /* ── Radius ──────────────────────────────────────────────── */
  --am-radius-sm: 12px;
  --am-radius:    18px;
  --am-radius-lg: 24px;
  --am-radius-pill: 999px;

  /* ── Typography ──────────────────────────────────────────── */
  --am-font-display: "Cormorant Garamond", "Times New Roman", serif;
  --am-font-body:    "Manrope", system-ui, -apple-system, sans-serif;

  --am-text-xs:  0.8125rem;  /* 13px */
  --am-text-sm:  0.875rem;   /* 14px */
  --am-text-base:1rem;       /* 16px — body floor */
  --am-text-md:  1.125rem;   /* 18px */
  --am-text-lg:  1.375rem;   /* 22px */
  --am-text-xl:  1.75rem;    /* 28px */
  --am-text-2xl: 2.25rem;    /* 36px */
  --am-text-3xl: clamp(2.25rem, 4.5vw, 3.25rem);
  --am-text-4xl: clamp(2.75rem, 6vw, 4.25rem);

  --am-leading-tight: 1.12;
  --am-leading-snug:  1.35;
  --am-leading:       1.65;

  /* ── Spacing ─────────────────────────────────────────────── */
  --am-space-1: 0.25rem;
  --am-space-2: 0.5rem;
  --am-space-3: 0.75rem;
  --am-space-4: 1rem;
  --am-space-5: 1.5rem;
  --am-space-6: 2rem;
  --am-space-7: 3rem;
  --am-space-8: 4rem;
  --am-space-9: 6rem;

  --am-container: 1120px;
  --am-section-y: clamp(4rem, 8vw, 6.5rem);

  /* ── Motion ──────────────────────────────────────────────── */
  --am-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --am-dur-fast: 150ms;
  --am-dur: 220ms;
  --am-dur-slow: 400ms;

  /* ── Focus ───────────────────────────────────────────────── */
  --am-focus: 0 0 0 3px rgba(169, 107, 94, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --am-dur-fast: 0ms;
    --am-dur: 0ms;
    --am-dur-slow: 0ms;
  }
}