/* Shared design tokens for GeoGebra canvases. */
:root,
html[data-theme="light"] {
  --color-text-primary: #1c1e21;
  --color-text-secondary: #65676b;
  --color-text-disabled: #8a8d91;
  --color-text-blue: #1877f2;
  --color-text-cyan: #00a0b8;
  --color-text-purple: #8b5cf6;
  --color-text-green: #31a24c;
  --color-text-orange: #e67e22;
  --color-text-pink: #e91e8c;
  --color-border: #dadde1;
  --color-background-body: #f0f2f5;
  --color-background-surface: #ffffff;
  --color-background-gray: #e4e6eb;
  --color-background-blue: #e7f3ff;
  --color-background-teal: #e6faf8;
  --color-background-cyan: #e5f9fc;
  --color-background-purple: #f3e8ff;
  --color-background-green: #e7f8ed;
  --color-background-orange: #fff1e6;
  --color-background-pink: #fce7f3;
  --color-accent: #2563eb;
  --color-accent-muted: #dbeafe;
  --color-shadow: rgb(0 0 0 / 0.12);
  --color-overlay-hover: rgb(0 0 0 / 0.04);
  --color-surface: #ffffff;
  --radius-container: 12px;
  --radius-element: 8px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;

  /* Icon / stroke colors used by Board primitives (TokenColor) */
  --color-icon-red: #e41e3f;
  --color-icon-orange: #e67e22;
  --color-icon-yellow: #f1c40f;
  --color-icon-green: #31a24c;
  --color-icon-teal: #0d9488;
  --color-icon-cyan: #00a0b8;
  --color-icon-blue: #1877f2;
  --color-icon-purple: #8b5cf6;
  --color-icon-pink: #e91e8c;
  --color-icon-gray: #65676b;

  /* Soft fills for polygons / highlights */
  --color-bg-red: #fde8ec;
  --color-bg-orange: #fff1e6;
  --color-bg-yellow: #fff8db;
  --color-bg-green: #e7f8ed;
  --color-bg-teal: #e6faf8;
  --color-bg-cyan: #e5f9fc;
  --color-bg-blue: #e7f3ff;
  --color-bg-purple: #f3e8ff;
  --color-bg-pink: #fce7f3;
  --color-bg-gray: #e8ecf4;
  --color-bg-elevated: #ffffff;
}

html[data-theme="dark"] {
  --color-text-primary: #e4e6eb;
  --color-text-secondary: #b0b3b8;
  --color-text-disabled: #8a8d91;
  --color-border: #3a3b3c;
  --color-background-body: #18191a;
  --color-background-surface: #242526;
  --color-background-gray: #3a3b3c;
  --color-accent: #60a5fa;
  --color-accent-muted: #1e3a5f;
  --color-shadow: rgb(0 0 0 / 0.4);
  --color-overlay-hover: rgb(255 255 255 / 0.06);
  --color-surface: #242526;

  --color-icon-red: #ff6b81;
  --color-icon-orange: #f0a060;
  --color-icon-yellow: #f5d76e;
  --color-icon-green: #5dce7a;
  --color-icon-teal: #2dd4bf;
  --color-icon-cyan: #22d3ee;
  --color-icon-blue: #60a5fa;
  --color-icon-purple: #c4b5fd;
  --color-icon-pink: #f9a8d4;
  --color-icon-gray: #b0b3b8;

  --color-bg-red: #3a1820;
  --color-bg-orange: #3a2410;
  --color-bg-yellow: #3a3210;
  --color-bg-green: #14301c;
  --color-bg-teal: #10302c;
  --color-bg-cyan: #0e2a30;
  --color-bg-blue: #122238;
  --color-bg-purple: #241838;
  --color-bg-pink: #301828;
  --color-bg-gray: #2a2d33;
  --color-bg-elevated: #242526;
}