/* ── LuvMe Design System Variables ─────────────────────────────────── */
:root {
  color-scheme: dark;

  /* Base palette */
  --bg: #080608;
  --bg2: #0d0b0e;
  --bg3: #121015;
  --panel: #0f0d11;
  --rose: #c2697a;
  --rose-l: #e8899a;
  --rose-d: #8a3f50;
  --rose-dim: #8a4a57;
  --rose-bg: rgba(194, 105, 122, 0.08);
  --cream: #f0e8e0;
  --text: #f0e4e8;
  --dim: #b0949c;
  --muted: #8a7d82;
  --muted2: #4a4048;
  --border: rgba(194, 105, 122, 0.1);
  --border2: rgba(240, 232, 224, 0.06);
  --ff-display: 'Cormorant Garamond', serif;
  --ff-body: 'DM Sans', sans-serif;

  /* Action colors */
  --green: #4ade80;
  --red: #ef4444;
  --accent: #e94560;
  --yellow: #facc15;

  /* Hover states */
  --accent-hover: #d63a55;
  --red-hover: #dc2626;
  --rose-hover: #d4788a;

  /* Green composites */
  --green-bg: rgba(74, 222, 128, 0.08);
  --green-border: rgba(74, 222, 128, 0.2);
  --green-solid: #22c55e;
  --green-solid-hover: #1ea550;

  /* Red composites */
  --red-bg: rgba(239, 68, 68, 0.1);
  --red-border: rgba(239, 68, 68, 0.2);
  --red-light: #f87171;

  /* Accent composites */
  --accent-bg: rgba(233, 69, 96, 0.15);
  --accent-border: rgba(233, 69, 96, 0.3);

  /* Yellow composites */
  --yellow-bg: rgba(250, 204, 21, 0.1);
  --yellow-border: rgba(250, 204, 21, 0.25);

  /* Amber composites */
  --amber-bg: rgba(245, 158, 11, 0.08);
  --amber-15: rgba(245, 158, 11, 0.15);
  --amber-20: rgba(245, 158, 11, 0.2);
  --amber-30: rgba(245, 158, 11, 0.3);

  /* Rose opacity variants */
  --rose-04: rgba(194, 105, 122, 0.04);
  --rose-12: rgba(194, 105, 122, 0.12);
  --rose-15: rgba(194, 105, 122, 0.15);
  --rose-20: rgba(194, 105, 122, 0.2);
  --rose-30: rgba(194, 105, 122, 0.3);
  --rose-40: rgba(194, 105, 122, 0.4);

  /* Cream opacity variants */
  --cream-04: rgba(240, 232, 224, 0.04);
  --cream-05: rgba(240, 232, 224, 0.05);
  --cream-08: rgba(240, 232, 224, 0.08);
  --cream-15: rgba(240, 232, 224, 0.15);
  --cream-18: rgba(240, 232, 224, 0.18);

  /* Black overlays */
  --black-40: rgba(0, 0, 0, 0.4);
  --black-50: rgba(0, 0, 0, 0.5);
  --black-60: rgba(0, 0, 0, 0.6);

  /* Avatar gradient stops */
  --av-comp-dark: #1e0f16;
  --av-comp-light: #2d1a22;
  --av-comp-lighter: #3d1f2a;

  /* Neutrals */
  --gray-mid: #808080;
  --gray-dark: #555;

  /* Specialty */
  --blue: #60a5fa;
  --blue-bg: rgba(59, 130, 246, 0.2);
  --amber: #f59e0b;
  --gold: #ffd700;
  --silver: #c0c0c0;
  --bronze: #cd7f32;
  --purple-action: #7c3aed;
  --purple-light: #e8a0b8;
  --color-plan-basic: #4ade80;
  --action-text-color: var(--purple-light);

  /* Extra cream opacities */
  --cream-06: rgba(240, 232, 224, 0.06);
  --cream-12: rgba(240, 232, 224, 0.12);

  /* Shadows */
  --shadow: rgba(0, 0, 0, 0.3);
  --shadow-lg: rgba(0, 0, 0, 0.5);

  /* Proposal & wedding */
  --gold-accent: #d4a862;
  --gold-accent-l: #e8c98a;
  --gold-accent-border: rgba(212, 168, 98, 0.3);
  --gold-accent-bg: rgba(212, 168, 98, 0.12);
  --parchment: #2a2520;
  --parchment-line: #3d352e;
  --rose-rgb: 194, 105, 122;
  --burgundy: #7a2638;

  /* Process status */
  --status-working: var(--yellow);
  --status-error: var(--red);
  --status-done: var(--green);
  --process-icon-accent: var(--purple-light);
  --process-card-bg: var(--cream-04);
  --process-card-border: var(--cream-06);
  --process-card-hover: var(--rose-04);
  --process-section-border: var(--cream-06);
  --process-bar-track: var(--cream-08);
  --process-dismiss-hover: var(--cream-06);
}

/* ── Light Theme ───────────────────────────────────────────────────── */
html[data-theme="light"] {
  color-scheme: light;

  /* Base palette */
  --bg: #faf8f6;
  --bg2: #f2eeec;
  --bg3: #e8e4e0;
  --panel: #f5f1ef;
  --rose: #b05068;
  --rose-l: #c8607a;
  --rose-d: #8a3f50;
  --rose-dim: #a06070;
  --rose-bg: rgba(176, 80, 104, 0.1);
  --cream: #1e1820;
  --text: #1e1820;
  --dim: #6a5860;
  --muted: #8a7d82;
  --muted2: #b0a8ac;
  --border: rgba(30, 24, 32, 0.1);
  --border2: rgba(30, 24, 32, 0.08);

  /* Action colors */
  --green: #16a34a;
  --red: #dc2626;
  --accent: #d63a55;
  --yellow: #ca8a04;

  /* Hover states */
  --accent-hover: #c02e48;
  --red-hover: #b91c1c;
  --rose-hover: #9a4058;

  /* Green composites */
  --green-bg: rgba(22, 163, 74, 0.1);
  --green-border: rgba(22, 163, 74, 0.25);
  --green-solid: #16a34a;
  --green-solid-hover: #15803d;

  /* Red composites */
  --red-bg: rgba(220, 38, 38, 0.08);
  --red-border: rgba(220, 38, 38, 0.2);
  --red-light: #ef4444;

  /* Accent composites */
  --accent-bg: rgba(214, 58, 85, 0.12);
  --accent-border: rgba(214, 58, 85, 0.25);

  /* Yellow composites */
  --yellow-bg: rgba(202, 138, 4, 0.1);
  --yellow-border: rgba(202, 138, 4, 0.2);

  /* Amber composites */
  --amber-bg: rgba(217, 119, 6, 0.08);
  --amber-15: rgba(217, 119, 6, 0.15);
  --amber-20: rgba(217, 119, 6, 0.2);
  --amber-30: rgba(217, 119, 6, 0.3);

  /* Rose opacity variants */
  --rose-04: rgba(176, 80, 104, 0.04);
  --rose-12: rgba(176, 80, 104, 0.12);
  --rose-15: rgba(176, 80, 104, 0.15);
  --rose-20: rgba(176, 80, 104, 0.2);
  --rose-30: rgba(176, 80, 104, 0.3);
  --rose-40: rgba(176, 80, 104, 0.4);

  /* Cream opacity variants (repurposed for light theme — darks) */
  --cream-04: rgba(30, 24, 32, 0.03);
  --cream-05: rgba(30, 24, 32, 0.04);
  --cream-06: rgba(30, 24, 32, 0.05);
  --cream-08: rgba(30, 24, 32, 0.06);
  --cream-12: rgba(30, 24, 32, 0.08);
  --cream-15: rgba(30, 24, 32, 0.1);
  --cream-18: rgba(30, 24, 32, 0.12);

  /* Black overlays */
  --black-40: rgba(0, 0, 0, 0.25);
  --black-50: rgba(0, 0, 0, 0.35);
  --black-60: rgba(0, 0, 0, 0.45);

  /* Avatar gradient stops */
  --av-comp-dark: #e8d8dc;
  --av-comp-light: #dcc8d0;
  --av-comp-lighter: #d4bcc4;

  /* Neutrals */
  --gray-mid: #808080;
  --gray-dark: #aaa;

  /* Specialty */
  --blue: #3b82f6;
  --blue-bg: rgba(59, 130, 246, 0.12);
  --amber: #d97706;
  --purple-action: #7c3aed;
  --purple-light: #c9709a;
  --action-text-color: var(--purple-light);

  /* Shadows */
  --shadow: rgba(0, 0, 0, 0.08);
  --shadow-lg: rgba(0, 0, 0, 0.15);

  /* Proposal & wedding */
  --gold-accent: #d4a862;
  --gold-accent-l: #e8c98a;
  --parchment: #f5f0e8;
  --parchment-line: #e0d5c5;
  --rose-rgb: 176, 80, 104;
  --burgundy: #7a2638;

  /* Process status */
  --status-working: var(--yellow);
  --status-error: var(--red);
  --status-done: var(--green);
  --process-icon-accent: var(--purple-light);
  --process-card-bg: var(--cream-04);
  --process-card-border: var(--cream-06);
  --process-card-hover: var(--rose-04);
  --process-section-border: var(--cream-06);
  --process-bar-track: var(--cream-08);
  --process-dismiss-hover: var(--cream-06);
}

/* ════════════════════════════════════════════════════════════════════════
   Profile Color Palettes — SCOPED TO PROFILE SCREENS ONLY

   DO NOT use these --accent overrides outside of #screenProfile and
   #screenProfile-public. They exist to tint the user's own profile page
   with their chosen color. Every other screen in the app uses the base
   --accent defined in [data-theme]. If you need an accent color anywhere
   else, use var(--accent) from the theme — it will be the correct
   app-wide accent, NOT the user's profile color.
   ════════════════════════════════════════════════════════════════════════ */
body[data-accent="rose"]      #screenProfile, body[data-accent="rose"]      #screenProfile-public { --accent: #c2697a; --accent-l: #e8899a; --accent-soft: rgba(194,105,122,0.15); --accent-softer: rgba(194,105,122,0.05); --accent-border: rgba(194,105,122,0.3); --accent-glow: rgba(194,105,122,0.25); }
body[data-accent="burgundy"]  #screenProfile, body[data-accent="burgundy"]  #screenProfile-public { --accent: #9a3246; --accent-l: #b54b60; --accent-soft: rgba(154,50,70,0.18);   --accent-softer: rgba(154,50,70,0.06);   --accent-border: rgba(154,50,70,0.34);   --accent-glow: rgba(154,50,70,0.28); }
body[data-accent="honey"]     #screenProfile, body[data-accent="honey"]     #screenProfile-public { --accent: #c99a56; --accent-l: #e0b872; --accent-soft: rgba(201,154,86,0.16);  --accent-softer: rgba(201,154,86,0.05);  --accent-border: rgba(201,154,86,0.32);  --accent-glow: rgba(201,154,86,0.26); }
body[data-accent="plum"]      #screenProfile, body[data-accent="plum"]      #screenProfile-public { --accent: #8a4a78; --accent-l: #a86092; --accent-soft: rgba(138,74,120,0.18);  --accent-softer: rgba(138,74,120,0.06);  --accent-border: rgba(138,74,120,0.34);  --accent-glow: rgba(138,74,120,0.28); }
body[data-accent="sage"]      #screenProfile, body[data-accent="sage"]      #screenProfile-public { --accent: #7a8a6e; --accent-l: #93a486; --accent-soft: rgba(122,138,110,0.16); --accent-softer: rgba(122,138,110,0.05); --accent-border: rgba(122,138,110,0.32); --accent-glow: rgba(122,138,110,0.24); }
body[data-accent="dusk"]      #screenProfile, body[data-accent="dusk"]      #screenProfile-public { --accent: #8a6a84; --accent-l: #a6869e; --accent-soft: rgba(138,106,132,0.16); --accent-softer: rgba(138,106,132,0.05); --accent-border: rgba(138,106,132,0.32); --accent-glow: rgba(138,106,132,0.24); }
body[data-accent="ember"]     #screenProfile, body[data-accent="ember"]     #screenProfile-public { --accent: #a85838; --accent-l: #c67354; --accent-soft: rgba(168,88,56,0.17);   --accent-softer: rgba(168,88,56,0.05);   --accent-border: rgba(168,88,56,0.32);   --accent-glow: rgba(168,88,56,0.26); }
body[data-accent="indigo"]    #screenProfile, body[data-accent="indigo"]    #screenProfile-public { --accent: #5e5a88; --accent-l: #7a7aa8; --accent-soft: rgba(94,90,136,0.17);   --accent-softer: rgba(94,90,136,0.05);   --accent-border: rgba(94,90,136,0.32);   --accent-glow: rgba(94,90,136,0.24); }

/* ── Global Scrollbar ────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb { background: var(--muted2); border-radius: 2px }
::-webkit-scrollbar-thumb:hover { background: var(--muted) }