/* ==========================================================
   Osher Shipping — colour tokens
   Light maritime palette: grey-blue, fog, steel, brass accent
   ========================================================== */

:root,
[data-theme="light"] {
  --color-bg: #f4f7f9;
  --color-bg-alt: #eaf0f4;
  --color-surface: #e6edf2;
  --color-surface-2: #f8fbfc;
  --color-panel: rgba(248, 251, 252, 0.86);
  --color-text: #16232c;
  --color-text-muted: #4a5c68;
  --color-text-faint: #7b8b96;
  --color-line: rgba(22, 35, 44, 0.14);
  --color-line-strong: rgba(22, 35, 44, 0.28);

  --color-sea: #2f6b86;
  --color-sea-deep: #1d4a60;
  --color-sea-bright: #4f92ad;
  --color-steel: #8ba7b6;
  --color-brass: #a98a52;
  --color-brass-bright: #c4a56a;

  --color-accent: var(--color-sea);
  --color-accent-bright: var(--color-sea-bright);

  --color-image-overlay: rgba(18, 38, 50, 0.42);
  --shadow-soft: 0 12px 32px rgba(29, 74, 96, 0.08);
  --shadow-deep: 0 28px 80px rgba(29, 74, 96, 0.16);
  --hero-scrim:
    linear-gradient(90deg, rgba(16, 36, 48, 0.82) 0%, rgba(16, 36, 48, 0.44) 48%, rgba(16, 36, 48, 0.12) 100%),
    linear-gradient(0deg, rgba(16, 36, 48, 0.62), transparent 55%);
}

[data-theme="dark"] {
  --color-bg: #0d1a22;
  --color-bg-alt: #112330;
  --color-surface: #14262f;
  --color-surface-2: #1a303b;
  --color-panel: rgba(20, 38, 47, 0.84);
  --color-text: #e8f1f5;
  --color-text-muted: #a7bcc7;
  --color-text-faint: #7c94a1;
  --color-line: rgba(232, 241, 245, 0.16);
  --color-line-strong: rgba(232, 241, 245, 0.3);

  --color-sea: #6fb0c9;
  --color-sea-deep: #becfd9;
  --color-sea-bright: #8fcbe0;
  --color-steel: #7f9dae;
  --color-brass: #c9a86a;
  --color-brass-bright: #e0c48c;

  --color-accent: var(--color-sea);
  --color-accent-bright: var(--color-sea-bright);

  --color-image-overlay: rgba(6, 16, 22, 0.55);
  --shadow-soft: 0 12px 32px rgba(0, 0, 0, 0.3);
  --shadow-deep: 0 28px 80px rgba(0, 0, 0, 0.45);
  --hero-scrim:
    linear-gradient(90deg, rgba(6, 16, 22, 0.9) 0%, rgba(6, 16, 22, 0.5) 48%, rgba(6, 16, 22, 0.2) 100%),
    linear-gradient(0deg, rgba(6, 16, 22, 0.72), transparent 55%);
}