/* ─── Programme cream theme (user setting: theme.themePreset = programme) ───
 *
 * The surface hierarchy is warm at every level: the canvas is the deepest
 * cream, panels sit lighter on top of it, popovers lighter again. No step in
 * the stack lands on white, so a full-bleed panel still reads as cream.
 *
 * Paired with `.dark` this would produce dark text on dark chrome, so the
 * preset only applies while dark mode is off.
 */

html.theme-programme:not(.dark) {
  /* Anchored on the onboarding programme, where #faf3e9 is the dominant
   * surface rather than a near-white accent. Panels take that cream directly;
   * the canvas sits a step deeper so they still lift off it. */
  --programme-canvas: #f4ebda;
  --programme-surface: #faf3e9;
  --programme-raised: #fdf7ef;
  --programme-muted: #eee2cd;
  --programme-border: #ead9c1;
  --programme-input-border: #e2cfae;
  --programme-ink: #2a2018;
  /* Onboarding's #7a6f63 drops to 4.14:1 against the deeper canvas, so muted
   * text is nudged darker to stay above AA on every surface in the scale. */
  --programme-ink-muted: #726757;
  --programme-accent: #f6961d;

  /* Thin warm scrollbars — main content, widgets, and lists */
  --app-scrollbar-size: 5px;
  --app-scrollbar-thumb: rgba(168, 150, 127, 0.52);
  --app-scrollbar-thumb-hover: rgba(114, 103, 87, 0.72);
  --app-scrollbar-track: transparent;
  --app-scrollbar-thumb-sidebar: rgba(255, 253, 250, 0.24);
  --app-scrollbar-thumb-sidebar-hover: rgba(255, 253, 250, 0.4);

  /* shadcn tokens */
  --background: var(--programme-canvas);
  --foreground: var(--programme-ink);
  --card: var(--programme-surface);
  --card-foreground: var(--programme-ink);
  --popover: var(--programme-raised);
  --popover-foreground: var(--programme-ink);
  --primary: oklch(0.76 0.1638 64.24);
  --primary-foreground: #fffdfa;
  --secondary: var(--programme-muted);
  --secondary-foreground: #3a2e22;
  --muted: var(--programme-muted);
  --muted-foreground: var(--programme-ink-muted);
  --accent: rgba(251, 217, 172, 0.45);
  --accent-foreground: var(--programme-ink);
  --border: var(--programme-border);
  --input: var(--programme-input-border);
  --ring: var(--programme-accent);

  /* Legacy de.iterate tokens */
  --bg-light: var(--programme-canvas);
  --bg-card: var(--programme-surface);
  --glass-highlight: var(--programme-raised);
  --glass-shadow: rgba(42, 32, 24, 0.06);
  --border-color: var(--programme-border);
  --table-row-hover: rgba(246, 150, 29, 0.06);
  --nav-bar-background: var(--programme-surface);
  --nav-bar-text: var(--programme-ink);
  --nav-bar-border: var(--programme-border);
  --primary-opacity-10: rgba(246, 150, 29, 0.1);

  /* Tailwind palette tokens. Every bg-white / border-white / text-white
   * utility compiles down to var(--color-white) regardless of opacity or
   * variant, so retuning the token recolours all ~2800 usages at once rather
   * than needing a selector per opacity step. Same for the light neutrals
   * pages reach for when they want a subtle panel. */
  --color-white: var(--programme-surface);

  --color-slate-50: #f8f0e2;
  --color-gray-50: #f8f0e2;
  --color-zinc-50: #f8f0e2;
  --color-neutral-50: #f8f0e2;
  --color-stone-50: #f8f0e2;

  --color-slate-100: #f0e5d1;
  --color-gray-100: #f0e5d1;
  --color-zinc-100: #f0e5d1;
  --color-neutral-100: #f0e5d1;
  --color-stone-100: #f0e5d1;

  --color-slate-200: var(--programme-border);
  --color-gray-200: var(--programme-border);
  --color-zinc-200: var(--programme-border);
  --color-neutral-200: var(--programme-border);
  --color-stone-200: var(--programme-border);
}

/* ─── App shell ─────────────────────────────────────────────────────────── */

/* `body` picks up bg-background from @layer base, which this unlayered rule
 * outranks; the canvas needs to win because `main` is transparent. */
html.theme-programme:not(.dark),
html.theme-programme:not(.dark) body {
  background: var(--programme-canvas);
  color: var(--programme-ink);
}

html.theme-programme:not(.dark) .settings-page-wrapper,
html.theme-programme:not(.dark) .settings-page-wrapper > .flex-1 {
  background-color: var(--programme-canvas);
}

/* ─── Navigation ────────────────────────────────────────────────────────── */

html.theme-programme:not(.dark) .navigation-bar,
html.theme-programme:not(.dark) .navigation-bar.navigation-bar--programme {
  --nav-bar-background: var(--programme-surface);
  --nav-bar-border: var(--programme-border);
  --nav-bar-text: var(--programme-ink);
  color: var(--programme-ink);
}

html.theme-programme:not(.dark) .navigation-bar .tenancy-name,
html.theme-programme:not(.dark) .navigation-bar a {
  color: var(--programme-ink);
}

/* Cream pages with a hero: drop the nav bottom rule so chrome flows into the hero */
html.theme-programme:not(.dark) .flex-col:has(> main .register-hero-bar--pinned) > .navigation-bar,
html.theme-programme:not(.dark) .flex-col:has(> main .register-hero-bar) > .navigation-bar,
html.theme-programme:not(.dark) .flex-col:has(> main .dv2-header-bar) > .navigation-bar {
  box-shadow: none !important;
}

/* The primary app sidebar is white-labelled: its background and contrasting
 * text colour both come from the customer's brand config, so it is left
 * alone. Only the secondary in-page sidebar follows the preset. */
html.theme-programme:not(.dark) .split-page-secondary-sidebar {
  background-color: var(--programme-surface);
  border-color: var(--programme-border);
}

/* Retuning --color-white flattens `hover:bg-white` against the card it sits
 * on, so hover borrows the raised tone to keep the affordance. */
html.theme-programme:not(.dark) .hover\:bg-white:hover {
  background-color: var(--programme-raised);
}

/* ─── Forms & tables ────────────────────────────────────────────────────── */

html.theme-programme:not(.dark) input:not([type='checkbox']):not([type='radio']),
html.theme-programme:not(.dark) textarea,
html.theme-programme:not(.dark) select,
html.theme-programme:not(.dark) [role='combobox'] {
  background-color: var(--programme-raised);
  border-color: var(--programme-input-border);
}

html.theme-programme:not(.dark) table tbody tr:hover {
  background-color: var(--table-row-hover);
}

html.theme-programme:not(.dark) .shadow-sm,
html.theme-programme:not(.dark) .shadow {
  --tw-shadow-color: var(--glass-shadow);
}

/* ─── Dashboard ─────────────────────────────────────────────────────────── */

html.theme-programme:not(.dark) .dv2-grid-container {
  --dv2-po-bg: var(--programme-surface);
}