/* Maritiem Efficiency — Design tokens v3 */

:root,
[data-theme='light'] {
  --bg: #fafaf8;
  --bg-alt: #f3f2ef;
  --surface: #ffffff;
  --surface-muted: #f7f6f3;

  --ink: #0c1a26;
  --ink-secondary: #3d4a56;
  --ink-muted: #6b7680;
  --ink-faint: #9aa3ab;
  --ink-inverse: #f5f5f3;

  --line: #e2e0db;
  --line-strong: #cfcbc4;

  --brand: #0c1a26;
  --brand-soft: #1a3045;
  --accent: #7a6548;
  --accent-soft: #ebe6de;

  --logo-navy: #0a1f35;
  --logo-gold: #b8923a;
  --logo-gold-hover: #a07828;

  --color-bg: var(--bg);
  --color-bg-alt: var(--bg-alt);
  --color-surface: var(--surface-muted);
  --color-surface-2: var(--surface);
  --color-surface-offset: var(--bg-alt);
  --color-divider: var(--line);
  --color-border: var(--line);

  --color-navy-deep: #081420;
  --color-navy: var(--brand);
  --color-navy-mid: var(--brand-soft);
  --color-navy-light: #2d4a63;

  --color-gold: var(--accent);
  --color-gold-hover: #655337;
  --color-gold-light: var(--accent-soft);
  --color-gold-pale: #f4f0ea;

  --color-text: var(--ink);
  --color-text-muted: var(--ink-muted);
  --color-text-faint: var(--ink-faint);
  --color-text-inverse: var(--ink-inverse);

  --color-primary: var(--brand);
  --color-primary-hover: var(--brand-soft);
  --color-error: #a33;

  --content-narrow: 38rem;
  --content-default: 48rem;
  --content-wide: 72rem;
  --content-max: 90rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 7.5rem;
  --space-40: 10rem;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem);
  --text-2xl: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  --text-3xl: clamp(2.25rem, 1.4rem + 2.4vw, 3.25rem);
  --text-hero: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem);

  --font-display: 'Newsreader', 'Georgia', serif;
  --font-body: 'IBM Plex Sans', 'Helvetica Neue', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Consolas', monospace;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;

  --shadow-sm: 0 1px 2px rgba(12, 26, 38, 0.04);
  --shadow-md: 0 8px 30px rgba(12, 26, 38, 0.06);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --transition: 220ms var(--ease);
  --transition-slow: 600ms var(--ease);

  --header-height: 4.5rem;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

[data-theme='dark'] {
  --bg: #0a1219;
  --bg-alt: #0f1820;
  --surface: #121c26;
  --surface-muted: #0d151c;
  --ink: #eceae6;
  --ink-secondary: #b8c0c8;
  --ink-muted: #8a959f;
  --ink-faint: #5c6770;
  --line: #24303c;
  --line-strong: #324050;
  --brand: #dce3ea;
  --brand-soft: #b8c5d0;
  --accent: #c4a96a;
  --accent-soft: #2a2418;
  --color-bg: var(--bg);
  --color-bg-alt: var(--bg-alt);
  --color-surface: var(--surface-muted);
  --color-surface-2: var(--surface);
  --color-text: var(--ink);
  --color-text-muted: var(--ink-muted);
  --color-navy: var(--brand);
  --color-gold: var(--accent);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.35);
}