/* ============================================================================
   SalonVindbaar - Design Tokens (single source of truth)
   ----------------------------------------------------------------------------
   Extracted from the live site (dist/) where 8 pages each carried their own
   inline :root block. 24 of 28 tokens had drifted between pages; the values
   below are the reconciled canonical set, taken from index.html (the dominant
   and correct set) and checked against 02_Brand/brand-package/tokens/colors.css.

   Naming: unprefixed (--purple, --ink), matching what the live pages already
   use, so retrofitting a page is "delete the inline :root", not "rename
   everything". The brand package's --sv-* names are aliased at the bottom.

   Rule: no component may contain a raw hex value. If you need a colour it
   must be a token here.
   ============================================================================ */

/* The system serves its own faces. Without these the manifest records the font
   families as "no-face" and every surface silently falls back to Georgia/system. */
@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/assets/fonts/fraunces-vf.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/assets/fonts/inter-vf.woff2') format('woff2');
}

:root{
  /* ---- brand primary ------------------------------------------------------ */
  --purple-deep:#403591;
  --purple:#6950F3;
  --purple-2:#6960FF;
  --purple-soft:#7B5EFF;

  /* ---- brand accents ------------------------------------------------------ */
  --rose-deep:#B32549;
  --rose-mid:#F19BB0;
  --peach-deep:#E07B5C;

  /* ---- on-dark gradient stops (lighter, for legibility on ink) ------------- */
  --purple-light:#8A7BFF;
  --lavender-light:#B6A2FF;
  --coral:#E26F8B;
  --pink-soft:#F8BFCC;

  /* ---- surface tints (the thing that makes the site feel like the site) ---- */
  --lavender:#F0F0FF;
  --lavender-deep:#DBDDFF;
  --peach:#FEECEB;
  --mint:#DCF1E6;
  --mint-deep:#B5E1C8;
  --sky:#DAEBFE;
  --sky-deep:#B4D6FB;
  --butter:#FFF4D1;
  --butter-deep:#FFE69A;
  --rose:#FBD7E0;

  /* ---- neutrals ----------------------------------------------------------- */
  --white:#FFFFFF;
  --off-white:#F9F9F9;
  --grey-50:#F5F5F5;
  --rule:#ECECEC;
  --rule-strong:#E0E0E0;
  --muted-2:#8A8A8A;
  --muted:#6B6B6B;
  --ink-soft:#2E2E2E;
  --ink:#141414;

  /* ---- status ------------------------------------------------------------- */
  --green:#1F8900;
  --red:#D4163A;

  /* ---- tinted "number" inks (used on the tinted card variants) ------------- */
  /* each is AA on its own tint, which is why they are not just --green etc.   */
  --ink-on-mint:#1F6F3C;
  --ink-on-sky:#1E4FA0;
  --ink-on-butter:#8A6700;
  --ink-on-rose:#B32549;
  --ink-on-peach:#B5715C;

  /* ---- gradients ---------------------------------------------------------- */
  --gradient-brand:linear-gradient(90deg,var(--purple-deep) 0%,var(--purple) 30%,var(--rose-deep) 65%,var(--rose-mid) 100%);
  --gradient-brand-diag:linear-gradient(135deg,var(--purple-deep) 0%,var(--purple) 30%,var(--rose-deep) 65%,var(--rose-mid) 100%);
  --gradient-on-dark:linear-gradient(90deg,var(--purple-light) 0%,var(--lavender-light) 25%,var(--coral) 65%,var(--pink-soft) 100%);
  --gradient-cta:linear-gradient(135deg,var(--purple) 0%,var(--purple-deep) 100%);

  /* ---- type --------------------------------------------------------------- */
  --font-serif:'Fraunces',Georgia,'Times New Roman',serif;
  --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'JetBrains Mono',Menlo,ui-monospace,monospace;
  /* Fraunces is variable: display sizes want the 144 optical size */
  --opsz-display:"opsz" 144;

  --fs-hero:clamp(44px,6.5vw,78px);   /* hero headline            */
  --fs-h1:clamp(40px,5vw,64px);       /* page title               */
  --fs-h2:clamp(26px,3vw,32px);       /* section heading          */
  --fs-h3:21px;                       /* sub-heading              */
  --fs-lede:20px;                     /* hero + section lede      */
  --fs-body-lg:18px;                  /* long-form prose          */
  --fs-body:17px;                     /* default body             */
  --fs-sm:15px;                       /* card body, list items    */
  --fs-meta:14px;                     /* meta, nav, captions      */
  --fs-micro:11px;                    /* uppercase eyebrow        */

  --lh-display:1.04;
  --lh-heading:1.2;
  --lh-body:1.6;
  --lh-prose:1.65;
  --tracking-display:-.03em;
  --tracking-heading:-.02em;
  --tracking-wordmark:-.04em;
  --tracking-eyebrow:.14em;

  --fw-normal:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;

  /* ---- measure ------------------------------------------------------------ */
  --measure-prose:740px;   /* article body   */
  --measure-lede:720px;    /* hero lede      */
  --measure-narrow:880px;  /* .narrow blocks */
  --container:1200px;

  /* ---- spacing (the site's real rhythm, 4px base) ------------------------- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s8:32px; --s10:40px; --s12:48px; --s16:64px; --s20:80px; --s24:96px;
  --pad-container:28px;
  --pad-card:36px 32px;
  --pad-card-sm:24px 28px;
  --section-y:96px;

  /* ---- radii -------------------------------------------------------------- */
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:24px;
  --radius-pill:999px;

  /* ---- elevation (purple-tinted, which is the house style) ---------------- */
  --shadow-btn:0 4px 14px rgba(105,80,243,.25);
  --shadow-btn-hover:0 8px 20px rgba(105,80,243,.35);
  --shadow-card:0 12px 28px rgba(105,80,243,.10);
  --shadow-card-hover:0 18px 40px rgba(105,80,243,.12);
  --shadow-featured:0 24px 50px rgba(105,80,243,.18);
  --shadow-ink:0 20px 50px rgba(20,20,20,.12);

  /* ---- hairlines composed from the rule tokens ---------------------------- */
  --bd:1px solid var(--rule);
  --bd-strong:1px solid var(--rule-strong);
  /* tint borders: the tinted cards each carry their own, kept as tokens so no
     component file needs an rgba() literal */
  --bd-lavender:1px solid var(--lavender-deep);
  --bd-purple-tint:1px solid rgba(105,80,243,.15);
  --bd-purple-tint-2:1px solid rgba(105,80,243,.18);
  --bd-rose-tint:1px solid rgba(212,22,58,.15);
  --bd-mint:1px solid var(--mint-deep);
  --bd-sky:1px solid var(--sky-deep);
  --bd-butter:1px solid var(--butter-deep);

  /* ---- z-index ladder ----------------------------------------------------- */
  --z-base:1; --z-raised:2; --z-sticky:50; --z-overlay:60; --z-modal:70;

  /* ---- motion ------------------------------------------------------------- */
  --dur-fast:150ms; --dur:200ms; --dur-slow:300ms;
  --ease:cubic-bezier(.4,0,.2,1);
  --lift:translateY(-2px);
  --lift-lg:translateY(-4px);
}

/* ---- aliases to the brand package's --sv-* names -------------------------
   02_Brand/brand-package/tokens/colors.css ships the same brand under prefixed
   names. Anything already written against --sv-* keeps working. */
:root{
  --sv-purple:var(--purple);             --sv-purple-deep:var(--purple-deep);
  --sv-purple-2:var(--purple-2);         --sv-purple-soft:var(--purple-soft);
  --sv-purple-light:var(--purple-light); --sv-lavender:var(--lavender-light);
  --sv-rose-deep:var(--rose-deep);       --sv-rose:var(--rose-mid);
  --sv-rose-pale:var(--rose);            --sv-coral:var(--coral);
  --sv-pink-soft:var(--pink-soft);       --sv-peach-deep:var(--peach-deep);
  --sv-peach:var(--peach);               --sv-lavender-bg:var(--lavender);
  --sv-lavender-2:var(--lavender-deep);  --sv-mint:var(--mint);
  --sv-mint-deep:var(--mint-deep);       --sv-sky:var(--sky);
  --sv-sky-deep:var(--sky-deep);         --sv-butter:var(--butter);
  --sv-butter-deep:var(--butter-deep);   --sv-ink:var(--ink);
  --sv-ink-soft:var(--ink-soft);         --sv-muted:var(--muted);
  --sv-rule:var(--rule);                 --sv-rule-strong:var(--rule-strong);
  --sv-grey-50:var(--grey-50);           --sv-off-white:var(--off-white);
  --sv-white:var(--white);               --sv-green:var(--green);
  --sv-red:var(--red);                   --sv-font-serif:var(--font-serif);
  --sv-font-sans:var(--font-sans);       --sv-gradient-brand:var(--gradient-brand);
  --sv-gradient-brand-diag:var(--gradient-brand-diag);
  --sv-gradient-on-dark:var(--gradient-on-dark);
}

/* The prefers-reduced-motion override deliberately does NOT live here.
   It re-declares --dur/--lift, and a last-wins token scanner reads those zeroed
   values as the system's real motion scale. It sits in components.css instead,
   so this file states only true base values. */