/* Adore The Set: design tokens, concept D
   A layout, C colors and type. Baby pink marble ground, black ink,
   white marble cards with black outlines and offset shadows.
   Pinyon Script for her name and section titles only. DM Sans for everything else.
   Owned by Miriam (customer app). Back office imports this file and adds admin.css. */

:root {
  /* ---- ground and ink ---- */
  --blush: #fde3ec;          /* baby pink ground */
  --blush-deep: #f6d2e0;     /* pink marble shadow pass */
  --blush-pale: #fff1f6;     /* pink marble highlight pass */
  --ink: #141114;            /* black */
  --ink-soft: #4a3d43;       /* body copy on pink */
  --muted: #7a6670;          /* secondary text */
  --muted-2: #6b6066;        /* notes and fine print */
  --white: #ffffff;          /* booking rows */
  --pink: #f7a8c4;           /* accent: deposit label, Cash App button */
  --rose: #e97ba3;           /* hover for the accent */

  /* ---- marble slab (white, behind hero photo and on cards) ---- */
  --marble-hi: #fcfbfb;
  --marble-lo: #efe9eb;
  --marble-strip-hi: #f7f3f4;
  --marble-strip-lo: #e9e2e5;

  /* ---- lines ---- */
  --line: rgba(20, 17, 20, 0.18);
  --line-soft: #e6dde0;
  --line-hard: var(--ink);

  /* ---- state colors for the calendar ---- */
  --ok: #2f7d55;             /* open day dot */
  --warn: #b26a14;           /* overtime notice */
  --bad: #b03a4a;            /* errors */
  --disabled-ink: #b8adb2;   /* past, full, blocked day numbers */
  --disabled-bg: #f3e6ec;    /* past, full, blocked day fill */

  /* ---- type ---- */
  --font-display: "Pinyon Script", "Brush Script MT", cursive;
  --font-body: "DM Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-micro: 11px;          /* eyebrow, step labels */
  --fs-fine: 13px;           /* notes */
  --fs-sm: 14px;             /* meta, prices in rows */
  --fs-base: 16px;
  --fs-lg: 17px;             /* service names */
  --fs-xl: 20px;
  --fs-h3: clamp(28px, 5vw, 36px);   /* script sub heads */
  --fs-h2: clamp(32px, 6vw, 44px);   /* script section titles */
  --fs-h1: clamp(44px, 7vw, 96px);   /* script hero */
  --fs-brand: 34px;          /* her name in the nav */

  --lh-tight: 1;
  --lh-snug: 1.25;
  --lh-body: 1.55;
  --track-wide: 0.2em;       /* uppercase labels */
  --track-brand: 0.28em;     /* hero eyebrow */

  /* ---- space ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 26px;
  --sp-7: 34px;
  --sp-8: 48px;
  --sp-9: 64px;
  --pad-x: 28px;             /* page gutter, desktop */
  --pad-x-sm: 18px;          /* page gutter, phone */
  --maxw: 1120px;

  /* ---- shape ---- */
  --radius-0: 0;
  --radius-sm: 2px;          /* SELECT buttons */
  --radius-pill: 999px;      /* buttons and slot pills */
  --border: 1px solid var(--ink);
  --shadow-offset: 6px 6px 0 var(--ink);
  --shadow-offset-sm: 4px 4px 0 var(--ink);
  --shadow-lift: 0 18px 40px -28px rgba(20, 17, 20, 0.5);

  /* ---- motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-page: 320ms;         /* mobile flip between steps */

  /* ---- layout ---- */
  --nav-h: 64px;
  --bp-mobile: 767px;        /* flip pages at and below this */
  --z-nav: 20;
  --z-sheet: 40;
  --z-toast: 60;
}

/* ---- marble surfaces, used as composable backgrounds ---- */
/* Pink marble ground. The vein layer is a separate ::before in site.css so the
   SVG turbulence filter can displace it without touching the content. */
.surface-pink {
  background:
    radial-gradient(ellipse at 18% 22%, rgba(20, 17, 20, 0.045), transparent 45%),
    radial-gradient(ellipse at 80% 70%, rgba(233, 123, 163, 0.16), transparent 42%),
    linear-gradient(180deg, var(--blush-pale), var(--blush) 38%, var(--blush-deep));
}

/* White marble slab: hero backing, cards. */
.surface-marble {
  background:
    radial-gradient(ellipse at 18% 22%, rgba(0, 0, 0, 0.05), transparent 45%),
    radial-gradient(ellipse at 80% 70%, rgba(0, 0, 0, 0.04), transparent 40%),
    linear-gradient(180deg, var(--marble-hi), var(--marble-lo));
}

/* Thin marble divider strip between sections. */
.surface-strip {
  background:
    radial-gradient(ellipse at 30% 40%, rgba(0, 0, 0, 0.08), transparent 50%),
    linear-gradient(180deg, var(--marble-strip-hi), var(--marble-strip-lo));
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-page: 0ms;
  }
}