/**
 * Custom Properties for Beauty Platform
 * 
 * Maps WordPress presets to semantic variables and provides direct access.
 */

:root {
  /* Base Colors */
  --color-base: #FFFFFF;
  --color-contrast: #2D2D2D;

  /* Accent Colors */
  --color-accent-1: #D8598C; /* Blush Pink - Primary CTA */
  --color-accent-2: #9D6099; /* Antique Fuchsia - Secondary */
  --color-accent-3: #F7E1EE; /* Piggy Pink - Soft Backgrounds */
  --color-accent-4: #5C4B75; /* Deep Purple - Headings */
  --color-accent-5: #F1C2D2; /* Soft Orchid - Highlights */
  --color-accent-6: #E8E8E8; /* Pearl Gray - Borders */

  /* Semantic Mappings */
  --color-primary: var(--color-accent-1);
  --color-secondary: var(--color-accent-2);
  --color-text-main: var(--color-contrast);
  --color-bg-main: var(--color-base);
  --color-border: var(--color-accent-6);
  --color-heading: var(--color-accent-4);

  /* Gradients */
  --gradient-beauty-blush: linear-gradient(135deg, #F7E1EE 0%, #D8598C 100%);
  --gradient-purple-elegance: linear-gradient(135deg, #D8598C 0%, #9D6099 50%, #5C4B75 100%);
  --gradient-soft-rose: linear-gradient(135deg, #FFFFFF 0%, #F1C2D2 50%, #F7E1EE 100%);
  --gradient-radiant-glow: linear-gradient(135deg, #F1C2D2 0%, #D8598C 100%);
  --gradient-deep-beauty: linear-gradient(135deg, #9D6099 0%, #5C4B75 100%);
}

/* Fallback for older browsers (simplified) */
@supports not (color: color-mix(in srgb, red, blue)) {
  :root {
    --color-accent-6: #E8E8E8;
  }
}