/* ─── Theme: CSS Custom Properties (Light) ─── */

:root {
  --primary: #000000;
  --primary-rgb: 0, 0, 0;
  --primary-active: #333333;
  --primary-active-rgb: 51, 51, 51;
  --ink: #0a0a0a;
  --ink-rgb: 10, 10, 10;
  --body: #333333;
  --body-rgb: 51, 51, 51;
  --body-strong: #0a0a0a;
  --body-strong-rgb: 10, 10, 10;
  --muted: #666666;
  --muted-rgb: 102, 102, 102;
  --muted-soft: #999999;
  --muted-soft-rgb: 153, 153, 153;
  --hairline: #e0e0e0;
  --hairline-rgb: 224, 224, 224;
  --hairline-soft: #f0f0f0;
  --hairline-soft-rgb: 240, 240, 240;
  --hairline-strong: #cccccc;
  --hairline-strong-rgb: 204, 204, 204;
  --canvas: #ffffff;
  --canvas-rgb: 255, 255, 255;
  --canvas-soft: #fafafa;
  --canvas-soft-rgb: 250, 250, 250;
  --canvas-deep: #0a0a0a;
  --canvas-deep-rgb: 10, 10, 10;
  --surface-card: #ffffff;
  --surface-card-rgb: 255, 255, 255;
  --surface-strong: #f5f5f5;
  --surface-strong-rgb: 245, 245, 245;
  --on-primary: #ffffff;
  --on-primary-rgb: 255, 255, 255;

  --gradient-mint: #00d4aa;
  --gradient-mint-rgb: 0, 212, 170;
  --gradient-peach: #ff9f66;
  --gradient-peach-rgb: 255, 159, 102;
  --gradient-lavender: #a78bfa;
  --gradient-lavender-rgb: 167, 139, 250;
  --gradient-sky: #60a5fa;
  --gradient-sky-rgb: 96, 165, 250;
  --gradient-rose: #f472b6;
  --gradient-rose-rgb: 244, 114, 182;
  --gradient-amber: #fbbf24;
  --gradient-amber-rgb: 251, 191, 36;
  --gradient-cyan: #22d3ee;
  --gradient-cyan-rgb: 34, 211, 238;

  --semantic-error: #dc2626;
  --semantic-error-rgb: 220, 38, 38;
  --semantic-success: #16a34a;
  --semantic-success-rgb: 22, 163, 74;

  /* Dark surface tokens (used by footer, dark overlays) */
  --surface-dark: #0a0a0a;
  --surface-dark-rgb: 10, 10, 10;
  --on-dark: #f5f5f5;
  --on-dark-rgb: 245, 245, 245;
  --on-dark-soft: #999999;
  --on-dark-soft-rgb: 153, 153, 153;
}