/* Kwickblocks Booking — design system tokens.
   Loaded BEFORE MudBlazor's stylesheet (UI-SPEC §Design System Token surface).
   This file is the single source of truth for spacing / typography / colour;
   `Theme/KbMudTheme.cs` mirrors a subset of these tokens into MudBlazor's MudTheme
   so MudBlazor components share the same palette as bespoke `.ds-*` classes. */

/* --- Self-hosted fonts (UI-SPEC §Design System: Inter body, JetBrains Mono diff only).
       Source URLs (recorded for SUMMARY):
         Inter-Regular.woff2     — github.com/rsms/inter/raw/master/docs/font-files/Inter-Regular.woff2
         Inter-SemiBold.woff2    — github.com/rsms/inter/raw/master/docs/font-files/Inter-SemiBold.woff2
         JetBrainsMono-Regular.woff2 — github.com/JetBrains/JetBrainsMono/raw/master/fonts/webfonts/JetBrainsMono-Regular.woff2
*/
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Inter-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/Inter-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/JetBrainsMono-Regular.woff2') format('woff2');
}

:root {
  /* --- Spacing scale (UI-SPEC §Spacing Scale). 8-point system. */
  --space-1: 4px;
  --space-2: 8px;
  /* 12px is the only non-multiple-of-4 token. It exists for MudBlazor Dense text-field alignment. Do not add further exceptions. */
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* --- Typography (UI-SPEC §Typography). Exactly 4 distinct sizes.
     Token names use CSS-legal identifiers only (no `+`); CSS custom
     properties cannot contain `+` and silently fail to parse if they do. */
  --text-xs: 13px;    /* UI / label / validation copy */
  --text-sm: 14px;    /* body default */
  --text-xl: 20px;    /* heading */
  --text-3xl: 28px;   /* display / page H1 */

  --weight-regular: 400;
  --weight-semibold: 600;

  --leading-display: 1.2;
  --leading-heading: 1.3;
  --leading-label: 1.4;
  --leading-body: 1.5;

  /* --- Surfaces (UI-SPEC §Color). 60/30/10 split. */
  --surface-primary: #ffffff;
  --surface-secondary: #f8f9fc;
  --surface-tertiary: #f0f2f7;

  /* --- Borders. */
  --border-subtle: #e5e7ef;
  --border-strong: #cfd3df;

  /* --- Text. */
  --text-primary: #1a1d29;
  --text-secondary: #4a5065;
  --text-muted: #6b7280;

  /* --- Brand accent (10% rule — see UI-SPEC §Color "Accent reserved for"). */
  --brand-accent: #2572FB;

  /* --- Semantic colour pairs (foreground + tinted background for chips/banners). */
  --success: #059669;
  --success-bg: #ecfdf5;
  --success-fg: #065f46;
  --warning: #d97706;
  --warning-bg: #fffbeb;
  --warning-fg: #92400e;
  --danger: #dc2626;
  --danger-bg: #fef2f2;
  --danger-fg: #991b1b;
  --info: #0284c7;
  --info-bg: #f0f9ff;
  --info-fg: #075985;

  /* --- Radius (UI-SPEC §Design System "Radius — rounded-medium 8-12px"). */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* --- Focus ring (used everywhere keyboard focus lands). */
  --focus-ring: 0 0 0 3px rgba(37, 114, 251, 0.4);

  /* --- Shadows (subtle, admin-grade). */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 24px rgba(15, 23, 42, 0.12);

  /* ==========================================================================
     Phase 05 — brandable tokens.

     Every token the portal-branding emitter can override MUST have a neutral
     default declared here. A token a tenant can set but the shell never reads
     is a setting that silently does nothing; a token the shell reads but that
     has no default here resolves to nothing at all when unbranded.

     The values below ARE the Sorino look — this is not a fallback palette, it
     is the product's own identity expressed in the same tokens a tenant uses.
     ========================================================================== */

  /* Sidebar ground. Its own token because the nav often wants a different
     plane from the page — and because a two-ground theme (light page, dark
     sidebar) is re-scoped on this subtree rather than patched per element. */
  --sidebar-bg: #ffffff;

  /* Row / control hover plane. */
  --hover-bg: #f0f2f7;

  /* Secondary accents. `--brand-accent` above is the primary brand slot. */
  --accent-green: #059669;
  --accent-orange: #d97706;
  --accent-red: #dc2626;

  /* Primary CTA. Background defaults to the brand accent so a tenant that sets
     only their brand colour still gets an on-brand button. */
  --btn-primary-bg: var(--brand-accent);
  --btn-primary-fg: #ffffff;
  --btn-primary-border: transparent;
  --btn-primary-radius: var(--radius-md);
  --btn-primary-shadow: none;
  --btn-secondary-bg: transparent;
  --btn-secondary-fg: var(--text-primary);
  --btn-secondary-border: var(--border-strong);
  --btn-secondary-radius: var(--radius-md);
  --btn-secondary-shadow: none;

  /* Fourth radius, so the set matches the portable contract exactly. */
  --radius-pill: 999px;

  /* Aliases onto the existing shadow scale, named to match the contract. */
  --shadow-card: var(--shadow-md);
  --shadow-focus: var(--focus-ring);

  /* Body face. Self-hosted Inter by default; a tenant may substitute a stack
     and supply its own fontLink. */
  --font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* --- Base typography. */
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--text-primary);
  background: var(--surface-secondary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: var(--weight-semibold);
  margin: 0;
}

/* --- Page shell pattern (UI-SPEC §Spacing Scale). */
.ds-page {
  max-width: 1280px;
  margin-inline: auto;
  padding: var(--space-6) var(--space-5) var(--space-8);
}
.ds-page > section {
  margin-bottom: var(--space-6);
}
.ds-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.ds-page-header > div:first-child {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* --- Mono usage is restricted to audit-diff JSON tree + trace_id surfaces. */
.ds-mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
}

/* --- Tabular numerics in data tables (UI-SPEC §Typography rule). */
.ds-table td.numeric,
.mud-table-cell.numeric {
  font-feature-settings: "tnum";
}

/* --- Auth layout: full-bleed centred card on the page background.
   Vertical flex so the brand mark stacks above the card. */
.ds-auth-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  background: var(--surface-secondary);
  padding: var(--space-5);
}
.ds-auth-brand {
  /* Logo above the card. The .kb-brand-ring class (defined inline in
     index.html so the boot screen has it too) provides the ring + image. */
  width: 120px; height: 120px;
}
.ds-auth-brand img { width: 96px; height: 96px; }
/* A tenant's own mark above the sign-in card. Sized by HEIGHT with width auto,
   so a wide lockup and a square mark both land at the same optical weight —
   capping the width instead would shrink a wide logo to unreadable. object-fit
   keeps the aspect if a tenant supplies something extreme. */
.ds-auth-logo {
  height: 64px;
  width: auto;
  max-width: min(320px, 100%);
  object-fit: contain;
  display: block;
}
.ds-auth-card {
  width: 100%;
  max-width: 480px;
  background: var(--surface-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
}

/* --- Boundary pages (UI-SPEC §Layout Skeletons §404/403/410). */
.ds-boundary {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}
.ds-boundary-card {
  max-width: 520px;
  width: 100%;
  background: var(--surface-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-7) var(--space-6);
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.ds-boundary-icon {
  font-size: 48px;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}
.ds-boundary-trace {
  margin-top: var(--space-6);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* --- Side-nav active item (UI-SPEC §Color "Accent reserved for #2: active side-nav item — left-edge 3px bar"). */
.ds-nav-section {
  padding: var(--space-3) var(--space-4) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  text-transform: none;
}
.mud-nav-link.active,
.mud-nav-link.mud-nav-link-active {
  position: relative;
  color: var(--text-primary);
  background: var(--surface-tertiary);
}
.mud-nav-link.active::before,
.mud-nav-link.mud-nav-link-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--space-2);
  bottom: var(--space-2);
  width: 3px;
  background: var(--brand-accent);
  border-radius: 0 2px 2px 0;
}

/* --- Two-column form pattern (UI-SPEC §Layout Skeletons "two-column form pattern"). */
.ds-two-col-form { display: flex; flex-direction: column; gap: var(--space-5); }
.ds-two-col-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}
@media (min-width: 768px) {
  .ds-two-col-row {
    grid-template-columns: 220px 1fr;
    gap: var(--space-5);
    align-items: start;
  }
}
.ds-two-col-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  padding-top: var(--space-2);
}
.ds-two-col-help {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

/* --- Empty state (UI-SPEC §Empty states). */
.ds-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-7) var(--space-5);
  gap: var(--space-3);
}
.ds-empty-icon { color: var(--text-muted); font-size: 48px; }
.ds-empty-heading { font-size: var(--text-xl); font-weight: var(--weight-semibold); }
.ds-empty-body { color: var(--text-secondary); max-width: 480px; }

/* --- Status chips (UI-SPEC §Status chip vocabulary — three states, no more). */
.ds-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2);
  border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.ds-chip--active   { color: var(--success-fg);  background: var(--success-bg); }
.ds-chip--archived { color: var(--text-muted);  background: var(--surface-tertiary); }
.ds-chip--pending  { color: var(--warning-fg);  background: var(--warning-bg); }

/* --- Brand inheritance pills (UI-SPEC §Brand inheritance preview). */
.ds-pill { display: inline-flex; align-items: center; padding: 2px var(--space-2); border-radius: 999px;
  font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.ds-pill--inherited  { color: var(--text-muted);   background: var(--surface-tertiary); }
.ds-pill--customised { color: var(--brand-accent); background: rgba(37, 114, 251, 0.08); }

/* --- Setup-mode banner (UI-SPEC §Error states "Setup mode" row + D-03). */
.ds-setup-banner {
  background: var(--warning-bg);
  color: var(--warning-fg);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  border-top: 1px solid var(--warning);
}

/* --- Focus ring (UI-SPEC §Accessibility — every INTERACTIVE focusable control).
   Scoped explicitly to elements the user can click, type, or arrow into.
   Notable exclusion: page <h1> elements receive programmatic focus from
   <FocusOnNavigate> for screen-reader announce — those are intentionally
   tabindex="-1" and must NOT show the visible ring (UI-SPEC §Focus). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[role="menuitem"]:focus-visible,
[role="tab"]:focus-visible,
[role="option"]:focus-visible,
[role="checkbox"]:focus-visible,
[role="radio"]:focus-visible,
[role="switch"]:focus-visible,
[contenteditable="true"]:focus-visible,
[tabindex="0"]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* Defensive override — even if MudBlazor or scoped styles re-introduce a
   focus ring on the programmatically-focused page heading, suppress it.
   Heading focus is purely for AT announce; sighted users should not see it. */
h1:focus, h1:focus-visible,
h2:focus, h2:focus-visible,
h3:focus, h3:focus-visible {
  outline: none;
  box-shadow: none;
}

/* --- MudBlazor surface alignment — strip MudBlazor's default heavier appbar shadow,
       since UI-SPEC top bar is sticky/light. */
.mud-appbar.mud-elevation-4 { box-shadow: none; border-bottom: 1px solid var(--border-subtle); }
.mud-drawer { border-right: 1px solid var(--border-subtle); }

/* Phase 05 — tenant logo in the top bar. Capped by height so any aspect ratio
   fits the 60px bar; width is left to the image so a wordmark is not squashed. */
.kb-brand-logo {
  height: 30px;
  width: auto;
  display: block;
  border-radius: var(--radius-sm);
}