/* Primitive values */
:root {
  --plum-950: #15111d;
  --plum-900: #1e1829;
  --plum-800: #292135;
  --plum-700: #3b304a;
  --lavender-300: #c2acd9;
  --lavender-400: #ab90c9;
  --champagne-200: #eedbb5;
  --champagne-300: #dbc08c;
  --champagne-400: #c9aa72;
  --ivory-100: #f5efe5;
  --stone-300: #b9afc5;
  --rose-300: #f0afba;
  --sage-300: #b9d1bb;
  --plum-500: #81718f;
  --art-plum: #30263b;
  --art-lavender-background: #262233;
  --art-lavender-line: #b4a6c5;
  --art-warm-background: #26212b;
  --art-warm-line: #ccb995;
  --shadow-hero-card: 0 22px 20px #08050e88;
  --shadow-daily-card: 0 18px 30px #09060e77;
  --scrim-modal: #09060dcc;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --font-xs: .75rem;
  --font-sm: .875rem;
  --font-base: 1rem;
  --font-lg: 1.125rem;
  --font-xl: 1.5rem;
  --font-2xl: 2rem;
  --radius-sm: .5rem;
  --radius-md: .75rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;
  --duration-fast: 160ms;
  --duration-normal: 260ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

/* Semantic roles */
:root {
  --color-background: var(--plum-950);
  --color-surface: var(--plum-900);
  --color-surface-hover: var(--plum-800);
  --color-border: var(--plum-700);
  --color-control-border: var(--plum-500);
  --color-text: var(--ivory-100);
  --color-muted: var(--stone-300);
  --color-primary: var(--champagne-300);
  --color-primary-hover: var(--champagne-200);
  --color-on-primary: var(--plum-950);
  --color-accent: var(--lavender-300);
  --color-danger: var(--rose-300);
  --color-success: var(--sage-300);
  --color-focus: var(--champagne-200);
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Be Vietnam Pro', system-ui, sans-serif;
  --layout-width: 1200px;
  --space-section: var(--space-24);
  --shadow-float: 0 24px 60px #09060e66;
  --art-gold: var(--champagne-300);
  --art-background: var(--plum-900);
  --art-soft: var(--plum-700);
}

/* Component roles */
:root {
  --button-bg: var(--color-primary);
  --button-fg: var(--color-on-primary);
  --button-bg-hover: var(--color-primary-hover);
  --button-radius: var(--radius-pill);
  --button-height: 48px;
  --input-bg: var(--color-background);
  --input-border: var(--color-control-border);
  --input-radius: var(--radius-md);
  --card-bg: var(--color-surface);
  --card-border: var(--color-border);
  --card-radius: var(--radius-lg);
  --card-padding: var(--space-8);
}