:root {
  /* ---- Brand accent ---------------------------------------------------- */
  --violet-500: #8b3df5;
  --violet-600: #7d34f0;
  --violet-550: #7b5cf6;
  --magenta-500: #c04bf5;
  --pink-400: #f472b6;

  --accent-solid: var(--violet-500);
  --accent-gradient: linear-gradient(100deg, #7d34f0, #c04bf5);
  --accent-gradient-light: linear-gradient(100deg, #7b5cf6, #f472b6);
  --accent-glow: rgba(123, 92, 246, .85);

  /* ---- Board (the surface the phones sit on) --------------------------- */
  --board-dark: linear-gradient(155deg, #b49bf2 0%, #a37fe9 48%, #bf7ced 100%);
  --board-light: linear-gradient(150deg, #ffe6f0 0%, #f0e6ff 42%, #dff0fb 100%);

  /* ---- Dark theme (default app skin) ---------------------------------- */
  --dark-canvas: #0a0710;
  --dark-bezel: #16101e;
  --dark-tile: #150c22;
  --dark-panel: rgba(13, 7, 21, .72);
  --dark-bar: rgba(18, 11, 28, .94);
  --dark-hairline: rgba(255, 255, 255, .06);
  --dark-stroke: rgba(255, 255, 255, .12);
  --dark-glass: rgba(255, 255, 255, .07);
  --dark-ink: #ffffff;
  --dark-ink-sub: rgba(255, 255, 255, .58);
  --dark-ink-mute: rgba(255, 255, 255, .42);
  --dark-bloom: radial-gradient(120% 55% at 50% 0%, rgba(150, 66, 235, .26), transparent 68%);

  /* ---- Light theme ---------------------------------------------------- */
  --light-canvas: #fdfaff;
  --light-bezel: #f3ecfd;
  --light-tile: #efe7fb;
  --light-panel: rgba(255, 255, 255, .9);
  --light-bar: #ffffff;
  --light-hairline: rgba(42, 24, 66, .07);
  --light-stroke: rgba(42, 24, 66, .12);
  --light-glass: rgba(42, 24, 66, .05);
  --light-ink: #241436;
  --light-ink-alt: #2a1842;
  --light-ink-sub: rgba(42, 24, 66, .58);
  --light-ink-mute: rgba(42, 24, 66, .42);

  /* ---- Semantic aliases (dark is the default skin) -------------------- */
  --surface-canvas: var(--dark-canvas);
  --surface-tile: var(--dark-tile);
  --surface-panel: var(--dark-panel);
  --surface-bar: var(--dark-bar);
  --text-primary: var(--dark-ink);
  --text-secondary: var(--dark-ink-sub);
  --text-muted: var(--dark-ink-mute);
  --border-hairline: var(--dark-hairline);
  --border-stroke: var(--dark-stroke);

  /* ---- Sticker patch palette (embroidered badges) --------------------- */
  --patch-trends: #f3e2c4 #e8a45c #b6552c;
  --patch-korean: #fdeef2 #f2a0b8 #c23f68;
  --patch-spring: #eef7ea #9ed48f #37844f;
  --patch-summer: #e9f6f8 #7fd0dd #1f6f96;
  --patch-glow:   #fdf3e2 #f5c887 #c47a26;
  --patch-retro:  #f8eddc #e0b183 #8d5127;
  --patch-flutter:#f3ecfd #c3a6f2 #6a34c9;
  --patch-vhs:    #eeeef3 #b6b6c8 #464661;
}

[data-theme="light"] {
  --surface-canvas: var(--light-canvas);
  --surface-tile: var(--light-tile);
  --surface-panel: var(--light-panel);
  --surface-bar: var(--light-bar);
  --text-primary: var(--light-ink);
  --text-secondary: var(--light-ink-sub);
  --text-muted: var(--light-ink-mute);
  --border-hairline: var(--light-hairline);
  --border-stroke: var(--light-stroke);
  --accent-solid: var(--violet-550);
  --accent-gradient: var(--accent-gradient-light);
}