/*
 * The Living Songbook design tokens.
 *
 * Components consume the semantic aliases. The legacy aliases remain available
 * while the existing application stylesheet is migrated incrementally.
 */
:root {
  color-scheme: light;

  /* Brand palette */
  --ui-color-wine-900: #3f1111;
  --ui-color-wine-800: #5b1d1d;
  --ui-color-wine-700: #7a2a24;
  --ui-color-copper-800: #7f492e;
  --ui-color-copper-600: #b8734a;
  --ui-color-gold-500: #c8a86a;
  --ui-color-sage-600: #6d7b61;
  --ui-color-parchment-100: #f6f1e6;
  --ui-color-ivory-50: #fffaf0;
  --ui-color-sand-200: #e8deca;
  --ui-color-taupe-300: #d6cdc0;
  --ui-color-ink-900: #1a1a1a;
  --ui-color-ink-600: #665c50;

  /* Semantic color roles */
  --ui-surface-page: var(--ui-color-parchment-100);
  --ui-surface-raised: var(--ui-color-ivory-50);
  --ui-surface-recessed: var(--ui-color-sand-200);
  --ui-text-primary: var(--ui-color-ink-900);
  --ui-text-muted: var(--ui-color-ink-600);
  --ui-text-brand: var(--ui-color-wine-800);
  --ui-action-primary: var(--ui-color-wine-800);
  --ui-action-primary-hover: var(--ui-color-wine-700);
  --ui-action-primary-pressed: var(--ui-color-wine-900);
  --ui-action-on-primary: var(--ui-color-ivory-50);
  --ui-border-subtle: color-mix(in srgb, var(--ui-color-wine-800) 18%, transparent);
  --ui-focus-ring: color-mix(in srgb, var(--ui-color-wine-800) 72%, transparent);

  /* Typography */
  --ui-font-heading: "Libre Baskerville", Georgia, serif;
  --ui-font-body: "Lora", Georgia, serif;
  --ui-font-script: "Caveat", "Bradley Hand", cursive;
  --ui-font-size-xs: 0.75rem;
  --ui-font-size-sm: 0.875rem;
  --ui-font-size-md: 1rem;
  --ui-font-size-lg: 1.25rem;
  --ui-font-size-xl: clamp(1.75rem, 4vw, 3rem);
  --ui-leading-tight: 1.15;
  --ui-leading-body: 1.65;

  /* Spacing */
  --ui-space-1: 0.25rem;
  --ui-space-2: 0.5rem;
  --ui-space-3: 0.75rem;
  --ui-space-4: 1rem;
  --ui-space-5: 1.5rem;
  --ui-space-6: 2rem;
  --ui-space-7: 3rem;
  --ui-space-8: 4rem;
  --ui-space-9: 6rem;
  --ui-space-page: clamp(1rem, 4vw, 4.5rem);
  --ui-content-max: 75rem;

  /* Shape and elevation */
  --ui-radius-sm: 0.875rem;
  --ui-radius-md: 1.125rem;
  --ui-radius-lg: 1.75rem;
  --ui-radius-xl: 2.25rem;
  --ui-radius-pill: 999px;
  --ui-shadow-soft: 0 1.625rem 5rem rgba(63, 17, 17, 0.14);
  --ui-shadow-overlay: 0 2rem 6.875rem rgba(34, 12, 12, 0.22);

  /* Motion */
  --ui-duration-fast: 160ms;
  --ui-duration-medium: 240ms;
  --ui-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Control sizing */
  --ui-control-small: 2.35rem;
  --ui-control-medium: 3rem;
  --ui-control-large: 3.75rem;

  /* Legacy compatibility aliases */
  --color-parchment: var(--ui-color-parchment-100);
  --color-warm-sand: var(--ui-color-sand-200);
  --color-soft-taupe: var(--ui-color-taupe-300);
  --color-deep-wine: var(--ui-color-wine-800);
  --color-deep-wine-hover: var(--ui-color-wine-700);
  --color-deep-wine-pressed: var(--ui-color-wine-900);
  --color-antique-gold: var(--ui-color-gold-500);
  --color-sage: var(--ui-color-sage-600);
  --color-charcoal: var(--ui-color-ink-900);
  --color-copper: var(--ui-color-copper-600);
  --color-ivory: var(--ui-color-ivory-50);
  --color-muted-ink: var(--ui-color-ink-600);
  --color-line: var(--ui-border-subtle);
  --shadow-soft: var(--ui-shadow-soft);
  --shadow-cinema: var(--ui-shadow-overlay);
  --radius-button: var(--ui-radius-md);
  --radius-button-small: var(--ui-radius-sm);
  --radius-card: var(--ui-radius-lg);
  --radius-media: var(--ui-radius-xl);
  --radius-panel: 2rem;
  --space-page: var(--ui-space-page);
  --max-page: var(--ui-content-max);
  --font-headline: var(--ui-font-heading);
  --font-script: var(--ui-font-script);
  --font-body: var(--ui-font-body);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ui-duration-fast: 0.01ms;
    --ui-duration-medium: 0.01ms;
  }
}