/* ─── Theme: CSS Custom Properties ─── */

: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;
  --surface-dark: #0a0a0a;
  --surface-dark-rgb: 10, 10, 10;
  --surface-dark-elevated: #1a1a1a;
  --surface-dark-elevated-rgb: 26, 26, 26;
  --on-primary: #ffffff;
  --on-primary-rgb: 255, 255, 255;
  --on-dark: #ffffff;
  --on-dark-rgb: 255, 255, 255;
  --on-dark-soft: #999999;
  --on-dark-soft-rgb: 153, 153, 153;

  --gradient-mint: #666666;
  --gradient-mint-rgb: 102, 102, 102;
  --gradient-peach: #888888;
  --gradient-peach-rgb: 136, 136, 136;
  --gradient-lavender: #777777;
  --gradient-lavender-rgb: 119, 119, 119;
  --gradient-sky: #555555;
  --gradient-sky-rgb: 85, 85, 85;
  --gradient-rose: #888888;
  --gradient-rose-rgb: 136, 136, 136;

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

[data-theme="dark"] {
  --primary: #f0f0f0;
  --primary-rgb: 240, 240, 240;
  --primary-active: #cccccc;
  --primary-active-rgb: 204, 204, 204;
  --ink: #f0f0f0;
  --ink-rgb: 240, 240, 240;
  --body: #cccccc;
  --body-rgb: 204, 204, 204;
  --body-strong: #f0f0f0;
  --body-strong-rgb: 240, 240, 240;
  --muted: #999999;
  --muted-rgb: 153, 153, 153;
  --muted-soft: #666666;
  --muted-soft-rgb: 102, 102, 102;
  --hairline: #333333;
  --hairline-rgb: 51, 51, 51;
  --hairline-soft: #2a2a2a;
  --hairline-soft-rgb: 42, 42, 42;
  --hairline-strong: #444444;
  --hairline-strong-rgb: 68, 68, 68;
  --canvas: #111111;
  --canvas-rgb: 17, 17, 17;
  --canvas-soft: #1a1a1a;
  --canvas-soft-rgb: 26, 26, 26;
  --canvas-deep: #000000;
  --canvas-deep-rgb: 0, 0, 0;
  --surface-card: #1e1e1e;
  --surface-card-rgb: 30, 30, 30;
  --surface-strong: #2a2a2a;
  --surface-strong-rgb: 42, 42, 42;
  --surface-dark: #0a0a0a;
  --surface-dark-rgb: 10, 10, 10;
  --surface-dark-elevated: #252525;
  --surface-dark-elevated-rgb: 37, 37, 37;
  --on-primary: #0a0a0a;
  --on-primary-rgb: 10, 10, 10;
  --on-dark: #f0f0f0;
  --on-dark-rgb: 240, 240, 240;
  --on-dark-soft: #777777;
  --on-dark-soft-rgb: 119, 119, 119;

  --gradient-mint: #888888;
  --gradient-mint-rgb: 136, 136, 136;
  --gradient-peach: #999999;
  --gradient-peach-rgb: 153, 153, 153;
  --gradient-lavender: #777777;
  --gradient-lavender-rgb: 119, 119, 119;
  --gradient-sky: #666666;
  --gradient-sky-rgb: 102, 102, 102;
  --gradient-rose: #888888;
  --gradient-rose-rgb: 136, 136, 136;

  --semantic-error: #f87171;
  --semantic-error-rgb: 248, 113, 113;
  --semantic-success: #4ade80;
  --semantic-success-rgb: 74, 222, 128;
}