/*
 * theme.css — WRITTEN BY THE PLATFORM. Do not edit.
 *
 * Palette: Your colours (custom)
 * Source colours: #240f07 #3a2e28 #fff8f0 #ff6b35 #a85b28 #ffffff
 *
 * Every value below is either one of those five or derived from them, and each
 * one is contrast-corrected against this palette's own background. Consume
 * them with var(--token); never write a colour value in app code.
 */

:root {
  --canvas: #fff8f0;
  --surface: #fffcf8;
  --surface-2: #f4ece4;
  --border: #e0d7cf;
  --border-strong: #bdb2aa;
  --ink: #3a2e28;
  --muted: #746c65;
  --accent: #ff6b35;
  --accent-hover: #d95b2d;
  --accent-ink: #240f07;
  --accent-text: #a85b28;
  --accent-strong: #a84623;
  --accent-soft: #ffe4d6;
  --accent-border: #ffb99c;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #e3eadb;
  --success-strong: #137638;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f6e4d4;
  --warning-strong: #a64c08;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f7ded7;
  --danger-strong: #b91c1c;}

/* ====================================================================
 * app.css — THIS APP'S OWN CSS. Yours to write. Ships empty.
 *
 * design.css is a FLOOR, not a ceiling.
 *
 * For a long time it was both, and the cost was measurable: an app could
 * not write a single CSS rule, so every app built here had the same 10px
 * radius, the same Public Sans at the same 15px, the same 1px borders and
 * the same soft shadow. Only fourteen COLOUR tokens ever differed. Three
 * apps in a row came out looking like the same product in three coats of
 * paint, which is what this file exists to end.
 *
 * It loads AFTER design.css and theme.css, so anything here wins.
 *
 * ---- THE FIRST LEVER: RETUNE THE SYSTEM ---------------------------
 *
 * A :root block here re-tunes every component at once — nothing is
 * restyled one class at a time. These are the tokens that decide an app's
 * CHARACTER, and they are the fastest way to make two apps look nothing
 * alike:
 *
 *   --radius-sm --radius --radius-lg   0 is brutal, 4 is crisp, 18 is soft
 *   --font-sans --font-mono            a display face changes more than colour
 *   --t-xs … --t-5xl                   the type scale, and how far it ramps
 *   --lh --lh-tight --track-tight      density and tone
 *   --s-1 … --s-12                     the spacing scale: tight or generous
 *   --shadow --shadow-raised           flat, or lifted
 *   --border --border-strong widths    hairline, or heavy and drawn
 *   --dur-1 --dur-2 --ease             brisk, or languid
 *   --content-max --measure            a wide dashboard or a narrow reading page
 *
 * COLOUR IS THE ONE EXCEPTION, and it is not a technicality: the owner
 * picked the palette on the approval card before you built anything, and
 * it is the only part of the look they chose themselves. theme.css holds
 * it. Write var(--accent), var(--ink), var(--canvas) — never a hex, an
 * rgb() or an hsl(), here or anywhere. The validator refuses those.
 *
 * ---- THE SECOND LEVER: WRITE WHAT IS NOT THERE ---------------------
 *
 * design.css covers the ordinary furniture. It does NOT cover the one
 * screen that makes this app itself — a timer's dial, a board's columns,
 * a chart, a seating plan, a game grid. Write those here, in full, and
 * name them for what they are (.dial, .board-col), never .card-2.
 *
 * Compose the primitives where they fit and write your own where they do
 * not. An app that used only the frozen classes and added nothing shipped
 * 160 component classes and zero rules of its own — and read as generated,
 * because the system's ceiling had become the app's ceiling.
 *
 * Keep using the tokens in what you write. A rule built on var(--s-4) and
 * var(--radius) stays consistent with everything around it and follows the
 * app when its character changes; one built on 16px and 10px does not.
 * ==================================================================== */

:root {
  /* A bright, friendly, rounded feel — the single biggest lever for tone. */
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent), 0 1px 1px color-mix(in srgb, var(--ink) 4%, transparent);
  --shadow-raised: 0 12px 28px color-mix(in srgb, var(--ink) 12%, transparent);
}

/* ---------------------------------------------------------------------
   Subject tags — playful colour-coding without ever naming a colour.
   Each swatch rotates the hue of the accent-soft token via a CSS filter,
   which transforms whatever the owner's palette already is rather than
   inventing a new one. */
.subject-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-strong);
  border: 1px solid var(--accent-border);
  font-size: var(--t-xs);
  font-weight: 600;
  white-space: nowrap;
}
.subject-swatch-1 { filter: hue-rotate(0deg); }
.subject-swatch-2 { filter: hue-rotate(45deg) saturate(1.05); }
.subject-swatch-3 { filter: hue-rotate(95deg) saturate(1.05); }
.subject-swatch-4 { filter: hue-rotate(150deg) saturate(1.1); }
.subject-swatch-5 { filter: hue-rotate(210deg) saturate(1.1); }
.subject-swatch-6 { filter: hue-rotate(275deg) saturate(1.1); }

/* A tutor/student avatar with no photo: initials on a soft accent tile,
   rotated per person so a whole grid of tutors is not one flat colour. */
.people-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 700;
  font-size: var(--t-lg);
  flex-shrink: 0;
}
.people-avatar-sm {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  font-size: var(--t-sm);
}

/* Rating stars rendered from the icon sprite, coloured with the accent. */
.rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent-text);
  font-weight: 600;
}

/* A slot pill inside a tutor's booking list. */
.slot-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: box-shadow 200ms ease-out, transform 200ms ease-out;
}
.slot-pill:hover {
  box-shadow: var(--shadow-raised);
  transform: translateY(-1px);
}
.slot-pill.is-booked {
  opacity: 0.6;
}

/* Sidebar user block: tint the built-in avatar with the accent. */
.sidebar-foot .avatar {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

@media (prefers-reduced-motion: reduce) {
  .slot-pill,
  .card { transition: none !important; }
}