/**
 * Tile Planner - Theme System
 */

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');

/* Root Variables - Light Theme (Default) */
:root {
  /* Background Colors */
  --bg-primary: #f4f7fa;
  --bg-secondary: #ffffff;
  --bg-tertiary: #ecf0f5;
  --bg-input: #ffffff;

  /* Text Colors */
  --text-primary: #1d2630;
  --text-secondary: #5b6b79;
  --text-tertiary: #888888;
  --text-disabled: #bec8d0;

  /* Border Colors */
  --border-color: #e9ecef;
  --border-focus: #1abc9c;
  --border-hover: #bec8d0;

  /* Accent Colors */
  --accent-primary: #1abc9c;
  --accent-hover: #159680;
  --accent-active: #12806d;

  /* Status Colors */
  --error: #f44336;
  --error-bg: #ffeaea;
  --success: #2ed8b6;
  --success-bg: #e6faf5;
  --warning: #ffb64d;
  --warning-bg: #fff8ec;
  --info: #4680ff;
  --info-bg: #edf2ff;

  /* Canvas Colors */
  --canvas-bg: #ffffff;
  --canvas-grid: #e9ecef;
  --canvas-gap: #dde2e8;
  --canvas-tile-border: #bec8d0;

  /* Cut Position Colors */
  --cut-left: #E57373;
  --cut-right: #64B5F6;
  --cut-top: #81C784;
  --cut-bottom: #FFB74D;
  --cut-corner: #BA68C8;

  /* Shadow */
  --shadow-sm: 0 1px 3px 0 rgba(69, 90, 100, 0.03);
  --shadow-md: 0 1px 20px 0 rgba(69, 90, 100, 0.08);
  --shadow-lg: 0 1px 20px 0 rgba(69, 90, 100, 0.15);
}

/* Dark Theme */
[data-theme="dark"] {
  /* Background Colors */
  --bg-primary: #1d2630;
  --bg-secondary: #263544;
  --bg-tertiary: #2f4050;
  --bg-input: #2f4050;

  /* Text Colors */
  --text-primary: #e8edf7;
  --text-secondary: #a9b7d0;
  --text-tertiary: #7b8da6;
  --text-disabled: #4a5a6e;

  /* Border Colors */
  --border-color: #374b5e;
  --border-focus: #1abc9c;
  --border-hover: #4a5a6e;

  /* Accent Colors */
  --accent-primary: #1abc9c;
  --accent-hover: #22d1ad;
  --accent-active: #2ed8b6;

  /* Status Colors */
  --error: #ef5350;
  --error-bg: #3a2222;
  --success: #2ed8b6;
  --success-bg: #1a3a32;
  --warning: #ffb64d;
  --warning-bg: #3a3422;
  --info: #4680ff;
  --info-bg: #222a3a;

  /* Canvas Colors */
  --canvas-bg: #1d2630;
  --canvas-grid: #374b5e;
  --canvas-gap: #2f4050;
  --canvas-tile-border: #4a5a6e;

  /* Cut Position Colors */
  --cut-left: #EF5350;
  --cut-right: #42A5F5;
  --cut-top: #66BB6A;
  --cut-bottom: #FFA726;
  --cut-corner: #AB47BC;

  /* Shadow */
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
  --shadow-md: 0 1px 20px 0 rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 1px 20px 0 rgba(0, 0, 0, 0.4);
}

/* Smooth Transitions */
*,
*::before,
*::after {
  transition: background-color 0.2s ease,
              color 0.2s ease,
              border-color 0.2s ease,
              box-shadow 0.2s ease;
}

/* Remove transitions for reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
  }
}