:root {
  /* Brand personality: Engineering Solar Excellence (Client colors) */
  --color-primary: #a40213;             /* Red — brand accents & CTAs */
  --color-primary-dark: #82010e;
  --color-primary-container: #ffdad6;
  --color-on-primary: #ffffff;

  --color-charcoal: #131314;             /* on-surface / body text */
  --color-navy-grey: #2f3131;            /* secondary structural color */
  --color-secondary: #a40213;
  --color-secondary-container: #a40213;
  --color-on-secondary: #ffffff;
  --color-on-secondary-container: #ffaea6;
  --color-tertiary: #555759;             /* was #e3e2e2 — too light, now readable dark-grey */
  --color-on-surface-variant: #444748;   /* body subtext, labels — darker for legibility */
  --color-outline-technical: #d0d0d0;    /* border lines — kept subtle */

  --color-surface: #ffffff;              /* main background */
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f5f5f5;
  --color-surface-container: #f8f9fa;
  --color-surface-container-high: #ebebeb;
  --color-surface-container-highest: #e1e2e2;
  --color-surface-dim: #131314;
  --color-on-surface: #0f172a;
  --color-on-background: #0f172a;

  --color-outline: #9f8c8a;
  --color-outline-variant: #d1cfcf;

  --color-error: #ffb4ab;
  --color-error-container: #93000a;
  --color-on-error: #690005;
  --color-on-error-container: #ffdad6;

  /* Corner radii */
  --rounded-sm: 4px;
  --rounded-default: 8px;
  --rounded-md: 12px;
  --rounded-lg: 16px;
  --rounded-full: 9999px;

  /* Spacing Rhythm (8px base) */
  --spacing-base: 8px;
  --spacing-xs: 4px;
  --spacing-sm: 12px;
  --spacing-md: 24px;
  --spacing-lg: 48px;
  --spacing-xl: 80px;

  /* Section padding */
  --section-padding: 80px;
  --section-padding-tablet: 64px;
  --section-padding-mobile: 48px;

  /* Grid Layouts */
  --container-max: 1280px;
  --gutter: 24px;
  --margin-desktop: 64px;
  --margin-tablet: 32px;
  --margin-mobile: 16px;

  /* Typography responsive scaling */
  --font-display-lg: clamp(36px, 6vw, 80px);
  --font-headline-lg: clamp(28px, 4vw, 48px);
  --font-headline-md: clamp(24px, 3vw, 32px);
}

.dark {
  --color-on-secondary: #313030;
  --color-on-tertiary-fixed: #1a1c1c;
  --color-on-tertiary-fixed-variant: #454747;
  --color-surface-variant: #343535;
  --color-on-background: #e4e2e2;
  --color-on-secondary-container: #bab8b7;
  --color-secondary-container: #4a4949;
  --color-on-secondary-fixed: #1c1b1b;
  --color-tertiary-fixed: #e2e2e2;
  --color-on-error-container: #ffdad6;
  --color-on-primary-container: #fff2f0;
  --color-secondary-fixed-dim: #c8c6c5;
  --color-tertiary-container: #6e7070;
  --color-error: #ffb4ab;
  --color-inverse-on-surface: #303030;
  --color-on-tertiary: #2f3131;
  --color-on-primary-fixed-variant: #930010;
  --color-primary-fixed: #ffdad6;
  --color-on-error: #690005;
  --color-on-surface: #e4e2e2;
  --color-on-primary: #680008;
  --color-surface-container-high: #2a2a2a;
  --color-error-container: #93000a;
  --color-on-tertiary-container: #f4f4f4;
  --color-secondary: #c8c6c5;
  --color-tertiary-fixed-dim: #c6c6c7;
  --color-surface-container-lowest: #0e0e0e;
  --color-background: #131314;
  --color-on-secondary-fixed-variant: #474646;
  --color-tertiary: #c6c6c7;
  --color-inverse-primary: #ba1a20;
  --color-surface-container-highest: #343535;
  --color-surface: #131314;
  --color-secondary-fixed: #e5e2e1;
  --color-surface-tint: #ffb3ac;
  --color-surface-bright: #393939;
  --color-surface-dim: #131314;
  --color-on-primary-fixed: #410003;
  --color-primary: #ffb3ac;
  --color-outline-variant: #5b403d;
  --color-outline: #ab8985;
  --color-on-surface-variant: #e4beba;
  --color-surface-container-low: #1b1c1c;
  --color-inverse-surface: #e4e2e2;
  --color-primary-container: #d32f2f;
  --color-primary-fixed-dim: #ffb3ac;
  --color-surface-container: #1f2020;
  --color-on-tertiary-fixed-variant: #454747;
  --color-charcoal: #131314;
  --color-navy-grey: #1f2020;

  --rounded-default: 0px;
  --rounded-lg: 0px;
  --rounded-xl: 0px;
}

/* Premium theme switching transitions */
html.light, html.dark,
html.light body, html.dark body,
html.light nav, html.dark nav,
html.light footer, html.dark footer,
html.light .bg-surface, html.dark .bg-surface,
html.light .bg-surface-container, html.dark .bg-surface-container,
html.light .text-on-surface, html.dark .text-on-surface,
html.light .text-on-surface-variant, html.dark .text-on-surface-variant {
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
              color 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
              border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
              fill 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
              stroke 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Global utility overrides for Dark Mode to prevent hardcoded light styles in HTML files */
.dark .bg-white,
.dark div[class*="bg-white"],
.dark section[class*="bg-white"] {
  background-color: var(--color-surface) !important;
}

.dark .bg-gray-50,
.dark .bg-slate-50 {
  background-color: var(--color-surface-container-low) !important;
}

.dark .bg-gray-100 {
  background-color: var(--color-surface-container-high) !important;
}

/* Text overrides */
.dark .text-slate-900,
.dark .text-gray-900,
.dark .text-gray-800,
.dark .text-gray-700 {
  color: var(--color-on-surface) !important;
}

.dark .text-slate-600,
.dark .text-gray-600,
.dark .text-gray-500 {
  color: var(--color-on-surface-variant) !important;
}

.dark .text-secondary-container {
  color: var(--color-primary) !important; /* Maps to readable rose/red accent in dark mode */
}

/* Border overrides */
.dark .border-gray-100,
.dark .border-gray-200,
.dark .border-gray-300 {
  border-color: var(--color-outline-variant) !important;
}