/**
 * Agentic Panama — white / blue (flag whisper ~10%), high contrast, calm.
 * Light = brand default. Dark = companion palette (not a naive invert).
 * See ../../brand-concepts.md and /brand/.
 */
:root {
  color-scheme: light;

  --white: #ffffff;
  --paper: #f5f8fc;
  --bg-raised: #ffffff;

  --blue: #0052a5;
  --blue-deep: #003d7c;
  --blue-soft: #1a6bb5;

  --ink: #0b1526;
  --ink-soft: #4a5c73;

  --line: #cfd8e6;
  --line-strong: #a8b6cc;

  /* ~10% patriotic — mark / rare emphasis, not surfaces */
  --red: #d21034;
  --red-deep: #a80d29;

  --ok: #1f7a45;
  --err: #c62828;

  --bg: var(--paper);
  --text: var(--ink);
  --text-muted: var(--ink-soft);
  --link: var(--blue-soft);
  --link-hover: var(--blue-deep);
  --accent: var(--blue);
  --accent-hover: var(--blue-deep);
  --btn-fg: #ffffff;
  --success: var(--ok);
  --error: var(--err);

  /* Legacy aliases (components / older CSS) */
  --sea: var(--blue);
  --sea-deep: var(--blue-deep);
  --lagoon: var(--blue-soft);
  --foam: var(--paper);
  --coral: var(--blue);
  --coral-deep: var(--blue-deep);

  --font-display: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --font-body: "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", monospace;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;

  --measure: 38rem;
  --page-max: 68rem;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur-med: 500ms;

  --theme-toggle-bg: var(--white);
  --theme-toggle-fg: var(--blue-deep);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --white: #f2f6fb;
    --paper: #0a1220;
    --bg-raised: #121c2e;

    --blue: #4d9aef;
    --blue-deep: #7eb6f5;
    --blue-soft: #7eb6f5;

    --ink: #f2f6fb;
    --ink-soft: #9aacc2;

    --line: #2a3a52;
    --line-strong: #3d516e;

    --red: #f05570;
    --red-deep: #d21034;

    --ok: #5cb87a;
    --err: #f08080;

    --bg: var(--paper);
    --text: var(--ink);
    --text-muted: var(--ink-soft);
    --link: var(--blue);
    --link-hover: var(--blue-deep);
    --accent: var(--blue);
    --accent-hover: var(--blue-deep);
    --btn-fg: #0a1220;

    --sea: var(--blue);
    --sea-deep: var(--blue-deep);
    --lagoon: var(--blue-soft);
    --foam: #152238;
    --coral: var(--blue);
    --coral-deep: var(--blue-deep);

    --theme-toggle-bg: var(--bg-raised);
    --theme-toggle-fg: var(--blue);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --white: #f2f6fb;
  --paper: #0a1220;
  --bg-raised: #121c2e;

  --blue: #4d9aef;
  --blue-deep: #7eb6f5;
  --blue-soft: #7eb6f5;

  --ink: #f2f6fb;
  --ink-soft: #9aacc2;

  --line: #2a3a52;
  --line-strong: #3d516e;

  --red: #f05570;
  --red-deep: #d21034;

  --ok: #5cb87a;
  --err: #f08080;

  --bg: var(--paper);
  --text: var(--ink);
  --text-muted: var(--ink-soft);
  --link: var(--blue);
  --link-hover: var(--blue-deep);
  --accent: var(--blue);
  --accent-hover: var(--blue-deep);
  --btn-fg: #0a1220;

  --sea: var(--blue);
  --sea-deep: var(--blue-deep);
  --lagoon: var(--blue-soft);
  --foam: #152238;
  --coral: var(--blue);
  --coral-deep: var(--blue-deep);

  --theme-toggle-bg: var(--bg-raised);
  --theme-toggle-fg: var(--blue);
}

:root[data-theme="light"] {
  color-scheme: light;
}