/* Shared design system. Lilac is the default; alternative themes are opt-in.
   Registered color tokens let gradients and shadows interpolate with the theme. */
@property --color-primary { syntax: '<color>'; inherits: true; initial-value: #A66BE8; }
@property --color-purple { syntax: '<color>'; inherits: true; initial-value: #7440C8; }
@property --color-lilac { syntax: '<color>'; inherits: true; initial-value: #D8B8FF; }
@property --color-pink { syntax: '<color>'; inherits: true; initial-value: #F6D9EF; }
@property --color-canvas { syntax: '<color>'; inherits: true; initial-value: #FAF7FF; }
@property --color-hero-middle { syntax: '<color>'; inherits: true; initial-value: #EBD9FF; }
:root {
  color-scheme: light;
  --color-primary: #A66BE8;
  --color-purple: #7440C8;
  --color-lilac: #D8B8FF;
  --color-pink: #F6D9EF;
  --color-canvas: #FAF7FF;
  --color-hero-middle: #EBD9FF;
  --color-ink: #352046;
  --color-white: #FFFFFF;
  --color-muted: color-mix(in srgb, var(--color-ink) 82%, var(--color-canvas));
  --color-line: color-mix(in srgb, var(--color-primary) 26%, var(--color-white));
  --surface-lilac: color-mix(in srgb, var(--color-lilac) 43%, var(--color-white));
  --surface-pink: color-mix(in srgb, var(--color-pink) 68%, var(--color-white));
  --surface-purple: color-mix(in srgb, var(--color-primary) 20%, var(--color-white));
  --surface-glass: color-mix(in srgb, var(--color-white) 76%, transparent);
  --surface-glass-strong: color-mix(in srgb, var(--color-white) 92%, transparent);
  --gradient-hero: linear-gradient(135deg, var(--color-canvas) 0%, var(--color-hero-middle) 45%, var(--color-pink) 100%);
  --gradient-button: linear-gradient(135deg, var(--color-primary) 0%, var(--color-purple) 100%);
  --gradient-card: linear-gradient(140deg, var(--color-white), var(--surface-lilac));
  --gradient-pink: linear-gradient(125deg, var(--color-white), var(--color-pink));
  --gradient-sphere: radial-gradient(circle at 28% 24%, var(--color-white) 0%, var(--color-lilac) 26%, var(--color-primary) 64%, var(--color-purple) 100%);
  --gradient-sphere-pink: radial-gradient(circle at 28% 24%, var(--color-white) 0%, var(--color-pink) 33%, var(--color-lilac) 70%, var(--color-primary) 100%);
  --shadow-card: 0 16px 45px color-mix(in srgb, var(--color-purple) 12%, transparent), 0 3px 9px color-mix(in srgb, var(--color-purple) 5%, transparent);
  --shadow-lift: 0 24px 54px color-mix(in srgb, var(--color-purple) 20%, transparent);
  --shadow-button: 0 10px 24px color-mix(in srgb, var(--color-purple) 25%, transparent), inset 0 1px 0 color-mix(in srgb, var(--color-white) 45%, transparent);
  --shadow-photo: 0 28px 75px color-mix(in srgb, var(--color-purple) 22%, transparent);
  --radius-card: 24px;
  --font: 'Golos Text', Arial, sans-serif;
}
:root[data-theme='pink'] {
  --color-primary: #C969A6;
  --color-purple: #8D3370;
  --color-lilac: #F3BDE0;
  --color-pink: #E6D0FF;
  --color-canvas: #FFF7FC;
  --color-hero-middle: #F4D4F2;
}
:root[data-theme='mint'] {
  --color-primary: #35907D;
  --color-purple: #256B5E;
  --color-lilac: #B8F1E1;
  --color-pink: #E8D7FA;
  --color-canvas: #F5FFFC;
  --color-hero-middle: #D7F8ED;
}
:root.theme-ready {
  transition: --color-primary .6s ease, --color-purple .6s ease,
    --color-lilac .6s ease, --color-pink .6s ease,
    --color-canvas .6s ease, --color-hero-middle .6s ease;
}
:root.reduce-motion { transition: none; }
@media (prefers-reduced-motion: reduce) { :root.theme-ready { transition: none; } }