/* Design tokens: strict black / grey / white with a single osmium-blue accent */
:root {
  color-scheme: light;

  /* Surfaces */
  --color-bg: #ffffff;
  --color-surface: #f4f5f6;
  --color-surface-strong: #eceef0;
  --color-border: #e3e6e8;

  /* Text */
  --color-text: #111111;
  --color-heading: #0c0d0e;
  --color-muted: #6b7280;

  /* Osmium-blue accent (bluish metallic grey) */
  --color-accent: #5d7a8c;
  --color-accent-strong: #3f5a6b;
  --color-accent-soft: #eaf0f3;

  /* Concept-graph group colors (muted, distinguishable) */
  --group-computational: #5d7a8c; /* osmium blue */
  --group-experimental: #b5896e; /* muted clay */
  --group-materials: #7f9b8e; /* sage-slate */

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: var(--font-sans);

  --text-xs: 0.85rem;
  --text-sm: 0.92rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.6rem;
  --text-2xl: 2rem;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.8rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;

  /* Radius & shadow */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.05);
  --shadow-md: 0 4px 16px rgba(17, 17, 17, 0.08);

  /* Layout */
  --sidebar-w: 320px;
  --main-w: 720px;
  --gap: 2rem;
  --topbar-h: 56px;

  /* Components */
  --profile-size: 220px;
  --icon-size: 30px;
  --paper-thumb-h: 150px;
  --paper-thumb-w: 116px;

  --transition: 0.2s ease;
}

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

  /* Surfaces */
  --color-bg: #14171a;
  --color-surface: #1d2125;
  --color-surface-strong: #262b30;
  --color-border: #2e343a;

  /* Text */
  --color-text: #e6e8ea;
  --color-heading: #f3f5f6;
  --color-muted: #9aa3ab;

  /* Osmium-blue accent, lifted for contrast on dark surfaces */
  --color-accent: #8fb0c4;
  --color-accent-strong: #aac6d6;
  --color-accent-soft: #233039;

  /* Shadows need more presence on dark backgrounds */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
}