/* Design tokens come from the @florid-kit/tokens package (loaded before this
   file as vendor/tokens.css by `npm run build`). The package only ships a
   light theme, so the page uses its own short color names below, mapped to
   the package's semantic tokens for light mode and to its primitive palette
   for dark mode. Components only use these names, so switching theme is just
   a matter of swapping these values. */

/* Light theme: the design system's own semantic tokens. */
:root {
  color-scheme: light;
  --bg: var(--color-container-bg-default);
  --card: var(--color-container-bg-white);
  --surface: var(--color-container-bg-medium);          /* chips, call-to-action */
  --text: var(--color-content-body);
  --heading: var(--color-content-heading);
  --muted: var(--color-content-description);
  --border: var(--color-border-tertiary);
  --link: var(--color-container-filter-default);
  --button-bg: var(--color-container-action-primary-default);
  --button-bg-hover: var(--color-container-action-primary-hover);
  --button-text: var(--color-content-action-primary);
  --brand-accent: var(--color-container-brand-accent);
  --shadow: var(--color-alpha-dark-lightest);
}

/* Dark theme: theme.js sets data-theme="dark" on <html>. The design system
   has no dark tokens yet, so we pick from its primitive palette. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--colors-noir-des-terres-900);
  --card: var(--colors-noir-des-terres-800);
  --surface: var(--colors-noir-des-terres-700);
  --text: var(--colors-blanc-brule-500);
  --heading: var(--colors-blanc-brule-50);
  --muted: var(--colors-noir-des-terres-100);
  --border: var(--colors-noir-des-terres-500);
  --link: var(--colors-lavande-valensolaire-100);
  --button-bg: var(--colors-blanc-brule-500);
  --button-bg-hover: var(--colors-blanc-brule-600);
  --button-text: var(--colors-noir-des-terres-500);
  --brand-accent: var(--colors-soleil-jaune-500);
  --shadow: var(--color-alpha-dark-light);
}

/* The brand fonts (LOccitane Serif/Sans) aren't part of the token package.
   They're used when installed on the viewer's device; otherwise we fall back
   to similar system fonts. */
:root {
  --font-serif: var(--font-family-loccitane-serif-condensed), var(--font-family-loccitane-serif), Georgia, "Times New Roman", serif;
  --font-sans: var(--font-family-loccitane-sans), system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--font-size-200);
  line-height: var(--line-height-240);
  /* Thin brand-yellow stripe across the top of the page. */
  border-top: var(--border-xl) solid var(--brand-accent);
}

h1, h2 {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-500);
  color: var(--heading);
}

.page-header,
main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-xl);
}

.page-header {
  padding-top: var(--spacing-5-xl);
  padding-bottom: var(--spacing-s);
  /* Title on the left, theme switch on the right. */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-xl);
}
h1 {
  margin: 0 0 var(--spacing-2-xs);
  font-size: var(--font-size-600);
  line-height: var(--line-height-480);
}
.subtitle { margin: 0; color: var(--muted); }
.upcoming h2 {
  margin: 0;
  font-size: var(--font-size-450);
  line-height: var(--line-height-320);
}
.tz-note {
  margin: var(--spacing-2-xs) 0 0;
  font-size: var(--font-size-150);
  color: var(--muted);
}

.status { color: var(--muted); }

/* Light/dark switch: a round icon button. The icon shows the theme you'd
   switch *to* (moon in light mode, sun in dark mode). */
.theme-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-5-xl);
  height: var(--spacing-5-xl);
  padding: 0;
  border: var(--border-m) solid var(--border);
  border-radius: var(--radius-full);
  background: var(--card);
  color: var(--heading);
  cursor: pointer;
}
.theme-toggle:hover { background: var(--surface); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

.sessions {
  list-style: none;
  padding: 0;
  margin: var(--spacing-xl) 0 var(--spacing-6-xl);
  /* As many columns as fit, each at least 320px wide (one column on phones). */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: var(--spacing-xl);
}

/* Cards in a row share the row's height; flex column lets the Join button
   sit at the bottom so buttons line up across a row. */
.card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: var(--border-m) solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-2-xl);
  box-shadow: 0 1px 3px var(--shadow);
}

.card h2 {
  margin: 0 0 var(--spacing-s);
  font-size: var(--font-size-350);
  line-height: var(--line-height-280);
}

.when { font-weight: var(--font-weight-700); margin: 0; }
.original-time { margin: 0; font-size: var(--font-size-150); color: var(--muted); }

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-s);
  margin: var(--spacing-l) 0;
  padding: 0;
  list-style: none;
}

/* Small uppercase labels, following the design system's "UI uppercase" style. */
.chip {
  background: var(--surface);
  border-radius: var(--radius-full);
  padding: var(--spacing-3-xs) var(--spacing-m);
  font-size: var(--font-size-100);
  line-height: var(--line-height-200);
  letter-spacing: var(--letter-spacing-400);
  text-transform: var(--text-case-uppercase);
}

.host { margin: 0 0 var(--spacing-s); color: var(--muted); }

.about { margin-bottom: var(--spacing-xl); }

/* Descriptions keep the line breaks people typed into the intake form,
   and are cut to 5 lines (with "…") until the card is expanded. */
.description {
  white-space: pre-line;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
}
.card.expanded .description {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: none;
}

.toggle {
  margin-top: var(--spacing-2-xs);
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  font: inherit;
  font-weight: var(--font-weight-700);
  cursor: pointer;
}
.toggle:hover { text-decoration: underline; }
.toggle[hidden] { display: none; }

/* "Show them / Hide them" sits inline after the working-hours note. */
#hours-toggle { margin-top: 0; font-size: inherit; }

/* Cards are display: flex, which would override the hidden attribute. */
.card[hidden] { display: none; }

/* Marks sessions outside the viewer's working hours once they're shown. */
.chip-warning { border: var(--border-m) solid var(--border); background: none; }

.button {
  align-self: flex-start; /* don't stretch to the card's full width */
  margin-top: auto;       /* push to the bottom of the card */
  background: var(--button-bg);
  color: var(--button-text);
  text-decoration: none;
  padding: var(--spacing-s) var(--spacing-xl);
  border-radius: var(--radius-l);
  font-weight: var(--font-weight-500);
  letter-spacing: var(--letter-spacing-100);
}
.button:hover { background: var(--button-bg-hover); }

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

/* Visible keyboard focus for links and buttons, in both themes. */
a:focus-visible,
button:focus-visible {
  outline: var(--border-l) solid var(--link);
  outline-offset: var(--spacing-3-xs);
}

/* "Want to host a session?" block above the session grid. */
.host-cta {
  margin: var(--spacing-xl) 0 var(--spacing-5-xl);
  padding: var(--spacing-3-xl);
  border: var(--border-m) solid var(--border);
  border-left: var(--border-xl) solid var(--brand-accent);
  border-radius: var(--radius-xl);
  background: var(--surface);
}
.host-cta h2 {
  margin: 0 0 var(--spacing-s);
  font-size: var(--font-size-450);
  line-height: var(--line-height-320);
}
.host-cta p { margin: 0 0 var(--spacing-xl); max-width: 60ch; }
.host-cta .button { display: inline-block; }