app/src/styles/_variables.css

/* ============================================================================ */
/* Design Tokens */
/* ============================================================================ */
:root {
  /* Neutrals */
  --neutral-600: rgb(107, 114, 128);
  --neutral-400: rgb(185, 185, 185);
  --neutral-300: rgb(228, 228, 228);
  --neutral-200: rgb(245, 245, 245);

  --default-font-family: Source Sans Pro, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  /* Chrome accent = charcoal ink (neutral, no rust in the UI).
     The data figures keep the full ASG palette incl. RUST via the --ar-* vars below. */
  --primary-base: #2d2926;
  --primary-color: var(--primary-base);
  --primary-color-hover: oklch(from var(--primary-color) calc(l - 0.05) c h);
  --primary-color-active: oklch(from var(--primary-color) calc(l - 0.10) c h);
  --on-primary: #ffffff;

  /* OptimismBench palette — embeds read these so the web figures match the PDF figures */
  --opt: #e07a5f;         /* optimistic (paper cOpt, terracotta) */
  --pes: #3d5a80;         /* pessimistic (paper cPes, navy) */
  --opt-soft: #f0c9bd;    /* light terracotta for low-magnitude optimism */
  --pes-soft: #b9c3d4;    /* light navy for low-magnitude pessimism */
  --ar-rust: #c4553a;     /* AgentRoom / ours */
  --ar-slate: #3d5a80;    /* solo / baseline */
  --ar-sage: #7a9e7e;     /* shared-only */
  --ar-ochre: #e08838;    /* parallel-merge (orange, not mustard) */
  --ar-clay: #a66e4e;     /* noMCP */
  --ar-iron: #8a8a8a;     /* secondary baseline */
  --ar-teal: #2a9d8f;     /* agent 2 / heterogeneous */
  --ar-crimson: #a83e3e;  /* ChatDev / failure */
  --ar-purple: #6a5fa8;   /* agent 3 */
  --ar-green: #4a8a4a;    /* success / passed */
  --ar-charcoal: #2d2926; /* ink */

  /* Semantic colors — drawn from the ASG palette, not generic */
  --danger-color: #a83e3e;   /* CRIMSON */
  --success-color: #4a8a4a;  /* GREEN_OK */
  --info-color: #3d5a80;     /* SLATE */

  /* Text & Surfaces — clean white (the paper figures are on white too) */
  --page-bg: #ffffff;
  --surface-bg: #f5f6f7;
  --text-color: #1f2328;            /* near-black ink */
  --transparent-page-contrast: rgba(255, 255, 255, .85);
  --muted-color: rgba(31, 35, 40, .6);
  --border-color: rgba(31, 35, 40, .12);
  --code-bg: #f3f4f6;

  /* Links + citations — their own SLATE blue from the ASG palette, NOT the rust accent
     (keeps prose links distinct from the figure/accent color and from sibling articles) */
  --link-color: #3d5a80;       /* SLATE */
  --link-color-hover: #2c4463; /* deeper slate */
  --link-underline: var(--link-color);
  --link-underline-hover: var(--link-color-hover);

  /* Spacing scale */
  --spacing-1: 8px;
  --spacing-2: 12px;
  --spacing-3: 16px;
  --spacing-4: 24px;
  --spacing-5: 32px;
  --spacing-6: 40px;
  --spacing-7: 48px;
  --spacing-8: 56px;
  --spacing-9: 64px;
  --spacing-10: 72px;

  /* Custom Media aliases compiled by PostCSS */
  @custom-media --bp-xxs (max-width: 320px);
  @custom-media --bp-xs (max-width: 480px);
  @custom-media --bp-sm (max-width: 640px);
  @custom-media --bp-md (max-width: 768px);
  @custom-media --bp-lg (max-width: 1024px);
  @custom-media --bp-xl (max-width: 1280px);
  @custom-media --bp-content-collapse (max-width: 1100px);

  /* Layout */
  --content-padding-x: 16px;
  /* default page gutter */
  --block-spacing-y: var(--spacing-4);
  /* default vertical spacing between block components */

  /* Config */
  --palette-count: 8;

  /* Button tokens */
  --button-radius: 6px;
  --button-padding-x: 16px;
  --button-padding-y: 10px;
  --button-font-size: 14px;
  --button-icon-padding: 8px;
  /* Big button */
  --button-big-padding-x: 16px;
  --button-big-padding-y: 12px;
  --button-big-font-size: 16px;
  --button-big-icon-padding: 12px;

  /* Table tokens */
  --table-border-radius: 8px;
  --table-header-bg: oklch(from var(--surface-bg) calc(l - 0.02) c h);
  --table-row-odd-bg: oklch(from var(--surface-bg) calc(l - 0.01) c h);

  /* Z-index */
  --z-base: 0;
  --z-content: 1;
  --z-elevated: 10;
  --z-overlay: 1000;
  --z-modal: 1100;
  --z-tooltip: 1200;

  /* Charts (global) */
  --axis-color: var(--muted-color);
  --tick-color: var(--text-color);
  --grid-color: rgba(0, 0, 0, .08);
}

/* ============================================================================ */
/* Dark Theme Overrides */
/* ============================================================================ */
[data-theme="dark"] {
  /* Neutral dark (no warm/cream tint) */
  --page-bg: #0f1115;
  --surface-bg: #15171c;
  --text-color: rgba(237, 239, 242, .92);
  --muted-color: rgba(237, 239, 242, .62);
  --border-color: rgba(237, 239, 242, .14);
  --code-bg: #181b21;
  --transparent-page-contrast: rgba(15, 17, 21, .85);

  /* Chrome accent on dark = off-white ink (buttons render light-on-dark, no rust) */
  --primary-color: #edeff2;

  /* Links/citations: lighter slate so they stay legible on the warm dark ground */
  --link-color: #8aa6cc;
  --link-color-hover: #a8c0de;

  /* Lift the two darkest chart series so they stay legible on the warm dark ground */
  --ar-slate: #6f8bb5;
  --ar-iron: #b0a9a2;
  --ar-charcoal: #edeff2;

  /* Charts (global) */
  --axis-color: var(--muted-color);
  --tick-color: var(--muted-color);
  --grid-color: rgba(244, 238, 230, .10);

  /* Primary (lower L in dark) */
  --primary-color-hover: oklch(from var(--primary-color) calc(l - 0.05) c h);
  --primary-color-active: oklch(from var(--primary-color) calc(l - 0.10) c h);
  --on-primary: #0f1115;

  color-scheme: dark;
  background: var(--page-bg);
}