/* =============================================================================
   Design tokens — shadcn/ui design language, reimplemented as CSS variables.
   (The token model and naming, not the React library.)

   Every color, radius, shadow and font in the template resolves through these
   variables. theme.js overwrites the color/font ones per client scheme at
   runtime, so modules must never hardcode a hex value.

   The values below are the DEFAULT BOOKING SCHEME — a warm mocha + soft gold
   med-spa palette. Per-industry schemes get curated later; this is the
   placeholder that proves the system.

   Contrast (verified against WCAG AA):
     --foreground on --background ......... 16.9:1  AAA
     --primary-foreground on --primary ..... 5.4:1  AA  (all CTA text)
     --muted-foreground on --background .... 5.3:1  AA  (body/secondary text)
     --accent on --background .............. 2.4:1  FAILS — decoration only.
   --accent is for borders, rules, and small filled shapes. Never put text on
   it and never use it AS text on a light surface.
============================================================================= */

:root {
  /* ---------------------------------------------------------- color tokens */
  --background: #ffffff;
  --foreground: #1c1917;

  /* Warm off-white for alternating sections — keeps the page from going flat */
  --surface: #faf7f4;

  --card: #ffffff;
  --card-foreground: #1c1917;

  --muted: #f5f1ec;
  --muted-foreground: #6f6862;

  --primary: #8f5f49;
  --primary-foreground: #ffffff;
  --primary-hover: #7a5040;

  --accent: #c9a27e;
  --accent-foreground: #1c1917;

  --border: #e9e2da;
  --ring: #8f5f49;

  --star: #d9a441;

  /* --------------------------------------------------------------- shape */
  --radius: 0.75rem;
  --radius-sm: 0.5rem;
  --radius-lg: 1.25rem;

  /* Soft, layered shadows — "improved shadows": softer than flat design,
     clearer than neumorphism. */
  --shadow-sm: 0 1px 2px rgba(28, 25, 23, .05);
  --shadow-md: 0 8px 30px rgba(28, 25, 23, .08);
  --shadow-lg: 0 18px 50px rgba(28, 25, 23, .12);

  /* ---------------------------------------------------------- typography */
  --font-headline: 'Fraunces', 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* ------------------------------------------------------------- motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 200ms;

  /* Vertical rhythm tiers, so sections don't drift into arbitrary spacing */
  --section-y: clamp(3.5rem, 8vw, 6.5rem);
}

/* ============================================================ base elements */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-headline);
  color: var(--foreground);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

img { max-width: 100%; display: block; }

/* Fluid type scale — no media queries needed for headings. */
.t-display { font-size: clamp(2.25rem, 5.2vw, 3.75rem); }
.t-h2      { font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
.t-h3      { font-size: clamp(1.125rem, 1.6vw, 1.375rem); }
.t-lead    { font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); line-height: 1.65; }

/* Keep long-form copy inside a readable measure (~65ch). */
.t-measure { max-width: 65ch; }

/* Prices and durations align in columns instead of jittering. */
.t-nums { font-variant-numeric: tabular-nums; }

/* ============================================================ focus states */
/* Never remove the focus ring — only replace it with a better one. */

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ============================================================== components */

.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;              /* touch target floor */
  padding: .75rem 1.5rem;
  background: var(--primary);
  color: var(--primary-foreground);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background-color var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease),
              transform var(--duration) var(--ease);
}

.ui-btn:hover { background: var(--primary-hover); box-shadow: var(--shadow-md); }
.ui-btn:active { transform: scale(.98); }

.ui-btn-outline {
  background: transparent;
  color: var(--foreground);
  border-color: var(--border);
  box-shadow: none;
}
.ui-btn-outline:hover {
  background: var(--muted);
  border-color: var(--primary);
  box-shadow: none;
}

/* On a primary-colored band, the button inverts. */
.ui-btn-invert {
  background: var(--background);
  color: var(--primary);
}
.ui-btn-invert:hover { background: var(--muted); }

.ui-card {
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration) var(--ease),
              transform var(--duration) var(--ease);
}

.ui-card-hover:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.ui-badge {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .3125rem .75rem;
  background: var(--muted);
  color: var(--muted-foreground);
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .01em;
}

/* Accent used the only way it's allowed to be: as a fill/border, not as text. */
.ui-badge-accent {
  background: color-mix(in srgb, var(--accent) 22%, white);
  color: var(--foreground);
}

.ui-input {
  width: 100%;
  min-height: 44px;
  padding: .625rem .875rem;
  background: var(--card);
  color: var(--foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;              /* 16px — stops iOS from zooming on focus */
}

.ui-rule {
  width: 3rem;
  height: 2px;
  background: var(--accent);
  border: 0;
  margin: 0;
}

/* ============================================================ placeholders */
/* Preview-only. These must read as "this is where your thing goes" at a
   glance — a preview that looks broken is better than one that looks
   finished-but-wrong. */

.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 180px;
  background:
    repeating-linear-gradient(
      45deg,
      var(--muted) 0 12px,
      color-mix(in srgb, var(--muted) 60%, white) 12px 24px
    );
  color: var(--muted-foreground);
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem;
}

.ph-logo {
  min-height: 0;
  padding: .4375rem .75rem;
  font-size: .625rem;
  letter-spacing: .1em;
  border-radius: var(--radius-sm);
}

/* Inert CTAs still have to look clickable — they're selling the finished site.
   Cursor stays default so the preview never pretends to be functional. */
.is-inert { cursor: default; }

/* ================================================================ sections */

.section { padding-block: var(--section-y); }
.section-surface { background: var(--surface); }
.section-muted { background: var(--muted); }

.container {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2rem);
}

.container-narrow { max-width: 52rem; }

/* ================================================== reduced motion support */

@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;
  }
}

/* ============================================================ print/legacy */

@media print {
  .ph { border-style: solid; }
}