/* public/theme.css */
:root {
  /* ライトモード変数 */
  --bg-primary: #f8f9fa;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f1f3f5;
  --text-primary: #212529;
  --text-secondary: #495057;
  --text-tertiary: #868e96;
  
  --border-color: #dee2e6;
  --border-focus: #ff3399;
  
  --brand-pink: #ff3399;
  --brand-pink-hover: #e62e8a;
  --brand-pink-light: rgba(255, 51, 153, 0.1);
  --brand-pink-glow: rgba(255, 51, 153, 0.3);
  
  --success: #2b8a3e;
  --warning: #e67e22;
  --danger: #c92a2a;
  --info: #1c7ed6;
  
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.4);
  --glass-shadow: rgba(0, 0, 0, 0.05);
  
  --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] {
  /* ダークモード変数 */
  --bg-primary: #0b0c10;
  --bg-secondary: #12141c;
  --bg-tertiary: #1a1d29;
  --text-primary: #f8f9fa;
  --text-secondary: #c1c2c6;
  --text-tertiary: #6c757d;
  
  --border-color: #2b2e3c;
  --border-focus: #ff3399;
  
  --brand-pink: #ff3399;
  --brand-pink-hover: #ff5c8a;
  --brand-pink-light: rgba(255, 51, 153, 0.15);
  --brand-pink-glow: rgba(255, 51, 153, 0.5);
  
  --success: #40c057;
  --warning: #f76707;
  --danger: #fa5252;
  --info: #228be6;
  
  --glass-bg: rgba(18, 20, 28, 0.7);
  --glass-border: rgba(255, 255, 255, 0.05);
  --glass-shadow: rgba(0, 0, 0, 0.3);
  
  --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --card-shadow-hover: 0 10px 20px -3px rgba(0, 0, 0, 0.4), 0 4px 8px -2px rgba(0, 0, 0, 0.3);
}