/* ==========================================================================
   STYLE LOUNGE BY DS — DESIGN SYSTEM
   ==========================================================================
   One white base, six accent colours, one typeface (Poppins).

   To change the whole look of the site, edit this file alone.

   The accent is chosen by a `data-accent` attribute on <html>:
       <html data-accent="gold">   gold | rose | emerald | charcoal
                                   purple | teal
   The colour switcher in the header sets it, and the salon default comes
   from CRM -> Settings -> Appearance.
   ========================================================================== */

:root {
  /* ---- Neutral base: white paper, warm grey ink ------------------------- */
  --white:         #FFFFFF;
  --bg:            #FFFFFF;   /* the page itself */
  --bg-alt:        #F7F7F9;   /* alternating bands, so sections separate */
  --bg-deep:       #14141A;   /* the footer and other inverted blocks */
  --surface:       #FFFFFF;   /* cards */
  --surface-2:     #F7F7F9;   /* inset panels, table headers */
  --surface-3:     #EFEFF3;   /* hovered rows, skeletons */
  --overlay:       rgba(18, 18, 24, .52);

  /* ---- Text ------------------------------------------------------------- */
  --text:          #17171C;
  --text-2:        #3D3D46;
  --text-muted:    #6B6B77;
  --text-faint:    #9A9AA6;
  --text-on-dark:  #F6F6F8;
  --text-on-accent:#FFFFFF;

  /* ---- Lines ------------------------------------------------------------ */
  --border:        #E7E7EC;
  --border-strong: #D3D3DB;
  --border-focus:  var(--accent);

  /* ---- Status ----------------------------------------------------------- */
  --success:       #127A52;  --success-soft: #E6F5EE;
  --warning:       #96650A;  --warning-soft: #FCF2DE;
  --error:         #B3261E;  --error-soft:   #FCEAE8;
  --info:          #1F5B87;  --info-soft:    #E8F1F8;

  /* ---- Booking status colours (shared by site + CRM) -------------------- */
  --status-pending:     #96650A;  --status-pending-bg:     #FCF2DE;
  --status-confirmed:   #1F5B87;  --status-confirmed-bg:   #E8F1F8;
  --status-checked_in:  #5B3FA0;  --status-checked_in-bg:  #EEE9FA;
  --status-in_progress: #0F6E77;  --status-in_progress-bg: #E3F2F3;
  --status-completed:   #127A52;  --status-completed-bg:   #E6F5EE;
  --status-cancelled:   #77777F;  --status-cancelled-bg:   #F0F0F3;
  --status-no_show:     #B3261E;  --status-no_show-bg:     #FCEAE8;

  /* ---- Typography ------------------------------------------------------- */
  /* Poppins throughout, at two weights of emphasis. The fallbacks are the
     system UI fonts, so the page still looks composed if Google Fonts is
     slow or blocked. */
  --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                  Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                  Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

  /* Fluid sizes: one value that grows with the viewport, so the same scale
     works on a 360px phone and a 1920px monitor without extra breakpoints. */
  --fs-xs:   0.75rem;
  --fs-sm:   0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md:   1rem;
  --fs-lg:   clamp(1.0625rem, 0.3vw + 1rem,   1.1875rem);
  --fs-xl:   clamp(1.1875rem, 0.6vw + 1rem,   1.4375rem);
  --fs-2xl:  clamp(1.375rem,  1.1vw + 1rem,   1.875rem);
  --fs-3xl:  clamp(1.625rem,  2.0vw + 1rem,   2.5rem);
  --fs-4xl:  clamp(2rem,      3.2vw + 1rem,   3.25rem);
  --fs-5xl:  clamp(2.375rem,  4.6vw + 1rem,   4.25rem);

  --lh-tight: 1.14;
  --lh-snug:  1.32;
  --lh-body:  1.65;

  --tracking-tight: -0.02em;
  --tracking-wide:  0.04em;
  --tracking-wider: 0.12em;

  /* ---- Space (4px base) -------------------------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  /* Section rhythm shrinks on small screens without a media query. */
  --section-y: clamp(48px, 7vw, 104px);

  /* ---- Radius ----------------------------------------------------------- */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-xl:  26px;
  --r-pill: 999px;

  /* ---- Elevation --------------------------------------------------------- */
  /* Soft and low-contrast: on a white page, heavy shadows look muddy. */
  --shadow-xs: 0 1px 2px rgba(20,20,26,.05);
  --shadow-sm: 0 1px 2px rgba(20,20,26,.05), 0 2px 6px rgba(20,20,26,.04);
  --shadow-md: 0 2px 6px rgba(20,20,26,.05), 0 8px 22px rgba(20,20,26,.07);
  --shadow-lg: 0 4px 12px rgba(20,20,26,.06), 0 18px 44px rgba(20,20,26,.10);
  --shadow-xl: 0 30px 70px rgba(20,20,26,.16);

  /* ---- Motion ------------------------------------------------------------ */
  --ease:     cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 130ms;
  --t-base: 220ms;
  --t-slow: 380ms;

  /* ---- Layout ------------------------------------------------------------ */
  --container: 1220px;
  --container-narrow: 780px;
  /* The page gutter. Anything that wants to bleed to the screen edge uses
     this, so it lands exactly on the edge instead of overshooting it and
     making the page scroll sideways on a phone. */
  --gutter: var(--s-6);
  --header-h: 72px;
  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;
}

/* ==========================================================================
   ACCENT COLOURS
   --------------------------------------------------------------------------
   Six choices. Every one of these accents passes WCAG AA (4.5:1) as text on
   white, so a price, a link or a small label stays readable in all of them.

     --accent          the colour itself
     --accent-hover    one step darker, for hover and pressed states
     --accent-deep     darkest, for headings on tinted panels
     --accent-soft     a pale wash for chips and highlighted rows
     --accent-tint     barely-there, for large section backgrounds
     --accent-ring     translucent, for focus rings and glows
   ========================================================================== */

:root,
:root[data-accent="gold"] {
  --accent:       #8E6A2E;
  --accent-hover: #75571F;
  --accent-deep:  #5E4519;
  --accent-soft:  #F6EEDF;
  --accent-tint:  #FCF9F3;
  --accent-ring:  rgba(154, 116, 52, .28);
}

:root[data-accent="rose"] {
  --accent:       #AE3A57;
  --accent-hover: #942F49;
  --accent-deep:  #6E1F33;
  --accent-soft:  #FBE9ED;
  --accent-tint:  #FEF6F8;
  --accent-ring:  rgba(174, 58, 87, .26);
}

:root[data-accent="emerald"] {
  --accent:       #0F6D50;
  --accent-hover: #0B5B43;
  --accent-deep:  #084232;
  --accent-soft:  #E3F3EC;
  --accent-tint:  #F4FAF7;
  --accent-ring:  rgba(15, 109, 80, .26);
}

:root[data-accent="charcoal"] {
  --accent:       #2C2C34;
  --accent-hover: #17171C;
  --accent-deep:  #0D0D11;
  --accent-soft:  #ECECF0;
  --accent-tint:  #F7F7F9;
  --accent-ring:  rgba(44, 44, 52, .24);
}

:root[data-accent="purple"] {
  --accent:       #63419E;
  --accent-hover: #533686;
  --accent-deep:  #3B2661;
  --accent-soft:  #EEE8F8;
  --accent-tint:  #F9F6FD;
  --accent-ring:  rgba(99, 65, 158, .26);
}

:root[data-accent="teal"] {
  --accent:       #0D6670;
  --accent-hover: #0A555D;
  --accent-deep:  #063C43;
  --accent-soft:  #E1F1F3;
  --accent-tint:  #F3FAFB;
  --accent-ring:  rgba(13, 102, 112, .26);
}

/* The accent changes without a flash of the old colour. */
:root { transition: none; }
body { transition: background-color var(--t-base) var(--ease); }

/* ==========================================================================
   RESET
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Off-screen drawers are position:fixed, and a fixed element that sits
     past the right edge stretches the layout viewport on phones unless the
     root clips it too. Without this the whole page renders zoomed out. */
  overflow-x: hidden;
  /* Anchored sections are not hidden behind the sticky header. */
  scroll-padding-top: calc(var(--header-h) + var(--s-4));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* Poppins reads better with slightly tightened lowercase. */
  letter-spacing: -0.005em;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
button:disabled { cursor: not-allowed; }

table { border-collapse: collapse; width: 100%; }

/* Visible, consistent focus for keyboard users only. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::selection { background: var(--accent-soft); color: var(--accent-deep); }

/* A slim accent scrollbar on browsers that allow it. */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: var(--r-pill);
  border: 3px solid var(--bg);
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

/* ---- Utility ------------------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: var(--z-toast);
  background: var(--accent); color: var(--text-on-accent);
  padding: var(--s-3) var(--s-5); border-radius: 0 0 var(--r-md) 0;
  font-weight: 500;
}
.skip-link:focus { left: 0; }

.container {
  width: 100%; max-width: var(--container);
  margin-inline: auto; padding-inline: var(--gutter);
}
.container-narrow { max-width: var(--container-narrow); }

@media (max-width: 640px) {
  :root { --gutter: var(--s-4); }
}