/* Three visual themes. The active one is set via <body data-theme="..."> from
   the business settings (admin → Business → Theme).

   1) barber    — dark, bold, gold accents, uppercase headings, sharp corners
   2) beauty    — light, soft rose/lavender, rounded, airy
   3) workshop  — clean, practical light gray + blue, utilitarian            */

/* ---------- defaults (workshop-ish fallback) ---------- */
:root {
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --bg: #f4f6f8; --surface: #ffffff; --card: #ffffff;
  --text: #17222e; --muted: #5b6b7c; --line: #dde4ea;
  --accent: #1f6feb; --accent-contrast: #ffffff; --accent-soft: #e8f0fe;
  --danger: #d33a2c; --danger-soft: #fdeceb;
  --radius: 10px; --radius-s: 7px;
  --shadow: 0 1px 3px rgba(23, 34, 46, .08);
  --avatar: 50%;
  --disabled: #a7b3bf;
  --heading-case: none; --heading-space: 0;
}

/* ---------- 1) BARBERSHOP — dark & bold ---------- */
body[data-theme="barber"] {
  --font: 'Arial Black', 'Segoe UI', system-ui, sans-serif;
  --bg: #101012; --surface: #17171a; --card: #1e1e22;
  --text: #f2efe8; --muted: #9d9890; --line: #2c2c31;
  --accent: #d4a24e; --accent-contrast: #191400; --accent-soft: #33291a;
  --danger: #e05b4c; --danger-soft: #3a1d18;
  --radius: 6px; --radius-s: 4px;
  --shadow: 0 2px 8px rgba(0, 0, 0, .45);
  --avatar: 12%;
  --heading-case: uppercase; --heading-space: 1.5px;
}
body[data-theme="barber"] .hero { background: linear-gradient(180deg, #17171a 0%, #101012 100%); }
body[data-theme="barber"] .hero h1 { font-weight: 900; }
body[data-theme="barber"] .btn { text-transform: uppercase; letter-spacing: 1px; font-size: 13px; }
body[data-theme="barber"] .price { letter-spacing: .5px; }
body[data-theme="barber"] .nav a.active { text-transform: uppercase; font-size: 12px; }

/* ---------- 2) BEAUTY / NAILS — light & soft ---------- */
body[data-theme="beauty"] {
  --font: 'Georgia', 'Times New Roman', system-ui, serif;
  --bg: #fdf6f8; --surface: #ffffff; --card: #ffffff;
  --text: #43333c; --muted: #9b8290; --line: #f0dde5;
  --accent: #c2718f; --accent-contrast: #ffffff; --accent-soft: #faeef2;
  --danger: #cf5b74; --danger-soft: #fbe9ee;
  --radius: 18px; --radius-s: 12px;
  --shadow: 0 6px 18px rgba(194, 113, 143, .12);
  --avatar: 50%;
  --heading-case: none; --heading-space: .5px;
}
body[data-theme="beauty"] h1, body[data-theme="beauty"] h2, body[data-theme="beauty"] h3 { font-weight: 500; }
body[data-theme="beauty"] .hero { background: linear-gradient(180deg, #ffffff 0%, #fdf0f4 100%); }
body[data-theme="beauty"] .btn { border-radius: 999px; padding: 12px 26px; }
body[data-theme="beauty"] .nav a { border-radius: 999px; }
body[data-theme="beauty"] .card { border: none; }

/* ---------- 3) SERVICE / WORKSHOP — clean & practical ---------- */
body[data-theme="workshop"] {
  --font: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --bg: #eef1f4; --surface: #ffffff; --card: #ffffff;
  --text: #1c2733; --muted: #5d6b79; --line: #d4dce3;
  --accent: #0b6b3a; --accent-contrast: #ffffff; --accent-soft: #e2f2e8;
  --danger: #c2362a; --danger-soft: #fdecea;
  --radius: 8px; --radius-s: 6px;
  --shadow: 0 1px 2px rgba(28, 39, 51, .12);
  --avatar: 8%;
  --heading-case: none; --heading-space: 0;
}
body[data-theme="workshop"] .topbar { border-bottom-width: 3px; border-bottom-color: var(--accent); }
body[data-theme="workshop"] .hero h1 { font-weight: 700; }
body[data-theme="workshop"] .date-cell { font-weight: 600; }
body[data-theme="workshop"] .code-big { border-style: solid; letter-spacing: 5px; }