:root {
  /* Colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray-light: #f5f5f5;
  --color-gray-soft: #e8e5e0;
  --color-gray: #666666;
  --color-gray-dark: #333333;

  /* Surfaces */
  --color-surface: #fbfaf8;
  --color-surface-strong: #f1eee8;
  --surface-base: #faf9f6;
  --surface-raised: #ffffff;
  --surface-sunken: #f3f1ec;
  --surface-hover: #f6f4ee;

  /* Semantic accents (restrained, monochrome-friendly) */
  --color-success: #1f6f43;
  --color-success-soft: #eaf3ee;
  --color-warning: #8a5a1a;
  --color-warning-soft: #f6efde;
  --color-danger: #8c2a2a;
  --color-danger-soft: #f7eaea;

  /* Focus */
  --color-focus: rgba(0, 0, 0, 0.14);
  --color-focus-strong: rgba(0, 0, 0, 0.32);

  /* Typography */
  --font-serif: 'Georgia', 'Times New Roman', serif;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;

  /* Type scale */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.85rem;     /* 13.6px */
  --text-base: 0.95rem;   /* 15.2px */
  --text-md: 1rem;        /* 16px */
  --text-lg: 1.15rem;     /* 18.4px */
  --text-xl: 1.35rem;     /* 21.6px */
  --text-2xl: 1.65rem;    /* 26.4px */
  --text-3xl: 2rem;       /* 32px */

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;

  /* Borders */
  --border-width: 1px;
  --border-color: var(--color-black);
  --border-color-strong: rgba(0, 0, 0, 0.55);
  --border-color-soft: rgba(0, 0, 0, 0.12);
  --border-color-hairline: rgba(0, 0, 0, 0.12);

  /* Agenda grid lines — stratified for real-monitor visibility. */
  --agenda-line-subtle: rgba(0, 0, 0, 0.10);
  --agenda-line: rgba(0, 0, 0, 0.18);
  --agenda-line-strong: rgba(0, 0, 0, 0.32);
  --agenda-line-header: rgba(0, 0, 0, 0.42);

  /* Agenda "today" column — clearly current without breaking the calm palette. */
  --agenda-today-tint: #ece8df;
  --agenda-today-tint-header: #e3ded2;
  --agenda-today-bar: var(--color-black);

  /* Closed hours / breaks / blockers — darker than the base surfaces so
     unavailable time reads clearly against open time. */
  --agenda-unavailable-a: #eae7e0;
  --agenda-unavailable-b: #ddd9cf;
  /* Outside-of-hours grid slots — a lighter, softer hatch than blockers. */
  --agenda-closed-a: #f3f1ec;
  --agenda-closed-b: #ece8de;

  /* Modal — solid ring (1px halo) keeps the shell contained against the
     dark backdrop; the second layer is the lift shadow. */
  --modal-border: rgba(0, 0, 0, 0.32);
  --modal-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), 0 28px 80px rgba(0, 0, 0, 0.38);
  --modal-backdrop: rgba(8, 8, 8, 0.58);
  --border-radius: 0;
  --radius-sm: 0.4rem;
  --radius-md: 0.7rem;
  --radius-lg: 1rem;
  /* Legacy capsules now follow the same compact geometry as buttons and
     fields. True circles (avatars, dots, toggle knobs) use 50% explicitly. */
  --radius-pill: 0.25rem;

  /* Shadows (extremely restrained) */
  --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.09);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.14);

  /* Form surfaces */
  --surface-max-width: 860px;
  --surface-tight-max-width: 720px;
  --field-height: 42px;
  --field-padding-x: 0.85rem;
  --field-padding-y: 0.65rem;
  --focus-ring: 0 0 0 3px var(--color-focus);
  --focus-ring-strong: 0 0 0 3px var(--color-focus-strong);

  /* Page layout */
  --page-max-width: 1280px;
  --page-padding-x: var(--spacing-lg);
  --page-padding-y: var(--spacing-lg);
  --section-gap: var(--spacing-xl);

  /* Modal sizes. Widths express the *visual* size: modals divide these by
     --app-zoom so they opt out of the app's 0.8 density shrink and use the real
     screen. --modal-max-height fills ~94% of the real viewport (no-op at zoom 1). */
  --modal-width-sm: 540px;
  --modal-width-md: 840px;
  --modal-width-lg: 1080px;
  --modal-width-xl: 1280px;
  --modal-max-height: calc(94vh / var(--app-zoom, 1));
  --modal-padding: var(--spacing-lg);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --motion-emphasized: cubic-bezier(0.2, 0.7, 0.1, 1);
  --motion-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 768px) {
  button, [role="button"], input, select { min-height: 44px; }
}

/* Authenticated areas — "Monochrome Ledger".
   Scoped to `body.area-app` (set by app-shell for the `app` layout: /app + /admin)
   so the warm public/marketing palette is untouched. Custom properties cascade
   across shadow boundaries, so every nested component and body-portaled overlay
   (modals, toasts) inherits these without per-component edits.

   The look: a premium black-white-grey interface inspired by editorial layouts and
   classic ledgers. Subtle off-white "paper" page with pure-white raised cards; FINE,
   layered hairline rules (light for dividers, darker only for emphasis) rather than
   heavy black boxes; a calm refined grey for secondary ink; crisp/tight corners; and
   near-monochrome semantic accents — green/amber neutralised to ink/grey, with a
   single restrained brick reserved for destructive actions. */
body.area-app {
  /* Surfaces — ledger paper page, white cards, faint washes for functional states */
  --surface-base: #fcfbf9;
  --surface-raised: #ffffff;
  --surface-sunken: rgba(0, 0, 0, 0.025);
  --surface-hover: rgba(0, 0, 0, 0.045);
  --color-surface-strong: rgba(0, 0, 0, 0.05);

  /* Borders — fine layered hairlines; reserve black for emphasis/active only */
  --border-color: #000000;
  --border-color-strong: rgba(0, 0, 0, 0.30);
  --border-color-soft: rgba(0, 0, 0, 0.13);
  --border-color-hairline: rgba(0, 0, 0, 0.09);
  --modal-border: rgba(0, 0, 0, 0.18);

  /* Agenda rules — stratified, refined ledger ruling */
  --agenda-line-subtle: rgba(0, 0, 0, 0.07);
  --agenda-line: rgba(0, 0, 0, 0.12);
  --agenda-line-strong: rgba(0, 0, 0, 0.22);
  --agenda-line-header: rgba(0, 0, 0, 0.32);

  /* Agenda "today" column — ink-tinted wash + solid ink top bar */
  --agenda-today-tint: rgba(0, 0, 0, 0.05);
  --agenda-today-tint-header: rgba(0, 0, 0, 0.08);
  --agenda-today-bar: var(--color-black);

  /* Closed hours / breaks / blockers — darker than the base surfaces (dark theme). */
  --agenda-unavailable-a: rgba(0, 0, 0, 0.16);
  --agenda-unavailable-b: rgba(0, 0, 0, 0.28);
  /* Outside-of-hours grid slots — a lighter, softer hatch than blockers. */
  --agenda-closed-a: rgba(0, 0, 0, 0.07);
  --agenda-closed-b: rgba(0, 0, 0, 0.14);

  /* Text — primary pure black; secondary a true calm grey (not low-opacity black) */
  --color-gray-dark: #1c1c1c;
  --color-gray: #5f5f5f;

  /* Crisp corners — tighter than the marketing palette */
  --radius-sm: 0.25rem;
  --radius-md: 0.4rem;
  --radius-lg: 0.6rem;

  /* Flatter depth — cards rely on ruled borders, not lift; keep md/lg for overlays */
  --shadow-xs: none;
  --shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.03);

  /* Near-monochrome semantic accents — positive/caution read as ink/grey */
  --color-success: #1f1f1f;
  --color-success-soft: rgba(0, 0, 0, 0.04);
  --color-warning: #5f5f5f;
  --color-warning-soft: rgba(0, 0, 0, 0.05);
  /* Danger — the only retained hue: a restrained desaturated brick, used sparingly */
  --color-danger: #7a2e2e;
  --color-danger-soft: rgba(122, 46, 46, 0.06);

  /* Focus — calm ring for the high-contrast context */
  --color-focus: rgba(0, 0, 0, 0.22);
  --color-focus-strong: rgba(0, 0, 0, 0.45);
}