/* ===== Fahi Beauty Aesthetics — Design Tokens =====
   Ported from the project's actual styles.css (oklch tokens).
*/
:root{
  --bg: oklch(0.983 0.006 85);        /* background / ivory canvas */
  --surface: oklch(1 0 0);            /* card */
  --ink: oklch(0.28 0.012 60);        /* foreground */
  --green: oklch(0.336 0.058 163);    /* primary — deep emerald */
  --muted: oklch(0.52 0.014 70);      /* muted-foreground */
  --muted-bg: oklch(0.955 0.01 88);   /* muted */
  --accent-bg: oklch(0.94 0.026 90);  /* accent */
  --line: oklch(0.9 0.014 85);        /* border */

  --gold: oklch(0.655 0.068 74);
  --gold-light: oklch(0.775 0.077 82);
  --gold-foreground: oklch(0.99 0.005 85);

  --gradient-gold: linear-gradient(100deg, var(--gold) 0%, var(--gold-light) 55%, var(--gold) 100%);
  --shadow-soft: 0 20px 60px -30px color-mix(in oklab, var(--green) 30%, transparent);
  --green-deep: color-mix(in oklab, var(--green) 82%, black 18%); /* used only for dark sections like Academy, not footer */

  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-script: "Great Vibes", cursive;
  --font-body: "Jost", ui-sans-serif, system-ui, sans-serif;

  --container: 1160px;
  --gutter: clamp(20px, 5vw, 48px);

  --space-section: clamp(64px, 9vw, 128px);
  --space-block: clamp(32px, 5vw, 56px);
  --space-s: 12px;
  --space-m: 20px;
  --space-l: 32px;

  --radius: 0.25rem;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin: 0; padding: 0; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.eyebrow{
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--gold) 70%, var(--ink) 30%);
}

.font-script{ font-family: var(--font-script); }

.text-gold-gradient{
  background-image: var(--gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

h1,h2,h3{
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--green);
  margin: 0;
}

/* ===== Buttons ===== */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 30px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .25s ease, opacity .2s ease;
}
.btn:active{ transform: translateY(1px); }

/* Book Now — gold gradient, matches --gradient-gold exactly, subtle lift on hover */
.btn-gold{
  background-image: var(--gradient-gold);
  background-size: 200% auto;
  background-position: left center;
  color: var(--gold-foreground);
  box-shadow: var(--shadow-soft);
}
.btn-gold:hover{
  background-position: right center;
  box-shadow: 0 14px 30px -12px color-mix(in oklab, var(--gold) 55%, transparent);
}

.btn-outline{
  background: transparent;
  border-color: var(--green);
  color: var(--green);
}
.btn-outline:hover{ background: color-mix(in oklab, var(--green) 6%, transparent); }

.btn-outline-light{
  background: transparent;
  border-color: color-mix(in oklab, var(--green) 35%, transparent);
  color: var(--green);
}
.btn-outline-light:hover{ background: color-mix(in oklab, var(--green) 6%, transparent); }

section{ padding: var(--space-section) 0; }

/* ===== Ledger / rule utilities (matches real design system) ===== */
.ledger-leader{
  flex: 1 1 auto;
  margin: 0 0.75rem;
  border-bottom: 1px dotted color-mix(in oklab, var(--green) 35%, transparent);
  transform: translateY(-0.3rem);
}
.rule-gold::after{
  content: "";
  display: block;
  width: 4.5rem;
  height: 2px;
  margin-top: 1rem;
  background-image: var(--gradient-gold);
}
.page-hero{
  text-align: center;
  padding: 72px 0 48px;
  max-width: 680px;
  margin: 0 auto;
}
.page-hero p{ color: var(--muted); margin-top: 14px; }