/* FPSO Projects — shared brand theme (tokens, dark/light mode, logo swap, day/night toggle)
   Mirrors the inline <style> block in fpso-project-tracker.html — keep in sync manually.
   Do not add this to the Tailwind build (src/input.css); it is hand-authored and loaded as-is. */

:root {
  --page-bg: #f5f5f8;
  --dot-color: #e7e7ea;
  --surface: #ffffff;
  --surface-alt: #f5f5f8;
  --surface-hi: #e3f2fb;
  --border: color-mix(in srgb, #1d1f20 12%, transparent);
  --track-bg: #e7e7ea;
  --text: #1d1f20;
  --text-secondary: #5d5d60;
  --text-muted: #7a7a7d;
  --text-faint: #98989b;
  --chip-bg: #e7e7ea;
  --label-faint: #b7b7ba;
  --card-hover: #f5f5f8;
  --input-border: #d4d4d7;
  --close-hover: #2b2b2d;
  --skeleton-a: #f5f5f8;
  --skeleton-b: #e7e7ea;
  --accent: #0077b6;
  --accent-hover: #023e8a;
  --accent-secondary: #0b3d91;
  --accent-secondary-hover: #072a66;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page-bg: #0d1620;
    --dot-color: #18242f;
    --surface: #16222e;
    --surface-alt: #111b25;
    --surface-hi: #0a2c4d;
    --border: color-mix(in srgb, #dbe9f5 10%, transparent);
    --track-bg: #1c2b38;
    --text: #eaf2f8;
    --text-secondary: #cddce8;
    --text-muted: #93b0c4;
    --text-faint: #6f8ba0;
    --chip-bg: #1c2b38;
    --label-faint: #547389;
    --card-hover: #1c2b38;
    --input-border: #2c4459;
    --close-hover: #eaf2f8;
    --skeleton-a: #16222e;
    --skeleton-b: #1c2b38;
    --accent: #00b4d8;
    --accent-hover: #48cae4;
    --accent-secondary: #4361ee;
    --accent-secondary-hover: #5a75f0;
  }
}
:root[data-theme="dark"] {
  --page-bg: #0d1620; --dot-color: #18242f; --surface: #16222e; --surface-alt: #111b25;
  --surface-hi: #0a2c4d; --border: color-mix(in srgb, #dbe9f5 10%, transparent); --track-bg: #1c2b38; --text: #eaf2f8;
  --text-secondary: #cddce8; --text-muted: #93b0c4; --text-faint: #6f8ba0; --chip-bg: #1c2b38;
  --label-faint: #547389; --card-hover: #1c2b38; --input-border: #2c4459; --close-hover: #eaf2f8;
  --skeleton-a: #16222e; --skeleton-b: #1c2b38;
  --accent: #00b4d8; --accent-hover: #48cae4; --accent-secondary: #4361ee; --accent-secondary-hover: #5a75f0;
}
:root[data-theme="light"] {
  --page-bg: #f5f5f8; --dot-color: #e7e7ea; --surface: #ffffff; --surface-alt: #f5f5f8;
  --surface-hi: #e3f2fb; --border: color-mix(in srgb, #1d1f20 12%, transparent); --track-bg: #e7e7ea; --text: #1d1f20;
  --text-secondary: #5d5d60; --text-muted: #7a7a7d; --text-faint: #98989b; --chip-bg: #e7e7ea;
  --label-faint: #b7b7ba; --card-hover: #f5f5f8; --input-border: #d4d4d7; --close-hover: #2b2b2d;
  --skeleton-a: #f5f5f8; --skeleton-b: #e7e7ea;
  --accent: #0077b6; --accent-hover: #023e8a; --accent-secondary: #0b3d91; --accent-secondary-hover: #072a66;
}

/* Header logo — color mark in light mode, pale mark in dark mode */
.logo-img--dark { opacity: 0; }
.logo-img--light { opacity: 1; }
@media (prefers-color-scheme: dark) {
  .logo-img--dark { opacity: 1; }
  .logo-img--light { opacity: 0; }
}
:root[data-theme="dark"] .logo-img--dark { opacity: 1; }
:root[data-theme="dark"] .logo-img--light { opacity: 0; }
:root[data-theme="light"] .logo-img--dark { opacity: 0; }
:root[data-theme="light"] .logo-img--light { opacity: 1; }

/* Day/night switch — FPSO vessel replaces the sun disc (base: Uiverse.io by Galahhad) */
.theme-switch {
  --toggle-size: 13px;
  --container-width: 5.625em;
  --container-height: 2.5em;
  --container-radius: 6.25em;
  --container-night-bg: #0d1620;
  --circle-container-diameter: 3.375em;
  --sun-moon-diameter: 2.125em;
  --circle-container-offset: calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);
  --stars-color: #fff;
  --clouds-color: #f3fdff;
  --back-clouds-color: #aacadf;
  --transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25);
  --circle-transition: .3s cubic-bezier(0, -0.02, 0.35, 1.17);
  flex-shrink: 0;
}
.theme-switch, .theme-switch *, .theme-switch *::before, .theme-switch *::after {
  box-sizing: border-box; margin: 0; padding: 0; font-size: var(--toggle-size);
}
.theme-switch__container {
  width: var(--container-width); height: var(--container-height);
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-hover) 100%);
  border-radius: var(--container-radius); overflow: hidden; cursor: pointer;
  box-shadow: 0em -0.062em 0.062em rgba(0,0,0,.25), 0em 0.062em 0.125em rgba(255,255,255,.5);
  transition: var(--transition); position: relative;
}
.theme-switch__container::before {
  content: ""; position: absolute; z-index: 1; inset: 0;
  box-shadow: 0em 0.05em 0.187em rgba(0,0,0,.25) inset, 0em 0.05em 0.187em rgba(0,0,0,.25) inset;
  border-radius: var(--container-radius);
}
.theme-switch__checkbox { display: none; }
.theme-switch__circle-container {
  width: var(--circle-container-diameter); height: var(--circle-container-diameter);
  background-color: rgba(255,255,255,.1); position: absolute;
  left: var(--circle-container-offset); top: var(--circle-container-offset);
  border-radius: var(--container-radius);
  box-shadow: inset 0 0 0 3.375em rgba(255,255,255,.1), 0 0 0 0.625em rgba(255,255,255,.1), 0 0 0 1.25em rgba(255,255,255,.1);
  display: flex; transition: var(--circle-transition); pointer-events: none;
}
.theme-switch__sun-moon-container {
  pointer-events: auto; position: relative; z-index: 2; overflow: hidden;
  width: var(--sun-moon-diameter); height: var(--sun-moon-diameter); margin: auto;
  border-radius: var(--container-radius);
  background: radial-gradient(circle at 35% 26%, #f2fafe 0%, #c2e9f7 42%, #8acfea 100%);
  box-shadow: 0.062em 0.062em 0.062em 0em rgba(255,255,255,.75) inset, 0em -0.062em 0.062em 0em rgba(11,61,145,.45) inset;
  filter: drop-shadow(0.062em 0.125em 0.125em rgba(0,0,0,.25));
  transition: var(--transition);
}
/* The FPSO stays on screen in both day and night — only its palette and the sky behind it change */
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__sun-moon-container {
  background: radial-gradient(circle at 35% 26%, #24314f 0%, #131c30 55%, #0a0f1c 100%);
}
.theme-switch__ship { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.theme-switch__ship .fpso-hull { fill: #0b3d91; transition: fill 0.5s ease; }
.theme-switch__ship .fpso-deck { fill: #eaf7fd; transition: fill 0.5s ease; }
.theme-switch__ship .fpso-sea { fill: #48cae4; transition: fill 0.5s ease; }
.theme-switch__ship .fpso-crest { stroke: #fff; transition: stroke 0.5s ease; }
.theme-switch__ship .fpso-flare { transition: filter 0.5s ease; }
.theme-switch__ship .fpso-star { opacity: 0; transition: opacity 0.5s ease; }
.theme-switch__checkbox:checked + .theme-switch__container .fpso-hull { fill: #aebedf; }
.theme-switch__checkbox:checked + .theme-switch__container .fpso-deck { fill: #dce8fb; }
.theme-switch__checkbox:checked + .theme-switch__container .fpso-sea { fill: #0b2a4a; }
.theme-switch__checkbox:checked + .theme-switch__container .fpso-crest { stroke: #3a6fa8; }
.theme-switch__checkbox:checked + .theme-switch__container .fpso-flare { filter: drop-shadow(0 0 0.05em #f5a524); }
.theme-switch__checkbox:checked + .theme-switch__container .fpso-star { opacity: 1; }
.theme-switch__clouds {
  width: 1.25em; height: 1.25em; background-color: var(--clouds-color); border-radius: var(--container-radius);
  position: absolute; bottom: -0.625em; left: 0.312em;
  box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color), 4.125em -2.125em 0 0.437em var(--back-clouds-color);
  transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25);
}
.theme-switch__stars-container {
  position: absolute; color: var(--stars-color); top: -100%; left: 0.312em; width: 2.75em; height: auto;
  transition: var(--transition);
}
.theme-switch__checkbox:checked + .theme-switch__container { background: linear-gradient(180deg, var(--container-night-bg) 0%, #1c2b38 100%); }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container { left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter)); }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container:hover { left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - 0.187em); }
.theme-switch__circle-container:hover { left: calc(var(--circle-container-offset) + 0.187em); }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__clouds { bottom: -4.062em; }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__stars-container { top: 50%; transform: translateY(-50%); }
.theme-switch__container:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Header/footer/CTA chrome — theme-aware (was permanently dark navy) */
header, footer, .cta-band { background-color: var(--page-bg); }
header .text-slate-400, footer .text-slate-400, .cta-band .text-slate-400 { color: var(--text-muted); }
header .text-white, .cta-band .text-white, footer .text-slate-300 { color: var(--text); }
header .hover\:text-white:hover, footer .hover\:text-white:hover { color: var(--text) !important; }
footer .border-slate-800 { border-color: var(--border) !important; }

body { font-family: 'Barlow', sans-serif; background: var(--page-bg); color: var(--text); }
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: radial-gradient(circle, var(--dot-color) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}
@keyframes slideUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
.reveal { opacity: 0; }
.reveal.revealed { animation: slideUp 0.45s cubic-bezier(0.22,1,0.36,1) both; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1cec8; border-radius: 3px; }

@media (max-width: 640px) {
  .logo-anchor { width: 160px !important; }
}