/* Team Morado Photography — Design Tokens
 * Source of truth for all brand values.
 * Import via: <link rel="stylesheet" href="tokens.css">
 * index.html re-declares these in its own <style> for standalone use.
 */

:root {
  /* OKLCH perceptual color system */
  --color-bg-deep:        oklch(8% 0.08 290);
  --color-bg-mid:         oklch(12% 0.10 292);
  --color-purple-real:    oklch(22% 0.15 295);
  --color-purple-vivid:   oklch(35% 0.20 295);
  --color-gold:           oklch(72% 0.13 75);
  --color-gold-light:     oklch(82% 0.12 78);
  --color-ivory:          oklch(98% 0.01 85);
  --color-white:          oklch(100% 0 0);
  --color-ink:            oklch(6% 0.06 290);

  /* Alpha surfaces */
  --color-gold-border-xs: oklch(72% 0.13 75 / 0.08);
  --color-gold-border-sm: oklch(72% 0.13 75 / 0.12);
  --color-gold-border-md: oklch(72% 0.13 75 / 0.25);
  --color-gold-border-lg: oklch(72% 0.13 75 / 0.35);
  --color-gold-glow-sm:   oklch(72% 0.13 75 / 0.30);
  --color-gold-glow-lg:   oklch(72% 0.13 75 / 0.45);
  --color-surface-a:      oklch(12% 0.10 292 / 0.40);
  --color-surface-b:      oklch(12% 0.10 292 / 0.60);
  --color-surface-c:      oklch(8% 0.08 290 / 0.50);
  --color-surface-d:      oklch(8% 0.08 290 / 0.30);
  --color-text-muted:     oklch(98% 0.01 85 / 0.70);
  --color-text-subtle:    oklch(98% 0.01 85 / 0.65);
  --color-text-dim:       oklch(98% 0.01 85 / 0.55);
  --color-text-faint:     oklch(98% 0.01 85 / 0.40);
  --color-text-ghost:     oklch(98% 0.01 85 / 0.30);

  /* Legacy aliases */
  --morado-noche:    var(--color-bg-deep);
  --morado-profundo: var(--color-bg-mid);
  --morado-real:     var(--color-purple-real);
  --morado-luxury:   var(--color-purple-vivid);
  --dorado-premium:  var(--color-gold);
  --dorado-suave:    var(--color-gold-light);
  --blanco-marfil:   var(--color-ivory);
  --blanco-puro:     var(--color-white);
  --negro-suave:     var(--color-ink);

  /* Typography */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body:    'Montserrat', system-ui, sans-serif;

  /* Semantic spacing — 4pt base */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;

  /* Named easing curves */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
}