/* 08 · Lune Lilac & Chrome: colour-only re-skin of 06.
   Layout and components come from ../06-lune-lookbook/styles.css (loaded first);
   this file only re-values the colour tokens. Contrast ratios in notes.md. */

:root {
  color-scheme: light;
  --bg-primary: #F8F7FB;      /* cool lilac-white paper */
  --bg-secondary: #ECE8F4;    /* lavender wash */
  --bg-elevated: #FDFCFF;
  --text-primary: #2A1B33;    /* aubergine ink, 15.11:1 */
  --text-secondary: #5E5468;  /* 6.69:1 */
  --border-color: #DCD7E5;    /* silver hairline, decorative */
  --primary-color: #5B3A72;   /* aubergine-violet, 8.59:1 */
  --primary-contrast: #FFFFFF;
  --secondary-color: #D3CBE6; /* lilac ornament, never text */
  --accent-color: #7A4F96;    /* lilac-plum prices, 5.81:1 */
  --glow-color: #CFC4E8;
  --focus-ring: #5B3A72;
  --shadow-sm: 0 1px 2px rgb(42 27 51 / 0.05);
  --shadow-md: 0 12px 28px -14px rgb(42 27 51 / 0.18);
  --shadow-lg: 0 28px 56px -24px rgb(42 27 51 / 0.22);
  --shadow-glow: 0 0 0 1px rgb(207 196 232 / 0.6), 0 10px 24px -10px rgb(91 58 114 / 0.35);
  --art-placeholder-from: #F1EEF6;
  --art-placeholder-to: #D9D3E6;
  --art-silhouette: rgb(42 27 51 / 0.10);
  --chip-outline: #807790;    /* chrome grey, 3.97:1 (3.51:1 on wash) */
  --chip-selected-bg: #E6E0F1;
  --chip-selected-fg: var(--primary-color);
  --btn-hover: #452A58;
  --band-bg: #2A1B33;
  --band-text: #F2EFF7;
  --band-muted: #C9C2D6;      /* silver-lilac */
  --band-btn: #CDBFEA;
  --band-btn-text: #2A1B33;
  --band-btn-hover: #DDD3F2;
  --band-rule: #4A3A55;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg-primary: #16121A;      /* aubergine-black */
  --bg-secondary: #1F1925;
  --bg-elevated: #282030;
  --text-primary: #F1EEF6;
  --text-secondary: #BDB5C9;  /* silver */
  --border-color: #362C3F;
  --primary-color: #CDBFEA;   /* lilac */
  --primary-contrast: #221830;
  --secondary-color: #4E4260;
  --accent-color: #B9A3E3;
  --glow-color: #CDBFEA;
  --focus-ring: #DDD3F2;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 12px 28px -14px rgb(0 0 0 / 0.6);
  --shadow-lg: 0 28px 56px -24px rgb(0 0 0 / 0.7);
  --shadow-glow: 0 0 0 1px rgb(205 191 234 / 0.35), 0 10px 24px -10px rgb(205 191 234 / 0.25);
  --art-placeholder-from: #1F1925;
  --art-placeholder-to: #352B40;
  --art-silhouette: rgb(205 191 234 / 0.12);
  --chip-outline: #776C85;
  --chip-selected-bg: #CDBFEA;
  --chip-selected-fg: #221830;
  --btn-hover: #DDD3F2;
  --band-bg: #282030;
  --band-text: #F1EEF6;
  --band-muted: #BDB5C9;
  --band-btn: #CDBFEA;
  --band-btn-text: #221830;
  --band-btn-hover: #DDD3F2;
  --band-rule: #43384E;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg-primary: #16121A;      /* aubergine-black */
    --bg-secondary: #1F1925;
    --bg-elevated: #282030;
    --text-primary: #F1EEF6;
    --text-secondary: #BDB5C9;  /* silver */
    --border-color: #362C3F;
    --primary-color: #CDBFEA;   /* lilac */
    --primary-contrast: #221830;
    --secondary-color: #4E4260;
    --accent-color: #B9A3E3;
    --glow-color: #CDBFEA;
    --focus-ring: #DDD3F2;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-md: 0 12px 28px -14px rgb(0 0 0 / 0.6);
    --shadow-lg: 0 28px 56px -24px rgb(0 0 0 / 0.7);
    --shadow-glow: 0 0 0 1px rgb(205 191 234 / 0.35), 0 10px 24px -10px rgb(205 191 234 / 0.25);
    --art-placeholder-from: #1F1925;
    --art-placeholder-to: #352B40;
    --art-silhouette: rgb(205 191 234 / 0.12);
    --chip-outline: #776C85;
    --chip-selected-bg: #CDBFEA;
    --chip-selected-fg: #221830;
    --btn-hover: #DDD3F2;
    --band-bg: #282030;
    --band-text: #F1EEF6;
    --band-muted: #BDB5C9;
    --band-btn: #CDBFEA;
    --band-btn-text: #221830;
    --band-btn-hover: #DDD3F2;
    --band-rule: #43384E;
  }
}