/* Klokhuis — the default theme.
 *
 * A theme file is the single source of truth for what the site looks like. It
 * declares the whole `--cms-*` contract and nothing else: no selectors, no
 * component rules, no Tailwind. styles.css consumes these through `@theme
 * inline` and never redeclares them.
 *
 * Swapping this file for another one re-themes the entire app. Adding a slot
 * means adding it to every theme file and to the `@theme inline` block.
 *
 * Loaded at runtime via <link id="active-theme-link"> — seeded in index.html so
 * it is present on first paint, then repointed by ThemeService.
 */
:root {
  /* Brand */
  --cms-primary: #d97706;
  --cms-primary-hover: #b45309;
  --cms-on-primary: #ffffff;

  /* Surfaces */
  --cms-surface: #ffffff;
  --cms-surface-muted: #fafaf9;
  --cms-surface-inverse: #292524;

  /* Text */
  --cms-text: #292524;
  --cms-text-muted: #57534e;
  --cms-text-subtle: #78716c;

  /* Lines */
  --cms-border: #e7e5e4;
  --cms-border-hover: #fcd34d;
  --cms-border-accent: rgb(253 230 138 / 0.6);

  /* Accents */
  --cms-accent-soft: #fffbeb;
  /* Between accent-soft and primary: selected rows, badges. */
  --cms-accent-muted: #fef3c7;
  --cms-accent-strong: #b45309;

  /* Status — constant across themes; a badge's urgency shouldn't shift with
     the brand palette. */
  --cms-alert: #dc2626;
  --cms-on-alert: #ffffff;

  /* Shape */
  --cms-radius-card: 1rem;
  --cms-radius-button: 0.75rem;
  --cms-radius-control: 0.5rem;

  /* Type — both faces are loaded by the font link in index.html. */
  --cms-font-heading: 'Fraunces', ui-serif, Georgia, serif;
  --cms-font-body: 'Source Sans 3', ui-sans-serif, system-ui, sans-serif;

  /* Compound values. A theme can change the kind of value a slot holds — a
     flat colour here instead of a gradient — with no code change. */
  /* Header geometry. The collapsed values apply once the page is scrolled. */
  --cms-nav-height: 70px;
  --cms-nav-height-scrolled: 4rem;
  --cms-nav-gap: 0.75rem;
  --cms-brand-mark-size: 3rem;
  --cms-brand-mark-size-scrolled: 2.5rem;
  /* Logo plate. */
  --cms-brand-plate-padding: 5px 12px;
  --cms-brand-plate-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  /* Corrections for a supplied logo file: how much it is off its
     optical centre, and how much of its canvas is baked-in margin. */
  --cms-brand-logo-nudge-y: -0.15rem;
  --cms-brand-logo-scale: 1.18;
  --cms-brand-name-size: 1.5rem;
  --cms-brand-name-size-scrolled: 1.125rem;
  --cms-nav-link-padding-x: 0.75rem;
  --cms-nav-link-padding-y: 0.5rem;
  --cms-nav-font-size: 1.125rem;
  --cms-nav-font-size-scrolled: 1rem;
  --cms-nav-font-size-mobile: 0.875rem;
  --cms-nav-cta-font-size-scrolled: 0.875rem;

  /* Layout — the `.flow` primitive's one shared knob. No consumer wired up
     yet; this exists so the token is present the day one is. */
  --cms-layout-gap: 2rem;

  --cms-hero-surface: linear-gradient(to bottom right, #fef3c7, #fff7ed, #fff1f2);
}