/* =====================================================================
   salons.site booking — THEME TOKENS
   The ONLY file in site/ that holds colour literals, font families,
   radii and motion constants. Swap this file (or add an html[data-theme]
   block) to re-brand a salon. Everything else reads var(--*).
   Default = salons.site Doorway D2 R6 v1.1 (brief §1.3) + S2 rounded scale (§2).
   No yellow token exists; every hue here sits outside 40–65°.
   ===================================================================== */

/* Fonts: SIL OFL 1.1, vendored locally (see fonts/README.txt). No CDN. */
@font-face{font-family:"Host Grotesk";src:url(fonts/HostGrotesk-var.ttf) format("truetype");font-weight:300 800;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/Inter-var.ttf) format("truetype");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(fonts/GeistMono-var.ttf) format("truetype");font-weight:100 900;font-display:swap}
@font-face{font-family:"Newsreader";src:url(fonts/Newsreader-Italic-var.ttf) format("truetype");font-style:italic;font-weight:200 800;font-display:swap}
@font-face{font-family:"Fraunces";src:url(fonts/Fraunces-var.ttf) format("truetype");font-weight:100 900;font-display:swap}

:root{
  /* ---- colour: salons.site default ---- */
  --ink:#17121D;            /* text, CTA fill */
  --paper:#F5F1F2;          /* page / sheet ground */
  --card:#FFFFFF;           /* rows, pills, inputs */
  --secondary:#564E5A;      /* body copy on paper (7.12:1) */
  --muted:#6C6470;          /* labels, meta (5.07:1 on paper) */
  --line:rgba(23,18,29,.10);
  --line-strong:rgba(23,18,29,.16);
  --brand:#4B2E83;          /* Doorway violet — light surfaces only */
  --on-brand:#FFFFFF;
  --brand-tint:#ECE7F6;     /* duration ghost, Anyone card */
  --brand-on-dark:#B9A6F2;
  --board:#1C1525;          /* success layer */
  --on-board:#F5F1F2;
  --muted-on-board:#8F889C;
  --spark:#EFC8AA;          /* live salons.site champagne italic, dark surfaces only (hue ≈26°) */
  --error:#9B1C3A;          /* inline field errors (hue ≈346°, 7.6:1 on paper) */
  --backdrop:#0D0A12;       /* behind the scaled salon page */
  --cta:var(--ink);
  --on-cta:var(--paper);
  --focus:var(--ink);
  --focus-on-dark:var(--on-board);
  --scrim:rgba(13,10,18,.46);
  --sheen:rgba(255,255,255,.30);
  --dot-on-brand:rgba(255,255,255,.38);
  --plate-on-board:rgba(245,241,242,.06);
  --line-on-board:rgba(245,241,242,.16);
  --dash-on-board:rgba(245,241,242,.26);
  --chip-on-board:rgba(185,166,242,.14);
  --skeleton:color-mix(in srgb,var(--ink) 8%,var(--paper));
  --photo-a:color-mix(in srgb,var(--brand) 30%,var(--paper));
  --photo-b:color-mix(in srgb,var(--brand) 55%,var(--ink));
  --ghost-line:color-mix(in srgb,var(--brand) 24%,transparent);

  /* ---- elevation ---- */
  --shadow-plate:0 1px 0 rgba(23,18,29,.04),0 10px 30px -18px rgba(23,18,29,.35);
  --shadow-lift:0 14px 30px -14px rgba(23,18,29,.60);
  --shadow-card:0 -20px 60px -20px rgba(0,0,0,.45);
  --shadow-panel:0 40px 120px -30px rgba(0,0,0,.60);
  --shadow-brand:0 12px 26px -12px color-mix(in srgb,var(--brand) 85%,#000);

  /* ---- type ---- */
  --f-display:"Host Grotesk",Inter,system-ui,sans-serif;
  --f-ui:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --f-accent:"Newsreader",Georgia,serif;
  --display-w:500;

  /* ---- rounded system (brief §2): tap-once = pill, holds content = 20, holds the flow = 28 ---- */
  --r-xs:8px; --r-sm:14px; --r-md:20px; --r-lg:28px; --r-ticket:24px; --r-pill:999px;

  /* ---- targets ---- */
  --tap:44px; --cta-h:56px; --row:52px;

  /* ---- motion tokens (brief §5.1). Springs: "stiffness damping" (mass 1) ---- */
  --bk-spring-sheet:260 28;
  --bk-spring-snap:500 30;
  --bk-spring-fly:300 30;
  --bk-spring-soft:220 26;
  --bk-ease-out:cubic-bezier(.2,.7,.2,1);
  --bk-ease-emph:cubic-bezier(.2,0,0,1);
  --bk-ease-press:cubic-bezier(.3,0,.5,1);
  --bk-dur-press:90;
  --bk-dur-leave:140;
  --bk-dur-stagger:320;
  --bk-dur-rm:150;
}

/* ---- ONE secondary SAMPLE tenant layer (?theme=tenant, "Rosa & Rye").
   A salon may override ONLY brand, brand-tint, brand-on-dark, paper, board,
   muted-on-board and the display font (AC-22). ---- */
html[data-theme=tenant]{
  --brand:#7A2E4F;
  --brand-tint:#F4E6EC;
  --brand-on-dark:#E7B3C8;
  --paper:#F7F2EE;
  --board:#24161D;
  --muted-on-board:#9A929F;  /* lifted so meta on the ticket plate stays ≥4.5:1 */
  --f-display:"Fraunces",Georgia,serif;
  --display-w:420;
}