/* Design system base - shared across light and dark themes */
:root {
  /* Section: Hues */
  /* Default Hue Tokens */
  --hue-default-default: 210;
  --hue-default-primary: 210;
  --hue-default-background: 210;
  --hue-default-good: 140;
  --hue-default-bad: 360;
  --hue-default-warning: 48;
  --hue-default-info: 210;

  --hue-default: var(--hue-default-default);

  /* HIDDEN: Derived Hue Tokens */
  --hue-primary: var(--hue-default-primary);
  --hue-background: var(--hue-default-background);
  --hue-good: var(--hue-default-good);
  --hue-bad: var(--hue-default-bad);
  --hue-warning: var(--hue-default-warning);
  --hue-info: var(--hue-default-info);
}

:root {
  /* Section: Typography */
  /* Font sizes */
  --font-size-mfa: xxx-large;
  --font-size-title: 2.2rem;
  --font-size-very-large: 2.2rem;
  --font-size-large: 1.9rem;
  --font-size-slightly-large: 1.6rem;
  --font-size-medium: 1.4rem;
  --font-size-small: 1.3rem;
  --font-size-very-small: 1.2rem;
  --font-size-tiny: 1.1rem;

  /* Icon sizes */
  --icon-size-title: 3.5rem;
  --icon-size-very-large: 2.2rem;
}

:root {
  /* Section: Layout */
  /* Sizing */
  --top-bar-height: 6.4rem;
  --main-menu-width: 21rem;
  --main-menu-collapsed-width: 7rem;
  --main-menu-logo-height: 60%;
  --top-bar-min-width: 30rem;
  --min-width: 36rem;
  --min-col-width: 32rem;
  --max-col-width: 40rem;
  --notification-width: 34rem;
  --title-bar-height: 7.5rem;

  /* Padding */
  --h-page-padding: 0.5rem;
  --h-padding: 2.6rem;
  --v-padding: 2rem;
  --layout-h-page-padding: 0.5rem;

  /* Margins */
  --layout-h-margin: 2rem;
  --h-margin: 2rem;
  --v-margin: 2rem;

  /* Border radius */
  --radius: 0.5rem;

  /* Forms specific */
  --forms-border-width: 0.1rem;
  --forms-border-radius: 0.4rem;
  --forms-padding: 0.9rem 1.2rem;
}


/* -------------------------------------------------------------------------- */
/*  Theme availability utility                                                */
/*                                                                            */
/*  Show theme toggle only when BOTH light and dark are available.            */
/*  Default: show (visible). Single-theme tenants include base-single-theme.css */
/* -------------------------------------------------------------------------- */

/* HIDDEN: Theme toggle visibility and display */
:root {
  --ui-theme-toggle-visibility: visible;
  --ui-theme-toggle-display: revert;
}

.ui-theme-visible {
  visibility: var(--ui-theme-toggle-visibility, visible);
  display: var(--ui-theme-toggle-display, revert);
}


:root {
  /* Section: Colours */
  /* Primary accent colours */
  --colour-primary: hsl(var(--hue-primary), 52%, 48%);
  --colour-primary-hover: hsl(var(--hue-primary), 52%, 58%);
  --colour-primary-highlight: hsl(var(--hue-primary), 60%, 60%);
  --colour-primary-bg: hsla(var(--hue-primary), 90%, 50%, 0.12);

  /* RAG Status- Good colours */
  --colour-good: hsl(var(--hue-good), 60%, 40%);
  --colour-good-hover: hsl(var(--hue-good), 60%, 50%);
  --colour-good-bg: hsl(var(--hue-good), 50%, 94%);
  --colour-good-border: hsl(var(--hue-good), 50%, 86%);

  /* RAG Status- Warning colours */
  --colour-warning: hsl(var(--hue-warning), 100%, 45%);
  --colour-warning-hover: hsl(var(--hue-warning), 100%, 55%);
  --colour-warning-muted: hsl(var(--hue-warning), 90%, 80%);
  --colour-warning-bg: hsl(var(--hue-warning), 90%, 95%);
  --colour-warning-border: hsl(var(--hue-warning), 90%, 88%);

  /* RAG Status- Bad colours */
  --colour-bad: hsl(var(--hue-bad), 55%, 48%);
  --colour-bad-hover: hsl(var(--hue-bad), 55%, 58%);
  --colour-bad-muted: hsla(var(--hue-bad), 55%, 80%, 80%);
  --colour-bad-bg: hsl(var(--hue-bad), 67%, 96%);
  --colour-bad-border: hsl(var(--hue-bad), 82%, 94%);

  /* Info colours */
  --colour-info: hsl(var(--hue-info), 50%, 50%);
  --colour-info-hover: hsl(var(--hue-info), 50%, 60%);
  --colour-info-bg: hsl(var(--hue-info), 60%, 96%);
  --colour-info-border: hsl(var(--hue-info), 60%, 92%);

  /* Offline colours */
  --colour-offline: #aaa;
  --colour-offline-hover: #f00;
  --colour-offline-bg: #f4f4f4;
  --colour-offline-border: #ddd;

  /* Content colours */
  --colour-content: hsl(0, 0%, 0%);
  --colour-content-hover: hsl(0, 0%, 10%);
  --colour-content-light: hsl(206, 16%, 52%);
  --colour-content-light-hover: hsl(206, 16%, 62%);
  --colour-content-placeholder: hsl(var(--hue-primary), 30%, 86%);
  --colour-content-bg: white;
  --colour-content-bg-alt: rgba(16, 32, 64, 0.035);

  /* Background and border */
  --colour-background: hsl(var(--hue-primary), 10%, 96%);
  --colour-border: hsla(var(--hue-primary), 30%, 50%, 0.15);
  --colour-input-bg: white;
  --colour-separator-light: hsl(240, 4%, 91%);

  /* Map and topbar */
  --colour-map-bg: #d4dadc;
  --colour-topbar-bg: white;

  /* Chart colours */
  --chart-1: hsl(12 76% 61%);
  --chart-2: hsl(173 58% 39%);
  --chart-3: hsl(197 37% 24%);
  --chart-4: hsl(43 74% 66%);
  --chart-5: hsl(27 87% 67%);

  /* Tailwind color system */
  --color-card: hsl(0 0% 100%);
  --color-card-foreground: hsl(0 0% 3.9%);
  --color-popover: hsl(0 0% 100%);
  --color-popover-foreground: hsl(0 0% 3.9%);
  --color-primary-foreground: hsl(0 0% 98%);
  --color-secondary: hsl(0 0% 96.1%);
  --color-secondary-foreground: hsl(0 0% 9%);
  --color-secondary-foreground-alt: hsl(210 5% 16%);
  --color-secondary-hover: hsl(220 14% 91%);
  --color-secondary-skeleton: hsl(0 0% 81.1%);
  --color-muted: hsl(0 0% 96.1%);
  --color-muted-foreground: hsl(0 0% 45.1%);
  --color-accent-foreground: hsl(0 0% 9%);
  --color-destructive: hsl(0 84.2% 60.2%);
  --color-destructive-foreground: hsl(0 0% 98%);
  --color-foreground: hsl(0 0% 3.9%);
  --color-input: hsl(0 0% 89.8%);
  --color-ring: hsla(217, 90%, 60%, 0.5);

  /* Section: Forms */
  /* Form shadows */
  --forms-box-shadow: 0 0.1rem 0.2rem 0.1rem rgba(0, 0, 0, 0.0745);
  --forms-heavy-box-shadow: 0 0 1.2rem 0 rgba(0, 0, 0, 0.2);
}


:root[data-theme="dark"] {
  /* Section: Hues */
  /* Dark theme hue overrides */
  --hue-default-primary: 355;

  /* Section: Colours */
  /* Primary accent colours */
  --colour-primary: hsl(var(--hue-primary), 65%, 55%);
  --colour-primary-hover: hsl(var(--hue-primary), 65%, 65%);
  --colour-primary-highlight: hsl(var(--hue-primary), 65%, 60%);
  --colour-primary-bg: hsla(var(--hue-primary), 50%, 50%, 0.2);

  /* RAG Status- Good colours */
  --colour-good: hsl(var(--hue-good), 55%, 42%);
  --colour-good-hover: hsl(var(--hue-good), 55%, 52%);
  --colour-good-bg: hsl(var(--hue-good), 18%, 24%);
  --colour-good-border: hsl(var(--hue-good), 26%, 32%);

  /* RAG Status- Warning colours */
  --colour-warning: hsl(var(--hue-warning), 100%, 42%);
  --colour-warning-hover: hsl(var(--hue-warning), 100%, 52%);
  --colour-warning-muted: hsl(var(--hue-warning), 70%, 42%);
  --colour-warning-bg: hsl(var(--hue-warning), 18%, 24%);
  --colour-warning-border: hsl(var(--hue-warning), 26%, 32%);

  /* RAG Status- Bad colours */
  --colour-bad: hsl(var(--hue-bad), 70%, 55%);
  --colour-bad-hover: hsl(var(--hue-bad), 70%, 65%);
  --colour-bad-muted: hsl(var(--hue-bad), 72%, 65%);
  --colour-bad-bg: hsl(var(--hue-bad), 18%, 24%);
  --colour-bad-border: hsl(var(--hue-bad), 26%, 32%);

  /* Info colours */
  --colour-info: hsl(var(--hue-info), 50%, 50%);
  --colour-info-hover: hsl(var(--hue-info), 50%, 60%);
  --colour-info-bg: hsl(var(--hue-info), 18%, 24%);
  --colour-info-border: hsl(var(--hue-info), 26%, 32%);

  /* Offline colours */
  --colour-offline: #888;
  --colour-offline-hover: #999;
  --colour-offline-bg: #3a3a3a;
  --colour-offline-border: #555;

  /* Content colours */
  --colour-content: hsl(0, 0%, 87%);
  --colour-content-hover: hsl(0, 0%, 97%);
  --colour-content-light: hsl(240, 4%, 69%);
  --colour-content-light-hover: hsl(240, 4%, 79%);
  --colour-content-placeholder: hsl(240, 4%, 32%);
  --colour-content-bg: hsl(240, 4%, 20%);
  --colour-content-bg-alt: hsl(240, 4%, 18%);

  /* Background and border */
  --colour-background: hsl(240, 4%, 16%);
  --colour-border: rgba(255, 255, 255, 0.05);
  --colour-input-bg: hsl(240, 4%, 18%);
  --colour-separator-light: hsl(240, 4%, 23%);

  /* Map and topbar */
  --colour-map-bg: #222327;
  --colour-topbar-bg: hsl(240, 4%, 20%);

  /* Chart colours */
  --chart-1: hsl(220 70% 50%);
  --chart-2: hsl(160 60% 45%);
  --chart-3: hsl(30 80% 55%);
  --chart-4: hsl(280 65% 60%);
  --chart-5: hsl(340 75% 55%);

  /* Tailwind color system */
  --color-foreground: hsl(0 0% 98%);
  --color-card: hsl(0 0% 3.9%);
  --color-card-foreground: hsl(0 0% 98%);
  --color-popover: hsl(0 0% 3.9%);
  --color-popover-foreground: hsl(0 0% 98%);
  --color-primary-foreground: hsl(0 0% 9%);
  --color-secondary: hsl(0 0% 14.9%);
  --color-secondary-foreground: hsl(0 0% 98%);
  --color-secondary-foreground-alt: hsl(210 5% 84%);
  --color-secondary-hover: hsl(218 11% 20%);
  --color-secondary-skeleton: hsl(0 0% 30%);
  --color-muted: hsl(0 0% 14.9%);
  --color-muted-foreground: hsl(0 0% 63.9%);
  --color-accent-foreground: hsl(0 0% 98%);
  --color-destructive: hsl(0 62.8% 30.6%);
  --color-destructive-foreground: hsl(0 0% 98%);
  --color-input: hsl(0 0% 14.9%);
  --color-ring: hsl(0 0% 83.1%);

  /* Section: Forms */
  /* Forms - dark mode-specific shadows */
  --forms-box-shadow: 0 0 0.8rem 0 rgba(0, 0, 0, 0.165);
  --forms-heavy-box-shadow: 0 0 1.5rem 0.5rem rgba(0, 0, 0, 0.3);
}


/* Base design-system tokens only. Tenant-specific overrides are provided by per-tenant CSS files. */