:root,
[data-theme='light'] {
  /* Atlantic palette — mirrors atlantic-yacht.com.
     White as the primary surface, warm beige as an alternating
     section wash, deep navy #061733 reserved for the footer /
     strong-accent block, black used for minimal CTAs.
     Brass is retained as an editorial highlight only. */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-2: #fbf8f2;      /* warm off-white (reference "two-col-beige") */
  --color-surface-offset: #f4f2ef; /* reference "bg-beige" */
  --color-divider: #e6e2d8;
  --color-border: #d9d4c6;

  --color-text: #333333;           /* reference body charcoal */
  --color-text-strong: #000000;    /* reference h2 pure black */
  --color-text-muted: #6a7078;
  --color-text-faint: #98a2a9;
  --color-text-inverse: #ffffff;

  --color-primary: #061733;        /* reference footer navy */
  --color-primary-hover: #0b2350;
  --color-primary-soft: #dfe3ec;

  --color-accent: #000000;         /* reference CTA: black, minimal */
  --color-accent-hover: #333333;
  --color-accent-soft: #ececec;

  --color-brass: #b8873d;          /* editorial-only highlight */
  --color-brass-soft: #f2e6cf;

  /* Aliases for names used in app.css that were never defined here.
     The Office / HR & Compensation blocks, the jobsheet and the timeline
     toolbar were all written against --color-surface-alt, --color-text-primary,
     --color-border-primary and --color-background. None of those existed, so
     every one of those rules silently fell back to its hardcoded light-mode
     literal -- or, where no fallback was given, to nothing at all. That looked
     right in light mode by accident and broke in dark mode: white reply
     bubbles with faint grey dates inside a dark navy card.
     Defined as aliases rather than literals so they follow the theme: the
     substitution happens at use time, so a [data-theme='dark'] ancestor
     supplies the dark value. */
  --color-surface-alt: var(--color-surface-2);
  --color-text-primary: var(--color-text);
  --color-border-primary: var(--color-border);
  --color-background: var(--color-bg);

  --color-success: #2f6f3a;
  --color-success-soft: #d7e6d8;
  --color-warning: #a26010;
  --color-warning-soft: #f0e0c5;
  --color-error:   #9a2b2b;
  --color-error-soft: #efd5d3;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(11, 31, 42, 0.08);
  --shadow-md: 0 6px 20px rgba(11, 31, 42, 0.10);
  --shadow-lg: 0 20px 40px rgba(11, 31, 42, 0.18);

  --transition: 200ms cubic-bezier(0.16, 1, 0.3, 1);

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Atlantic style: Barlow Condensed on all titles/headings (matches atlantic-yacht.com),
     EB Garamond for editorial prose and quotes, Inter for dense UI (labels, tables, buttons). */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Barlow Condensed', 'Inter', 'Helvetica Neue', sans-serif;
  --font-editorial: 'EB Garamond', 'Georgia', serif;
}

[data-theme='dark'] {
  /* Dark mode: deep navy — stays on-brand with the reference footer
     colour extended to the whole surface. */
  --color-bg: #061733;
  --color-surface: #0a1c3d;
  --color-surface-2: #0f2447;
  --color-surface-offset: #142c54;
  --color-divider: #1c3660;
  --color-border: #253f70;
  --color-text: #f4f2ef;
  --color-text-strong: #ffffff;
  --color-text-muted: #a9b2c4;
  --color-text-faint: #6a7692;
  --color-primary: #f4f2ef;
  --color-primary-hover: #ffffff;
  --color-primary-soft: #1a2f5a;
  --color-accent: #f4f2ef;
  --color-accent-hover: #ffffff;
  --color-accent-soft: #1a2f5a;
  --color-brass: #d9a866;
  --color-brass-soft: #2a2116;

  /* The aliases must be repeated here, not just in :root. A custom property
     whose value contains var() is substituted at computed-value time on the
     element where it is declared -- so an alias declared only on :root (html)
     resolves against the light tokens once and inherits that fixed colour,
     ignoring the theme entirely. Redeclaring them under the dark selector is
     what actually makes them follow the theme. */
  --color-surface-alt: var(--color-surface-2);
  --color-text-primary: var(--color-text);
  --color-border-primary: var(--color-border);
  --color-background: var(--color-bg);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

body {
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
}

img, svg { display: block; max-width: 100%; }
button { cursor: pointer; background: none; border: none; color: inherit; font: inherit; }
input, textarea, select { font: inherit; color: inherit; }
/* Reference typography: Barlow Condensed, medium weight,
   UPPERCASE for h1/h2, mixed-case for smaller subheads. Wide
   letter-spacing on primary hero titles. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  letter-spacing: 0.02em;
  font-weight: 500;
  color: var(--color-text-strong, var(--color-text));
}
h1, h2 { text-transform: uppercase; letter-spacing: 0.04em; }
h3, h4 { text-transform: none; letter-spacing: 0.01em; }
/* Optional editorial spans */
.editorial { font-family: var(--font-editorial); }
a { color: inherit; }

::selection { background: var(--color-accent-soft); color: var(--color-text); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 4px; }