/* ==========================================================================
   Luxe - colour theme
   The ONE place to change the colours of the website.
   - Edit the "R G B" triplets in section 1 (space separated, 0-255).
   - Everything else (Framer design tokens, luxe-extra.css, luxe-framer-styles.css)
     reads these values, so one edit re-colours the whole site.
   Load order: framer.css -> luxe-theme.css -> luxe-extra.css -> luxe-framer-styles.css
   ========================================================================== */

/* 1. Brand palette (R G B) ------------------------------------------------ */
:root {
  --lx-ink-rgb:      26 26 26;      /* main text, dark buttons, dark sections   (#1a1a1a) */
  --lx-charcoal-rgb: 51 51 51;      /* secondary dark surfaces                   (#333333) */
  --lx-navy-rgb:     76 92 104;     /* brand navy (blue-grey): used by the FOOTER only (#4c5c68) */
  --lx-slate-rgb:    44 40 37;      /* dark accent: dark buttons, bands, selected states (warm charcoal, #2c2825) */
  --lx-muted-rgb:    107 101 95;    /* secondary text                            (#6b655f) */
  --lx-gold-rgb:     180 142 90;    /* gold accent                               (#b48e5a) */
  --lx-rose-rgb:     217 167 160;   /* soft rose accent                          (#d9a7a0) */
  --lx-blush-rgb:    251 233 233;   /* light rose surface                        (#fbe9e9) */
  --lx-cream-rgb:    247 243 239;   /* warm light surface                        (#f7f3ef) */
  --lx-paper-rgb:    250 247 246;   /* page background tint                      (#faf7f6) */
  --lx-mint-rgb:     236 245 244;   /* cool light surface                        (#ecf5f4) */
  --lx-line-rgb:     231 233 235;   /* borders and dividers                      (#e7e9eb) */
  --lx-white-rgb:    255 255 255;
  --lx-black-rgb:    0 0 0;         /* image overlays and shadows */
  --lx-link-rgb:     0 153 255;     /* default link blue from the Framer export  (#0099ff) */
  --lx-success-rgb:  46 125 94;     /* confirmation green                        (#2e7d5e) */
  --lx-danger-rgb:   156 43 34;     /* form errors and warnings                  (#9c2b22) */
  --lx-whatsapp-rgb: 37 211 102;    /* WhatsApp buttons (brand green)            (#25d366) */
}

/* 2. Ready-to-use colours (do not edit; derived from section 1) ------------ */
:root {
  --lx-ink: rgb(var(--lx-ink-rgb));           --lx-charcoal: rgb(var(--lx-charcoal-rgb));
  --lx-slate: rgb(var(--lx-slate-rgb));       --lx-gold: rgb(var(--lx-gold-rgb));
  --lx-navy: rgb(var(--lx-navy-rgb));         --lx-muted: rgb(var(--lx-muted-rgb));
  --lx-rose: rgb(var(--lx-rose-rgb));         --lx-blush: rgb(var(--lx-blush-rgb));
  --lx-cream: rgb(var(--lx-cream-rgb));       --lx-paper: rgb(var(--lx-paper-rgb));
  --lx-mint: rgb(var(--lx-mint-rgb));         --lx-line: rgb(var(--lx-line-rgb));
  --lx-white: rgb(var(--lx-white-rgb));       --lx-black: rgb(var(--lx-black-rgb));
  --lx-link: rgb(var(--lx-link-rgb));         --lx-success: rgb(var(--lx-success-rgb));
  --lx-danger: rgb(var(--lx-danger-rgb));     --lx-whatsapp: rgb(var(--lx-whatsapp-rgb));

  /* header once the page is scrolled: white bar with dark text */
  --lx-nav-scrolled-bg: rgb(var(--lx-white-rgb) / .97);
  --lx-nav-scrolled-fg: var(--lx-ink);
  --lx-nav-scrolled-border: rgb(var(--lx-ink-rgb) / .10);

  /* fonts */
  --lx-serif: "Fraunces", "Fraunces Placeholder", Georgia, serif;
  --lx-sans: "Figtree", "Figtree Placeholder", Inter, sans-serif;
}

/* 3. Framer design tokens -> brand palette ---------------------------------
   framer.css defines these on <body>; they are re-pointed here (same specificity, loaded later). */
body {
  --token-9fbd7085-c716-4cad-b737-71d0e5c3f359: var(--lx-ink);
  --token-e84b81b6-e988-464f-8956-e22edcea516b: var(--lx-slate);
  --token-355c8106-73d1-45a9-beda-b74ce240bb2c: var(--lx-gold);
  --token-5478a533-75a9-4e23-ba9d-d047d3de1a7f: var(--lx-rose);
  --token-a42e97e1-1789-4591-acab-7525fcd3526e: var(--lx-blush);
  --token-a570e4dd-8fcc-4ffa-b57e-60e75ba7743a: var(--lx-cream);
  --token-c3b274c0-a7ec-4330-96fe-f494cf8a5e62: var(--lx-paper);
  --token-5422bbf3-68cb-49d6-94ba-b61c92f9a320: var(--lx-mint);
  --token-b2afaba6-7cb1-4cfe-adf7-8fcbc8a2f28e: var(--lx-line);
  /* tokens used by the export that framer.css does not define (it relied on the fallback colour) */
  --token-0bccb4db-a8bc-4e54-bca5-c7c94a1ad686: var(--lx-white);
  --token-922bf7e2-6566-450d-a5db-d314f15d527e: var(--lx-charcoal);
}

/* 3b. Footer keeps the navy ---------------------------------------------------
   Everything on the public site uses the dark accent (--lx-slate); inside the footer the same
   variables are pointed back to the navy, so the footer is the only navy area. */
.framer-1uqtdgc-container {
  --lx-slate-rgb: var(--lx-navy-rgb);
  --lx-slate: rgb(var(--lx-navy-rgb));
  --token-e84b81b6-e988-464f-8956-e22edcea516b: rgb(var(--lx-navy-rgb));
}

/* 4. Admin / barber dashboard palette (R G B) ---------------------------------
   Used by admin-*.css, barber-*.css, auth-*.css. Names describe the role; change the numbers to re-colour the dashboards. */
:root {
  --ui-white-rgb:           255 255 255; /* #ffffff */
  --ui-black-rgb:           0 0 0; /* #000000 */
  --ui-bg-rgb:              15 23 42; /* #0f172a - page background */
  --ui-card-rgb:            30 41 59; /* #1e293b - cards, sidebar, topbar, modals */
  --ui-hover-rgb:           51 65 85; /* #334155 - hover surface and borders */
  --ui-text-rgb:            248 250 252; /* #f8fafc - main text */
  --ui-muted-rgb:           148 163 184; /* #94a3b8 - secondary text */
  --ui-slate-rgb:           100 116 139; /* #64748b */
  --ui-silver-rgb:          203 213 225; /* #cbd5e1 */
  --ui-mist-rgb:            226 232 240; /* #e2e8f0 */
  --ui-ink-rgb:             2 6 23; /* #020617 */
  --ui-primary-rgb:         59 130 246; /* #3b82f6 - buttons, links, focus */
  --ui-primary-hover-rgb:   37 99 235; /* #2563eb */
  --ui-primary-light-rgb:   96 165 250; /* #60a5fa */
  --ui-primary-soft-rgb:    147 197 253; /* #93c5fd */
  --ui-primary-pale-rgb:    191 219 254; /* #bfdbfe */
  --ui-danger-rgb:          239 68 68; /* #ef4444 - delete, errors */
  --ui-danger-light-rgb:    248 113 113; /* #f87171 */
  --ui-danger-soft-rgb:     252 165 165; /* #fca5a5 */
  --ui-success-rgb:         34 197 94; /* #22c55e - confirmations */
  --ui-success-soft-rgb:    134 239 172; /* #86efac */
  --ui-emerald-rgb:         16 185 129; /* #10b981 */
  --ui-emerald-soft-rgb:    52 211 153; /* #34d399 */
  --ui-warning-rgb:         245 158 11; /* #f59e0b - warnings, credits, gold */
  --ui-warning-light-rgb:   251 191 36; /* #fbbf24 */
  --ui-warning-soft-rgb:    252 211 77; /* #fcd34d */
  --ui-warning-strong-rgb:  217 119 6; /* #d97706 */
  --ui-warning-dark-rgb:    180 83 9; /* #b45309 */
  --ui-yellow-rgb:          234 179 8; /* #eab308 */
  --ui-accent-rgb:          99 102 241; /* #6366f1 */
  --ui-accent-soft-rgb:     129 140 248; /* #818cf8 */
  --ui-accent-strong-rgb:   79 70 229; /* #4f46e5 */
  --ui-violet-rgb:          167 139 250; /* #a78bfa */
}

/* Appointment status pills (admin appointments list) */
:root {
  --ui-status-confirmed-bg-rgb: 45 74 34;
  --ui-status-booked-bg-rgb: 102 77 0;
  --ui-status-other-bg-rgb: 74 34 34;
}