:root {
  --color-primary: #0097cc;
  --color-primary-hover: #007fb0;
  --color-primary-light: #e0f3fb;
  --color-header-bg: #0a2231;
  --color-header-text: #f8fcff;
  --color-secondary: #085b8d;
  --color-secondary-hover: #074a72;
  --color-success: #1b8f5a;
  --color-success-light: #dcf7ea;
  --color-success-text: #0a5134;
  --color-warning: #d98b17;
  --color-warning-light: #fff2d8;
  --color-warning-text: #7a4b07;
  --color-danger: #d54c4c;
  --color-danger-hover: #b53f3f;
  --color-danger-light: #fde5e5;
  --color-danger-text: #7b2a2a;
  --color-info: #2a7fa8;
  --color-info-light: #d9f1fb;
  --color-info-text: #11506b;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-background: #f3f7fb;
  --color-surface: #ffffff;
  --color-surface-alt: #eef5f9;
  --color-text: #0b1f2d;
  --color-text-secondary: #3f5565;
  --color-text-disabled: #94a3b8;
  --color-border: #d6e1ea;
  --color-border-hover: #cbd5df;
  --color-link: #0097cc;
  --color-link-hover: #007fb0;
  --color-overlay: rgba(9, 15, 20, 0.45);
  --app-bg: radial-gradient(1200px 800px at 10% -10%, rgba(0, 151, 204, 0.18) 0%, rgba(0, 151, 204, 0) 55%),
    radial-gradient(900px 700px at 110% -20%, rgba(8, 91, 141, 0.18) 0%, rgba(8, 91, 141, 0) 50%),
    #f3f7fb;
  --shell-sidebar-bg: #081c28;
  --shell-sidebar-border: rgba(255, 255, 255, 0.08);
  --shell-sidebar-text: #eaf6fb;
  --shell-sidebar-text-muted: rgba(234, 246, 251, 0.68);
  --shell-sidebar-active-bg: rgba(0, 151, 204, 0.18);

  --color-gray-50: #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  --color-gray-300: #cbd5e1;
  --color-gray-400: #94a3b8;
  --color-gray-500: #64748b;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1e293b;
  --color-gray-900: #0f172a;

  --dashboard-bg: #0b1216;
  --dashboard-text: #e5eef3;
  --dashboard-text-muted: rgba(229, 238, 243, 0.55);
  --dashboard-text-muted-70: rgba(229, 238, 243, 0.7);
  --dashboard-panel: rgba(255, 255, 255, 0.04);
  --dashboard-panel-border: rgba(255, 255, 255, 0.12);
  --dashboard-panel-border-strong: rgba(255, 255, 255, 0.22);
  --dashboard-shadow-strong: 0 12px 34px rgba(0, 0, 0, 0.5);
  --dashboard-shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.28);
  --dashboard-chart-bg: rgba(16, 24, 32, 0.4);
  --dashboard-chart-bg-strong: rgba(16, 24, 32, 0.6);
  --dashboard-positive: rgba(92, 216, 160, 0.95);
  --dashboard-negative: rgba(248, 124, 124, 0.95);
  --dashboard-accent: rgba(0, 151, 204, 0.98);
}

html[data-theme="dark"] {
  --color-primary: #35b8e6;
  --color-primary-hover: #5ec9ef;
  --color-primary-light: #0c2a3c;
  --color-header-bg: #07151f;
  --color-header-text: #eef6f8;
  --color-secondary: #8bb6cc;
  --color-secondary-hover: #b0d1e1;
  --color-success: #33c285;
  --color-success-light: #083b2a;
  --color-success-text: #d7f5e6;
  --color-warning: #f0b75b;
  --color-warning-light: #3a2508;
  --color-warning-text: #ffe7c4;
  --color-danger: #f07070;
  --color-danger-hover: #f39a9a;
  --color-danger-light: #3a1414;
  --color-danger-text: #ffdada;
  --color-info: #49b3d1;
  --color-info-light: #062b38;
  --color-info-text: #d7f3fb;
  --color-white: #f8fafc;
  --color-black: #000000;
  --color-background: #0b1216;
  --color-surface: #0f1720;
  --color-surface-alt: rgba(255, 255, 255, 0.08);
  --color-text: #e5eef3;
  --color-text-secondary: rgba(229, 238, 243, 0.82);
  --color-text-disabled: rgba(229, 238, 243, 0.5);
  --color-border: rgba(255, 255, 255, 0.14);
  --color-border-hover: rgba(255, 255, 255, 0.22);
  --color-link: #35b8e6;
  --color-link-hover: #7ed4f0;
  --color-overlay: rgba(3, 8, 12, 0.7);
  --app-bg: radial-gradient(900px 700px at 10% -10%, rgba(0, 151, 204, 0.2) 0%, rgba(0, 151, 204, 0) 55%),
    radial-gradient(800px 600px at 110% -20%, rgba(8, 91, 141, 0.18) 0%, rgba(8, 91, 141, 0) 50%),
    #0b1216;
  --shell-sidebar-bg: #050e14;
  --shell-sidebar-border: rgba(255, 255, 255, 0.08);
  --shell-sidebar-text: #f0f7fb;
  --shell-sidebar-text-muted: rgba(240, 247, 251, 0.7);
  --shell-sidebar-active-bg: rgba(0, 151, 204, 0.22);

  --color-gray-50: #111827;
  --color-gray-100: #1f2937;
  --color-gray-200: #334155;
  --color-gray-300: #475569;
  --color-gray-400: #64748b;
  --color-gray-500: #94a3b8;
  --color-gray-600: #cbd5e1;
  --color-gray-700: #e2e8f0;
  --color-gray-800: #f1f5f9;
  --color-gray-900: #f8fafc;

  --dashboard-bg: #0b0f14;
  --dashboard-text: #e7eef7;
  --dashboard-text-muted: rgba(231, 238, 247, 0.55);
  --dashboard-text-muted-70: rgba(231, 238, 247, 0.7);
  --dashboard-panel: rgba(255, 255, 255, 0.03);
  --dashboard-panel-border: rgba(255, 255, 255, 0.1);
  --dashboard-panel-border-strong: rgba(255, 255, 255, 0.18);
  --dashboard-shadow-strong: 0 10px 30px rgba(0, 0, 0, 0.45);
  --dashboard-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.25);
  --dashboard-chart-bg: rgba(15, 22, 32, 0.35);
  --dashboard-chart-bg-strong: rgba(15, 22, 32, 0.55);
  --dashboard-positive: rgba(80, 220, 150, 0.95);
  --dashboard-negative: rgba(255, 110, 110, 0.95);
  --dashboard-accent: rgba(255, 215, 0, 0.98);
}

/* === PORTED THEME SYSTEM (SEMANTIC COLOURS) === */
/* Referenced by designTokens.theme.* and style-utilities.ts.
   Namespaced --colour-* so they cannot collide with the shell --color-* vars. */
:root {
  /* Brand colours */
  --colour-brand-primary: #0097cc;
  --colour-brand-hover: #085b8d;
  --colour-brand-light: #e6f7ff;
  --colour-brand-light-200: #b3e5fc;
  --colour-brand-lightest: rgba(0, 151, 204, 0.03);
  --colour-brand-secondary: #6b7280;
  --colour-brand-secondary-hover: #4b5563;
  --colour-header-bg: #0097cc;
  --colour-card-glass: rgba(255, 255, 255, 0.95);
  --colour-card-glass-border: rgba(255, 255, 255, 0.3);

  /* Layout backgrounds */
  --colour-bg-primary: #f8fafc;
  --colour-bg-secondary: #ffffff;
  --colour-bg-tertiary: #f3f4f6;
  --colour-bg-hover: #f9fafb;
  --colour-bg-gradient: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);

  /* Typography text states */
  --colour-text-primary: #111827;
  --colour-text-secondary: #4b5563;
  --colour-text-muted: #9ca3af;
  --colour-text-inverse: #ffffff;

  /* Borders & Dividers */
  --colour-border-primary: #e5e7eb;
  --colour-border-secondary: #f3f4f6;

  /* Status Accents */
  --colour-status-success-solid: #10b981;
  --colour-status-success-bg: #d1fae5;
  --colour-status-success-text: #065f46;
  --colour-status-success-40: rgba(16, 185, 129, 0.25);
  --colour-status-success-10: rgba(16, 185, 129, 0.063);

  --colour-status-warning-solid: #f59e0b;
  --colour-status-warning-bg: #fef3c7;
  --colour-status-warning-text: #92400e;
  --colour-status-warning-15: rgba(245, 158, 11, 0.082);

  --colour-status-danger-solid: #ef4444;
  --colour-status-danger-hover: #dc2626;
  --colour-status-danger-bg: #fee2e2;
  --colour-status-danger-text: #991b1b;

  --colour-status-info-solid: #3b82f6;
  --colour-status-info-bg: #dbeafe;
  --colour-status-info-text: #1e40af;

  /* Purple branding variables */
  --colour-purple-solid: #8b5cf6;
  --colour-purple-bg: #ede9fe;
  --colour-purple-text: #5b21b6;

  /* Semantic Neutral Gray Scale */
  --colour-gray-50: #f9fafb;
  --colour-gray-100: #f3f4f6;
  --colour-gray-200: #e5e7eb;
  --colour-gray-300: #d1d5db;
  --colour-gray-400: #9ca3af;
  --colour-gray-500: #6b7280;
  --colour-gray-600: #4b5563;
  --colour-gray-700: #374151;
  --colour-gray-800: #1f2937;
  --colour-gray-900: #111827;
}

/* Ported theme dark overrides */
html[data-theme="dark"] {
  --colour-bg-primary: #0f172a;
  --colour-bg-secondary: #1e293b;
  --colour-bg-tertiary: #0f172a;
  --colour-bg-hover: #334155;
  --colour-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);

  --colour-text-primary: #f8fafc;
  --colour-text-secondary: #94a3b8;
  --colour-text-muted: #64748b;

  --colour-border-primary: #334155;
  --colour-border-secondary: #1e293b;

  --colour-brand-hover: #00a3e0;
  --colour-brand-light: #0b3c5d;
  --colour-brand-light-200: rgba(0, 151, 204, 0.35);
  --colour-brand-lightest: rgba(0, 151, 204, 0.08);
  --colour-header-bg: #085b8d;
  --colour-card-glass: rgba(30, 41, 59, 0.95);
  --colour-card-glass-border: rgba(255, 255, 255, 0.1);

  --colour-status-success-bg: #062f1e;
  --colour-status-success-text: #34d399;
  --colour-status-success-40: rgba(16, 185, 129, 0.4);
  --colour-status-success-10: rgba(16, 185, 129, 0.15);

  --colour-status-warning-bg: #452a0a;
  --colour-status-warning-text: #fbbf24;
  --colour-status-warning-15: rgba(245, 158, 11, 0.18);

  --colour-status-danger-bg: #4a1515;
  --colour-status-danger-text: #f87171;
  --colour-status-danger-hover: #f87171;

  --colour-status-info-bg: #1e293b;
  --colour-status-info-text: #60a5fa;

  /* Purple overrides */
  --colour-purple-solid: #a78bfa;
  --colour-purple-bg: #2e1065;
  --colour-purple-text: #ddd6fe;

  /* Inverted Gray Scale for seamless component dark adjustments */
  --colour-gray-50: #0f172a;
  --colour-gray-100: #1e293b;
  --colour-gray-200: #334155;
  --colour-gray-300: #475569;
  --colour-gray-400: #64748b;
  --colour-gray-500: #94a3b8;
  --colour-gray-600: #cbd5e1;
  --colour-gray-700: #e2e8f0;
  --colour-gray-800: #f1f5f9;
  --colour-gray-900: #f8fafc;
}