/* eOceans brand layer — fonts + palette shared by the demo hub and every demo.
   Colors & fonts mirror the mobile app (mobile-app-v2/src/config/styles.js and
   App.jsx). Link this before any page-specific <style>. */

/* ---------- Fonts (self-hosted; no network requests) ---------- */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("fonts/Montserrat-Regular.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 400;
  font-display: swap; src: url("fonts/Montserrat-Regular-Italic.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("fonts/Montserrat-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("fonts/Montserrat-Bold.ttf") format("truetype"); }
@font-face { font-family: "Inconsolata"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("fonts/Inconsolata-ExtraLight.ttf") format("truetype"); }
@font-face { font-family: "Inconsolata"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("fonts/Inconsolata-Light.ttf") format("truetype"); }

/* ---------- Brand palette ---------- */
:root {
  /* deep brand blues (mobile: darkBlue/backgroundColorMain/Secondary) */
  --abyss: #090F2E; --ink: #0f132e; --ink-2: #081336;
  /* accent blues (mobile: lightBlue / middleBlue) */
  --current: #1f91c0; --current-deep: #245fa9;
  /* was coral — now brand pink (be3493) */
  --coral: #be3493; --coral-soft: #d98cc4;
  /* light surfaces — cool neutrals */
  --sand: #eef2f6; --paper: #f7f9fb; --paper-2: #eef2f6; --foam: #ffffff;
  --text: #12233f; --text-soft: #5a6b82; --line: #d5dde6; --line-soft: #e6ecf2;

  /* chart hues drawn from the brand set */
  --c-teal: #245fa9; --c-coral: #be3493; --c-blue: #1f91c0; --c-foam: #7ccbb4;
  --heat-0: #e8f1fa; --heat-1: #245fa9; --heat-deep: #0d3a66;
  /* status (mobile: green / alert golden / red) */
  --good: #009345; --warn: #FEAE00; --crit: #EE220C;

  --bg: var(--paper); --surface: var(--foam); --surface-2: var(--paper-2);
  --heading: var(--ink); --accent: var(--current-deep); --chart-surface: var(--foam);
  /* legible text on an --accent fill (accent is dark in light mode, light in dark mode) */
  --on-accent: #ffffff;

  /* Type — Montserrat everywhere (headings + body), Inconsolata for mono.
     --serif kept as a variable name for demo compatibility; now Montserrat. */
  --serif: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "Inconsolata", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1030; --surface: #131a3a; --surface-2: #0b1130;
    --heading: #eaf0ff; --accent: #6fcbe7; --chart-surface: #131a3a;
    --text: #cdd6e8; --text-soft: #8b9bc0; --line: #26305a; --line-soft: #1a2148;
    --c-teal: #5b9bd8; --c-coral: #d46bb8; --c-blue: #6fcbe7; --c-foam: #7ccbb4;
    --heat-0: #141c3e; --heat-1: #3f86c8; --heat-deep: #8fc0ec;
    --sand: #131a3a; --on-accent: #04171a;
  }
}
:root[data-theme="dark"] {
  --bg: #0b1030; --surface: #131a3a; --surface-2: #0b1130;
  --heading: #eaf0ff; --accent: #6fcbe7; --chart-surface: #131a3a;
  --text: #cdd6e8; --text-soft: #8b9bc0; --line: #26305a; --line-soft: #1a2148;
  --c-teal: #5b9bd8; --c-coral: #d46bb8; --c-blue: #6fcbe7; --c-foam: #7ccbb4;
  --heat-0: #141c3e; --heat-1: #3f86c8; --heat-deep: #8fc0ec; --sand: #131a3a;
  --on-accent: #04171a;
}
:root[data-theme="light"] {
  --bg: var(--paper); --surface: var(--foam); --surface-2: var(--paper-2);
  --heading: var(--ink); --accent: var(--current-deep); --chart-surface: var(--foam);
  --on-accent: #ffffff;
  --text: #12233f; --text-soft: #5a6b82; --line: #d5dde6; --line-soft: #e6ecf2;
  --c-teal: #245fa9; --c-coral: #be3493; --c-blue: #1f91c0; --c-foam: #7ccbb4;
  --heat-0: #e8f1fa; --heat-1: #245fa9; --heat-deep: #0d3a66; --sand: #eef2f6;
}

/* ---------- Mock-up disclaimer (shown under the stage on every scene) ---------- */
.screen-col { display: flex; flex-direction: column; align-items: stretch; min-width: 0; max-width: 100%; }
.mockup-note { margin: 0.6rem 0 0; font-family: var(--sans); font-size: 0.68rem; line-height: 1.4;
  color: var(--text-soft); text-align: center; }