/* 9Sign design tokens.
   Semantic tokens are canonical; the --bg-, --accent, --text-, --border,
   --radius and --shadow names below are compatibility aliases so existing
   components and inline styles that already reference them keep working
   unchanged. */
@font-face { font-family: 'Montserrat'; src: url('/assets/fonts/Montserrat-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/assets/fonts/Montserrat-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/assets/fonts/Montserrat-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/assets/fonts/Montserrat-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/assets/fonts/Montserrat-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/assets/fonts/Montserrat-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  /* Canonical colours from the supplied 9Ways brand kit. */
  --9s-mint: #8cf0b4;
  --9s-teal: #1fa39a;
  --9s-green: #2ec07a;
  --9s-cobalt: #1a2ea8;
  --9s-cobalt-dim: #0d1a6e;
  --9s-deep-900: #0a0e2c;
  --9s-deep-800: #14193a;
  --9s-deep-700: #1f2547;
  --9s-deep-600: #3a4068;
  --9s-white: #ffffff;

  /* Semantic tokens */
  --color-bg-canvas: #f6f7fb;
  --color-bg-surface: #ffffff;
  --color-bg-surface-raised: #fbfbfe;
  --color-bg-surface-hover: #eff1f7;
  --color-bg-input: #ffffff;
  --color-border: #e4e6ef;
  --color-border-strong: #cdd0de;
  --color-text-primary: #0a0e2c;
  --color-text-secondary: #3a4068;
  --color-text-muted: #555d7a;
  --color-accent: var(--9s-cobalt);
  --color-accent-hover: var(--9s-cobalt-dim);
  --color-accent-dim: var(--9s-cobalt-dim);
  --color-highlight: var(--9s-mint);
  --color-success: #147a43;
  --color-success-dim: #e5f7ee;
  --color-danger: #c62828;
  --color-danger-dim: #fdecec;
  --color-warning: #8a5500;
  --color-warning-dim: #fff3e0;
  --color-focus-ring: var(--9s-mint);
  --color-focus-ring-soft: rgba(45, 212, 191, 0.35);

  /* Typography: Montserrat for brand moments (logo/headings), system UI for
     dense operational text. No CDN dependency -- falls back cleanly on
     offline/lab devices that don't have Montserrat installed. */
  --font-ui: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-brand: 'Montserrat', var(--font-ui);

  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --sidebar-width: 220px;
  --transition: 0.2s ease;

  /* Compatibility aliases -- existing CSS/inline styles reference these names */
  --bg-primary: var(--color-bg-canvas);
  --bg-secondary: var(--color-bg-surface);
  --bg-card: var(--color-bg-surface-raised);
  --bg-card-hover: var(--color-bg-surface-hover);
  --bg-input: var(--color-bg-input);
  --accent: var(--color-accent);
  --accent-hover: var(--color-accent-hover);
  --accent-dim: var(--color-accent-dim);
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-muted: var(--color-text-muted);
  --success: var(--color-success);
  --success-dim: var(--color-success-dim);
  --danger: var(--color-danger);
  --danger-dim: var(--color-danger-dim);
  --warning: var(--color-warning);
  --warning-dim: var(--color-warning-dim);
  --border: var(--color-border);
  --border-light: var(--color-border-strong);
  --primary: var(--color-accent);
}