/* MergeSafe app design tokens.
 *
 * The brand palette is the landing site's (landing/site.css, brand/README.md)
 * so the app and mergesafe.ai read as one product. Every colour a page uses
 * comes from a semantic token below; components never name a raw hex.
 * Contrast is asserted in tests/test_app_shell.py.
 */
:root {
  /* Brand palette, verbatim from brand/README.md. */
  --ink: #10201b;
  --paper: #f4f2ec;
  --accent: #0e8660;
  --mint: #3ddc97;

  /* Type scale (1.2 ratio) and spacing (4px grid). */
  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --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: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius-sm: 6px;
  --radius: 10px;
  /* Vendor logos are drawn for a white ground, in both themes. */
  --logo-bg: #ffffff;
  --sidebar-width: 232px;
  --topbar-height: 56px;

  /* Light theme: paper ground, ink type. */
  --bg: var(--paper);
  --surface: #fbfaf7;
  --surface-sunken: #ebe8df;
  --fg: var(--ink);
  --fg-muted: #4f5c57;
  --border: #d9d5c9;
  --primary: var(--accent);
  --primary-fg: #ffffff;
  /* The brand accent is 4.08:1 on paper; small accent text takes this. */
  --primary-text: #0b6e4f;
  --focus: #0b6e4f;

  --success-bg: #dcf1e6;
  --success-fg: #0b5a41;
  --warning-bg: #f7ebcc;
  --warning-fg: #7a5200;
  --danger-bg: #f8dedb;
  --danger-fg: #a4231a;
  --info-bg: #e0e8f3;
  --info-fg: #264f86;
  --neutral-bg: #e6e3da;
  --neutral-fg: #3f4a46;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--ink);
    --surface: #172c25;
    --surface-sunken: #0b1713;
    --fg: var(--paper);
    --fg-muted: #a9b5b0;
    --border: #2a4038;
    --primary: var(--mint);
    --primary-fg: var(--ink);
    --primary-text: var(--mint);
    --focus: var(--mint);

    --success-bg: #123d2e;
    --success-fg: #7fe8b9;
    --warning-bg: #3d3212;
    --warning-fg: #f2cf73;
    --danger-bg: #43201c;
    --danger-fg: #ff9d95;
    --info-bg: #1b2d45;
    --info-fg: #9dc2f5;
    --neutral-bg: #24352f;
    --neutral-fg: #c5cfcb;

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: var(--ink);
  --surface: #172c25;
  --surface-sunken: #0b1713;
  --fg: var(--paper);
  --fg-muted: #a9b5b0;
  --border: #2a4038;
  --primary: var(--mint);
  --primary-fg: var(--ink);
  --primary-text: var(--mint);
  --focus: var(--mint);

  --success-bg: #123d2e;
  --success-fg: #7fe8b9;
  --warning-bg: #3d3212;
  --warning-fg: #f2cf73;
  --danger-bg: #43201c;
  --danger-fg: #ff9d95;
  --info-bg: #1b2d45;
  --info-fg: #9dc2f5;
  --neutral-bg: #24352f;
  --neutral-fg: #c5cfcb;

  color-scheme: dark;
}