/* Platform tokens (design log entries 25 and 39; the UI baseline of entry 44),
   shared by the member and staff apps and mirrored by the studio website. These
   are the platform's and never a studio's: spacing, row height, the modality
   spine, the pill control, the type roles, and the way every other colour is
   derived from the two the studio picks. A studio's choices arrive as data-*
   attributes and a few custom properties set by theme.js from GET /member/tenant .theme:

     html[data-ground="light|dark"]              the ground preset (--ground is the studio's colour)
     html[data-type-pairing="<pairing>"]         which maintained pairing sets the type roles
     html[data-layout="standard"]                the one layout shipped so far
     --accent, --ground, --night                 the studio's accent and ground colour (night = its ground when the preset is dark)
     --modality (per element)                    a class type's colour from the studio's ramp

   Night mode ("after dark"): the OS asks for dark, or the studio's ground preset is
   dark. Either way the same derived tokens flip; a light-ground studio goes to the
   platform's night ground, a dark-ground studio keeps its own. */

:root {
  /* spacing scale */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* rows and controls */
  --row-h: 84px;             /* a class row, a booking row */
  --row-h-sm: 70px;          /* a row on Home and in a list that already said the day */
  --spine-w: 3px;            /* the modality spine on a class row */
  --time-w: 74px;            /* the mono time column, so every row lines up */
  --pill-h: 36px;            /* every pill control */
  --pill-r: 999px;           /* fully rounded */
  --pill-px: 16px;
  --cta-h: 56px;             /* the one big button at the bottom of a page */
  --radius: 16px;            /* a card */
  --radius-sm: 10px;
  --radius-sheet: 24px;      /* a sheet's top corners */
  --touch: 44px;

  /* type roles; the pairing decides the faces and the case */
  --font-body: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font-body);
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --mono-weight: 500;
  --mono-tracking: .06em;         /* a time */
  --label-tracking: .16em;        /* a mono label, uppercase */
  --label-weight: 500;
  --display-weight: 700;          /* h1 */
  --display-tracking: -.02em;
  --name-font: var(--font-body);  /* a class name */
  --name-weight: 700;
  --name-size: 1rem;
  --name-tracking: .05em;
  --name-case: uppercase;

  /* the studio's (defaults are the platform's neutral bone) */
  --accent: #1f4d3a;
  --ground: #f3eee7;
  --night: #0c0b0a;           /* the ground after dark; a dark-ground studio's own colour (theme.js) */
  --on-ground: #100e0d;       /* ink */
  --on-night: #f3eee7;
  --modality: var(--accent);

  /* derived: everything below follows from the ground, the ink and the accent */
  --bg: var(--ground);
  --text: var(--on-ground);
  --muted: color-mix(in srgb, var(--text) 66%, var(--bg));           /* 5.5:1 on the ground */
  --faint: color-mix(in srgb, var(--text) 50%, var(--bg));           /* a disabled day, a placeholder: never for text that must be read */
  --line: color-mix(in srgb, var(--text) 9%, var(--bg));
  --tint: color-mix(in srgb, var(--text) 5%, var(--bg));             /* a quiet fill: an avatar, a chip that is a fact */
  --card: color-mix(in srgb, #fff 45%, var(--bg));
  --ink: var(--text);                 /* a solid control */
  --on-ink: var(--bg);
  --accent-text: color-mix(in srgb, var(--accent) 78%, #000);        /* the accent as text: eyebrows, links, counts */
  --accent-tint: color-mix(in srgb, var(--accent) 22%, var(--card)); /* the "yours" chip */
  --accent-tint-ink: color-mix(in srgb, var(--accent) 72%, #000);
  --row-mine: color-mix(in srgb, var(--accent) 9%, var(--bg));       /* a booked row warms with its chip */
  --accent-ink: #fff;                 /* text on a solid accent fill (theme.js picks white or ink) */
  --danger: #a9453a;                  /* brick */
  --ok: #3f5d4b;
  --warn: #7d5511;
  --shadow: 0 8px 24px rgb(0 0 0 / .18);
}

html[data-type-pairing="inter-geist-mono"] {
  --font-body: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* The serif pairing: Instrument Serif for display and class names (set in sentence case, larger, regular weight);
   Public Sans carries the body and takes the mono roles too, a touch heavier and wider so a time still reads as a time. */
html[data-type-pairing="instrument-serif-public-sans"] {
  --font-body: 'Public Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Instrument Serif', Georgia, "Times New Roman", serif;
  --font-mono: 'Public Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono-weight: 600;
  --mono-tracking: .1em;
  --label-tracking: .18em;
  --label-weight: 600;
  --display-weight: 400;
  --display-tracking: -.01em;
  --name-font: var(--font-display);
  --name-weight: 400;
  --name-size: 1.3125rem;
  --name-tracking: 0;
  --name-case: none;
}

/* after dark: the same names, flipped */
:root[data-ground="dark"] {
  color-scheme: dark;
  --bg: var(--night);
  --text: var(--on-night);
  --muted: color-mix(in srgb, var(--text) 62%, var(--bg));
  --faint: color-mix(in srgb, var(--text) 45%, var(--bg));
  --line: color-mix(in srgb, var(--text) 11%, var(--bg));
  --tint: color-mix(in srgb, var(--text) 7%, var(--bg));
  --card: color-mix(in srgb, var(--text) 5%, var(--bg));
  --accent-text: color-mix(in srgb, var(--accent) 70%, #fff);
  --accent-tint: color-mix(in srgb, var(--accent) 28%, var(--bg));
  --accent-tint-ink: color-mix(in srgb, var(--accent) 55%, #fff);
  --row-mine: color-mix(in srgb, var(--accent) 12%, var(--bg));
  --danger: #c4574a;
  --ok: #7fa38c;
  --warn: #d9a04a;
  --shadow: 0 8px 24px rgb(0 0 0 / .5);
}
@media (prefers-color-scheme: dark) {
  :root { /* :root, not html: it must outrank the :root defaults above */
    color-scheme: dark;
    --bg: var(--night);
    --text: var(--on-night);
    --muted: color-mix(in srgb, var(--text) 62%, var(--bg));
    --faint: color-mix(in srgb, var(--text) 45%, var(--bg));
    --line: color-mix(in srgb, var(--text) 11%, var(--bg));
    --tint: color-mix(in srgb, var(--text) 7%, var(--bg));
    --card: color-mix(in srgb, var(--text) 5%, var(--bg));
    --accent-text: color-mix(in srgb, var(--accent) 70%, #fff);
    --accent-tint: color-mix(in srgb, var(--accent) 28%, var(--bg));
    --accent-tint-ink: color-mix(in srgb, var(--accent) 55%, #fff);
    --row-mine: color-mix(in srgb, var(--accent) 12%, var(--bg));
    --danger: #c4574a;
    --ok: #7fa38c;
    --warn: #d9a04a;
    --shadow: 0 8px 24px rgb(0 0 0 / .5);
  }
}

/* The pill control: one geometry, three weights. A pill is something to press.
   solid   = do it (Reserve, Check in): ink on the ground
   tint    = the accent's warm fill, with a check. A place a member holds (Booked, Waitlist · #4) is no longer
             drawn with it: that is a status, not a control (the member app's doors.css .status-chip)
   outline = available but secondary (Join waitlist, Cancel) */
.pill-ctl {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--pill-h); min-width: var(--pill-h); padding: 0 var(--pill-px);
  border-radius: var(--pill-r); border: 1px solid transparent;
  font: 600 .8125rem/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer;
}
.pill-ctl[data-weight="solid"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.pill-ctl[data-weight="tint"] { background: var(--accent-tint); color: var(--accent-tint-ink); }
.pill-ctl[data-weight="tint"]::before { content: ""; width: 7px; height: 4px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-1px) rotate(-45deg); flex: 0 0 auto; }
.pill-ctl[data-weight="outline"] { background: transparent; border-color: var(--line); color: var(--muted); }
.pill-ctl:disabled { opacity: .5; cursor: default; }

/* mono for times and labels */
.mono { font-family: var(--font-mono); font-weight: var(--mono-weight); letter-spacing: var(--mono-tracking); font-variant-numeric: tabular-nums; }
.label { font-family: var(--font-mono); font-weight: var(--label-weight); font-size: .6875rem; letter-spacing: var(--label-tracking); text-transform: uppercase; }
/* a section head: a label on a rule in the ink, the list's hairlines below it */
.rule-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin: 0; padding-bottom: 10px; border-bottom: 1px solid var(--text); color: var(--muted); }
.rule-head .n { color: var(--accent-text); }