/**
 * One palette for every page, in three skins.
 *
 * The tokens used to be pasted into each page's own <style>, which meant six
 * copies to keep in step and, worse, a few dozen colours written straight into
 * the rules as rgba(255,255,255,.05). Those only work over a dark background:
 * the moment a light theme exists they turn cards invisible. So every surface,
 * line and shadow now has a name, and each theme says what that name means.
 *
 * Adding a theme means filling in the same list of names. Nothing else.
 */

/* ------------------------------------------------------------------ tokens */

/*
 * Parlour. A barber's back room: walnut, brass and cream.
 *
 * Brass is the accent, so amber cannot also mean "no-show" - that warning is
 * burnt orange here, which reads as a problem next to gold rather than as more
 * gold. Text on a brass button is near-black, because cream on brass is barely
 * four points of contrast and unreadable at a glance.
 */
:root,
[data-theme="parlour"] {
  color-scheme: dark;

  --bg: #15100c;
  --panel: rgba(38, 29, 22, .74);
  --popup: #221a13;

  --ink: #f4ece0;
  --ink-dim: #c7b6a2;
  --ink-faint: #8d7c69;

  --accent: #c8963e;
  --accent-2: #8f6420;
  --on-accent: #1e1509;

  --good: #6fbf8b;
  --warn: #e0653c;
  --bad: #d9544a;

  --line: rgba(240, 220, 190, .14);
  --line-soft: rgba(240, 220, 190, .09);
  --line-strong: rgba(240, 220, 190, .30);

  --surface: rgba(255, 240, 220, .035);
  --surface-2: rgba(255, 240, 220, .018);
  --surface-hover: rgba(255, 240, 220, .09);
  --surface-strong: rgba(255, 240, 220, .12);
  --field: rgba(255, 240, 220, .05);

  --shadow: rgba(0, 0, 0, .55);
  --glow: rgba(200, 150, 62, .10);

  /* One hue per barber, carried through every view. Amber and green are
     deliberately absent: those two mean no-show and completed. */
  --barber-1: #7fa8d4;
  --barber-2: #a98bd4;
  --barber-3: #5fb8b0;
  --barber-4: #d98fa8;
  --barber-5: #8f96d9;
  --barber-6: #cf9070;

  --font-display: Georgia, 'Iowan Old Style', 'Palatino Linotype', ui-serif, serif;
  --font-body: Inter, system-ui, sans-serif;
  /* The three the shopfront uses, and only the shopfront.
     A face chosen to look like a barbershop above the door is not one anybody
     can read a diary in all day, so these are kept out of --font-display
     deliberately: sign is the shop's name, quote is its tagline, label is the
     small upper-case headings over each section. */
  --font-sign: 'Playfair Display', Georgia, ui-serif, serif;
  --font-quote: 'Playfair Display', Georgia, ui-serif, serif;
  --font-label: Inter, system-ui, sans-serif;
}

/*
 * Linen. Warm paper and a deep green, for a shop that wants daylight.
 *
 * The overlays invert in role rather than in value: a raised card on cream is
 * whiter than its background, while a hover is a green tint pressed into it.
 * Reusing the dark theme's arithmetic here would produce white-on-white.
 */
[data-theme="linen"] {
  color-scheme: light;

  --bg: #f2efe6;
  --panel: rgba(253, 251, 244, .90);
  --popup: #fffdf8;

  --ink: #2a2620;
  --ink-dim: #55503f;
  /* Darker than the dark themes' equivalent. The same lightness that reads as
     "quiet" against walnut is simply hard to read against paper, and this tone
     carries phone numbers and buffer times that people actually need. */
  --ink-faint: #756e60;

  --accent: #2f5d4a;
  --accent-2: #24483a;
  --on-accent: #f7f5ee;

  --good: #3f7d52;
  --warn: #b06a1f;
  --bad: #a83f39;

  --line: rgba(62, 54, 40, .16);
  --line-soft: rgba(62, 54, 40, .09);
  --line-strong: rgba(62, 54, 40, .34);

  --surface: rgba(255, 255, 255, .72);
  --surface-2: rgba(255, 255, 255, .42);
  --surface-hover: rgba(47, 93, 74, .09);
  --surface-strong: rgba(47, 93, 74, .14);
  --field: #fffdf8;

  --shadow: rgba(60, 50, 35, .18);
  --glow: rgba(47, 93, 74, .07);

  --barber-1: #3a6ea8;
  --barber-2: #6b4fa0;
  --barber-3: #2f7f78;
  --barber-4: #a8496b;
  --barber-5: #4a5aa0;
  --barber-6: #9c5a34;

  --font-display: Georgia, 'Iowan Old Style', 'Palatino Linotype', ui-serif, serif;
  --font-body: Inter, system-ui, sans-serif;
  /* Daylight wants the shop's name set enormous and plain, with the tagline
     carrying the character instead. */
  --font-sign: Inter, system-ui, sans-serif;
  --font-quote: 'Instrument Serif', Georgia, ui-serif, serif;
  --font-label: Inter, system-ui, sans-serif;
}

/* What the product looked like before it had a barber in mind. Kept so the
   choice is a choice, and so nothing that was tuned against it is lost. */
[data-theme="midnight"] {
  color-scheme: dark;

  --bg: #101522;
  --panel: rgba(28, 36, 54, .74);
  --popup: #1b2333;

  --ink: #f4f6fb;
  --ink-dim: #b4bccf;
  --ink-faint: #7a849c;

  --accent: #6b98ff;
  --accent-2: #8a7bff;
  /* Was white, which against this blue is 2.6:1 - under the 4.5:1 floor and
     visibly soft on a button. Found by deriving the same palette
     arithmetically in src/core/palette.mjs and comparing. */
  --on-accent: #0d111c;

  --good: #3ddc97;
  --warn: #ffb45c;
  --bad: #ff6b81;

  --line: rgba(210, 220, 255, .14);
  --line-soft: rgba(210, 220, 255, .09);
  --line-strong: rgba(210, 220, 255, .30);

  --surface: rgba(255, 255, 255, .035);
  --surface-2: rgba(255, 255, 255, .018);
  --surface-hover: rgba(255, 255, 255, .09);
  --surface-strong: rgba(255, 255, 255, .12);
  --field: rgba(255, 255, 255, .05);

  --shadow: rgba(0, 0, 0, .55);
  --glow: rgba(107, 152, 255, .10);

  --barber-1: #6b98ff;
  --barber-2: #a78bff;
  --barber-3: #4fd1c5;
  --barber-4: #ff9ec4;
  --barber-5: #f5c750;
  --barber-6: #74e0a0;

  --font-display: Inter, system-ui, sans-serif;
  --font-body: Inter, system-ui, sans-serif;
  /* A tube-bent face, for the neon sign over the shop's own page. */
  --font-sign: Monoton, 'Bebas Neue', Impact, sans-serif;
  --font-quote: Inter, system-ui, sans-serif;
  --font-label: 'Bebas Neue', Impact, sans-serif;
}

/*
 * Chrome. Black, acid yellow, and nothing held back.
 *
 * The only theme whose accent is brighter than its ink, which is why
 * --on-accent is near-black here: white on this yellow is about 1.3 to 1 and
 * simply not there. Its warn and bad had to move too - a burnt orange next to
 * this yellow reads as more yellow rather than as a problem.
 */
[data-theme="chrome"] {
  color-scheme: dark;

  --bg: #0b0b0b;
  --panel: rgba(21, 21, 21, .82);
  --popup: #161616;

  --ink: #ffffff;
  --ink-dim: #b4b4b4;
  --ink-faint: #8c8c8c;

  --accent: #e8ff3d;
  --accent-2: #b6cc22;
  --on-accent: #0b0b0b;

  --good: #4fe08a;
  --warn: #ff8a3d;
  --bad: #ff4d4d;

  --line: rgba(255, 255, 255, .22);
  --line-soft: rgba(255, 255, 255, .12);
  --line-strong: rgba(255, 255, 255, .45);

  --surface: rgba(255, 255, 255, .05);
  --surface-2: rgba(255, 255, 255, .025);
  --surface-hover: rgba(255, 255, 255, .12);
  --surface-strong: rgba(255, 255, 255, .17);
  --field: rgba(255, 255, 255, .06);

  --shadow: rgba(0, 0, 0, .7);
  --glow: rgba(232, 255, 61, .12);

  /* Yellow is the accent here, so it cannot also be a barber. */
  --barber-1: #6bb8ff;
  --barber-2: #c08bff;
  --barber-3: #4fd1c5;
  --barber-4: #ff8fb4;
  --barber-5: #9aa0ff;
  --barber-6: #ff9d6b;

  --font-display: Inter, system-ui, sans-serif;
  --font-body: Inter, system-ui, sans-serif;
  --font-sign: Anton, Impact, sans-serif;
  --font-quote: Inter, system-ui, sans-serif;
  --font-label: Anton, Impact, sans-serif;
}

/* -------------------------------------------------------------------- base */

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(ellipse 60% 40% at 20% 0%, var(--glow), transparent 60%),
    var(--bg);
  color: var(--ink);
  font: 15px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; }

a { color: var(--accent); }

/* ---------------------------------------------------------- native controls */

/*
 * Why a dropdown was unreadable.
 *
 * A <select>'s open list is drawn by the browser, not by the page. With no
 * colour-scheme declared it used the operating system's white panel while the
 * options inherited the page's near-white text, so every choice but the
 * highlighted one vanished. Declaring the scheme per theme - dark for Parlour
 * and Midnight, light for Linen - makes the browser draw the list, the date
 * and time pickers, and the scrollbars to match.
 *
 * The explicit option colours below are belt and braces for anything that
 * ignores colour-scheme, and cost nothing where it is honoured.
 */
select, option, input, textarea, button { font-family: inherit; }

select {
  background: var(--field);
  color: var(--ink);
  border: 1px solid var(--line);
}

option {
  background: var(--popup);
  color: var(--ink);
}

/* Chrome draws these glyphs in a fixed near-black that disappears on a dark
   field. Inverting on the dark themes is the only way to reach them. */
[data-theme="parlour"] ::-webkit-calendar-picker-indicator,
[data-theme="midnight"] ::-webkit-calendar-picker-indicator,
:root:not([data-theme]) ::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(.65);
  cursor: pointer;
}
::-webkit-calendar-picker-indicator:hover { opacity: 1; }

:where(input, select, textarea):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset: 1px;
}

/* ------------------------------------------------------------------ motion */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}