html[data-theme="azure"] {
  --ink: #0d2b3d;
  --ink-2: #19516a;
  --deep: #0b4d68;
  --petrol: #16758d;
  --mint: #a9e8ea;
  --signal: #e87255;
  --paper: #edf8fa;
  --paper-2: #dceef3;
  --line: rgba(13, 43, 61, 0.15);
  --shadow: 0 28px 90px rgba(11, 77, 104, 0.16);
  --hero-surface: #0b4d68;
}

html[data-theme="azure"] body {
  background:
    linear-gradient(90deg, rgba(13, 43, 61, 0.05) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(180deg, rgba(13, 43, 61, 0.035) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(135deg, #edf8fa 0%, #dceef3 52%, #fff1dd 100%);
}

html[data-theme="azure"] .roadways-section,
html[data-theme="azure"] .petrochem-section,
html[data-theme="azure"] .contact-section {
  background: linear-gradient(180deg, #0b4d68, #19516a);
}

html[data-theme="azure"] .clients-section {
  background: linear-gradient(180deg, #edf8fa, #dceef3);
}

html[data-theme="azure"] .strategy-grid article {
  background: linear-gradient(145deg, #0b4d68, #16758d);
}

html[data-theme="azure"] .strategy-grid article:nth-child(2),
html[data-theme="azure"] .custom-panel {
  color: var(--ink);
  background: linear-gradient(145deg, #a9e8ea, #f4db94);
}

html[data-theme="azure"] .media-panel figcaption {
  background: rgba(11, 77, 104, 0.97);
}

html[data-theme="harbour"] {
  --ink: #092a3a;
  --ink-2: #17485d;
  --deep: #082e45;
  --petrol: #16758d;
  --mint: #9ce4db;
  --signal: #ffad62;
  --paper: #f0f8fa;
  --paper-2: #dceff2;
  --line: rgba(9, 42, 58, 0.15);
  --shadow: 0 28px 90px rgba(8, 46, 69, 0.16);
  --hero-surface: #082e45;
}

html[data-theme="harbour"] body {
  background:
    linear-gradient(90deg, rgba(9, 42, 58, 0.05) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(180deg, rgba(9, 42, 58, 0.035) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(135deg, #eef9fb 0%, #dceef4 52%, #fbf4df 100%);
}

html[data-theme="harbour"] .hero-shell::before {
  background:
    linear-gradient(90deg, rgba(4, 32, 48, 0.9) 0%, rgba(4, 32, 48, 0.7) 36%, rgba(4, 32, 48, 0.24) 70%, rgba(4, 32, 48, 0.78) 100%),
    linear-gradient(180deg, rgba(4, 32, 48, 0.12), rgba(4, 32, 48, 0.92));
}

html[data-theme="harbour"] .roadways-section,
html[data-theme="harbour"] .petrochem-section,
html[data-theme="harbour"] .contact-section {
  background: linear-gradient(180deg, #082e45, #103d56);
}

html[data-theme="harbour"] .clients-section {
  background: linear-gradient(180deg, #f0f9fa, #dbeef2);
}

html[data-theme="harbour"] .strategy-grid article {
  background: linear-gradient(145deg, #082e45, #17657a);
}

html[data-theme="harbour"] .strategy-grid article:nth-child(2),
html[data-theme="harbour"] .custom-panel {
  color: var(--ink);
  background: linear-gradient(145deg, #9ce4db, #f4db94);
}

html[data-theme="harbour"] .media-panel figcaption {
  background: rgba(8, 46, 69, 0.97);
}

html[data-theme="dawn"] {
  --ink: #31202a;
  --ink-2: #5c3547;
  --deep: #3d2234;
  --petrol: #a04e70;
  --mint: #c5f0bb;
  --signal: #ff9b70;
  --paper: #fff4f1;
  --paper-2: #f6e1de;
  --line: rgba(61, 34, 52, 0.15);
  --shadow: 0 28px 90px rgba(61, 34, 52, 0.15);
  --hero-surface: #3d2234;
}

html[data-theme="dawn"] body {
  background:
    linear-gradient(90deg, rgba(61, 34, 52, 0.05) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(180deg, rgba(61, 34, 52, 0.035) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(135deg, #fff4f1 0%, #f5e0e1 52%, #eff5dd 100%);
}

html[data-theme="dawn"] .hero-shell::before {
  background:
    linear-gradient(90deg, rgba(49, 24, 39, 0.9) 0%, rgba(49, 24, 39, 0.7) 36%, rgba(49, 24, 39, 0.24) 70%, rgba(49, 24, 39, 0.8) 100%),
    linear-gradient(180deg, rgba(49, 24, 39, 0.1), rgba(49, 24, 39, 0.92));
}

html[data-theme="dawn"] .roadways-section,
html[data-theme="dawn"] .petrochem-section,
html[data-theme="dawn"] .contact-section {
  background: linear-gradient(180deg, #3d2234, #592c43);
}

html[data-theme="dawn"] .clients-section {
  background: linear-gradient(180deg, #fff4f1, #f1e1d9);
}

html[data-theme="dawn"] .strategy-grid article {
  background: linear-gradient(145deg, #3d2234, #87445f);
}

html[data-theme="dawn"] .strategy-grid article:nth-child(2),
html[data-theme="dawn"] .custom-panel {
  color: var(--ink);
  background: linear-gradient(145deg, #c5f0bb, #ffd3b8);
}

html[data-theme="dawn"] .media-panel figcaption {
  background: rgba(61, 34, 52, 0.97);
}