/**
 * Theme Styles - Light/Dark Mode
 * Time Tracker v2 - Soft Productivity
 */

/* ========================================
   Dark Mode - Soft Productivity
   Clean, warm, comfortable for the eyes
   ======================================== */

[data-theme="dark"] {
  /* Oberflächen - Warm dark tones */
  --surface-bg: #141210;
  --surface-elevated: #1c1a17;
  --surface-border: #2e2a25;
  --surface-hover: #252220;
  --surface-active: #302c28;

  /* Page Background - Solid, no gradient */
  --page-bg: #141210;
  --page-bg-accent: none;

  /* Card tokens for dark */
  --card-bg: #1c1a17;
  --card-border: #2e2a25;
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2);
  --card-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.35),
    0 8px 24px rgba(0, 0, 0, 0.25);
  --card-shadow-active: 0 1px 2px rgba(0, 0, 0, 0.4);

  /* Text (A11y-optimiert für Dark Mode) */
  --text-primary: #f5f2ee;
  --text-secondary: #a89f94;
  --text-muted: #776e64;
  --text-inverse: #141210;

  /* Legacy-Aliase */
  --color-bg: var(--surface-bg);
  --color-surface: var(--surface-elevated);
  --color-border: var(--surface-border);
  --color-text: var(--text-primary);
  --color-text-muted: var(--text-muted);
  --color-primary-alpha: rgba(247, 165, 0, 0.2);

  /* Extended legacy aliases for dark mode */
  --border-color: var(--surface-border);
  --surface-primary: var(--surface-elevated);
  --surface-secondary: var(--surface-hover);
  --surface-tertiary: var(--surface-active);
  --surface-raised: var(--surface-elevated);
  --color-error: var(--color-danger);

  /* Focus Ring - heller im Dark Mode */
  --focus-ring-color: rgba(251, 180, 44, 0.5);

  /* Primärfarbe - etwas heller für Dark Mode */
  --color-primary: #f9b020;
  --color-primary-hover: #ffc04a;
  --color-primary-dark: #e09500;
  --color-primary-light: #2d2410;

  /* Semantische Farben anpassen */
  --color-success-light: #14302d;
  --color-danger-light: #301818;
  --color-warning-light: #2d2410;
  --color-info-light: #0c1e40;

  /* Warme Shadows für Dark Mode */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.35);
  --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.35), 0 24px 48px rgba(0, 0, 0, 0.4);
}

/* ========================================
   System-Präferenz: Dark Mode
   Soft Productivity - Clean Dark
   ======================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Oberflächen - Warm dark */
    --surface-bg: #141210;
    --surface-elevated: #1c1a17;
    --surface-border: #2e2a25;
    --surface-hover: #252220;
    --surface-active: #302c28;

    /* Page Background - Solid */
    --page-bg: #141210;

    /* Card tokens */
    --card-bg: #1c1a17;
    --card-border: #2e2a25;
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2);
    --card-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.35),
      0 8px 24px rgba(0, 0, 0, 0.25);
    --card-shadow-active: 0 1px 2px rgba(0, 0, 0, 0.4);

    /* Text (A11y-optimiert) */
    --text-primary: #f5f2ee;
    --text-secondary: #a89f94;
    --text-muted: #776e64;
    --text-inverse: #141210;

    /* Legacy-Aliase */
    --color-bg: var(--surface-bg);
    --color-surface: var(--surface-elevated);
    --color-border: var(--surface-border);
    --color-text: var(--text-primary);
    --color-text-muted: var(--text-muted);
    --color-primary-alpha: rgba(247, 165, 0, 0.2);

    /* Extended legacy aliases */
    --border-color: var(--surface-border);
    --surface-primary: var(--surface-elevated);
    --surface-secondary: var(--surface-hover);
    --surface-tertiary: var(--surface-active);
    --surface-raised: var(--surface-elevated);
    --color-error: var(--color-danger);

    /* Focus Ring */
    --focus-ring-color: rgba(249, 176, 32, 0.5);

    /* Primärfarbe */
    --color-primary: #f9b020;
    --color-primary-hover: #ffc04a;
    --color-primary-dark: #e09500;
    --color-primary-light: #2d2410;

    /* Semantische Farben */
    --color-success-light: #14302d;
    --color-danger-light: #301818;
    --color-warning-light: #2d2410;
    --color-info-light: #0c1e40;

    /* Warme Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.35);
    --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.35), 0 24px 48px rgba(0, 0, 0, 0.4);
  }
}

/* ========================================
   Theme Transition (sanfter Übergang)
   ======================================== */

html {
  color-scheme: light dark;
}

html[data-theme="light"] {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

/* Sanfte Übergänge bei Theme-Wechsel */
body,
.card,
.btn,
.modal,
.toast,
input,
select,
textarea {
  transition: background-color var(--transition-normal),
    border-color var(--transition-normal), color var(--transition-normal);
}

/* ========================================
   🌙 Dark Mode Component Overrides
   Soft Productivity - Clean, solid designs
   ======================================== */

/* Dark Mode Header */
[data-theme="dark"] .app-header {
  background: var(--surface-elevated);
  border-bottom: 1px solid var(--surface-border);
  box-shadow: var(--shadow-md);
}

[data-theme="dark"] .app-header__title {
  color: var(--color-primary);
}

/* Dark Mode Timer Module */
[data-theme="dark"] .timer-module {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}

[data-theme="dark"] .timer-module:hover {
  box-shadow: var(--card-shadow-hover);
}

/* Dark Mode Timer Ring - Brand */
[data-theme="dark"] .timer-ring {
  filter: drop-shadow(0 4px 30px rgba(247, 165, 0, 0.35));
}

[data-theme="dark"] .timer-ring__bg {
  stroke: rgba(247, 165, 0, 0.08);
}

/* Dark Mode Timer Projection */
[data-theme="dark"] .timer-projection {
  background: linear-gradient(
    135deg,
    rgba(247, 165, 0, 0.12) 0%,
    rgba(247, 101, 0, 0.08) 100%
  );
  border-color: rgba(247, 165, 0, 0.25);
}

[data-theme="dark"] .timer-projection__icon {
  background: rgba(247, 165, 0, 0.2);
}

/* Dark Mode Clock-Out Modal */
[data-theme="dark"] .modal-overlay {
  background: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .modal-overlay .modal {
  background: var(--surface-default);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .clockout-preview {
  background: rgba(45, 40, 34, 0.6);
  border-color: rgba(247, 165, 0, 0.15);
}

[data-theme="dark"] .clockout-preview__divider-icon {
  background: rgba(45, 40, 34, 0.8);
}

[data-theme="dark"] .clockout-preview__info {
  background: rgba(247, 165, 0, 0.12);
}

/* Dark Mode Stats */
[data-theme="dark"] .timer-stats {
  background: rgba(45, 40, 34, 0.6);
  border: 1px solid rgba(247, 165, 0, 0.1);
}

/* Dark Mode Progress Bar */
[data-theme="dark"] .timer-progress__bar {
  background: rgba(247, 165, 0, 0.08);
}

/* Dark Mode Cards - Brand */
[data-theme="dark"] .card--glass {
  background: rgba(26, 23, 20, 0.85);
  border: 1px solid rgba(247, 165, 0, 0.12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Dark Mode Body Background - Brand */
[data-theme="dark"] body {
  background: radial-gradient(
      ellipse at 20% 0%,
      rgba(247, 165, 0, 0.08) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 80% 100%,
      rgba(0, 98, 247, 0.05) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 50% 50%,
      rgba(247, 101, 0, 0.03) 0%,
      transparent 70%
    ),
    #0f0d0a;
}

/* ========================================
   Status-Farben (für Timer)
   ======================================== */

:root {
  /* Status: Arbeitet */
  --status-working: #22c55e;
  --status-working-bg: #dcfce7;

  /* Status: Pause */
  --status-break: #f59e0b;
  --status-break-bg: #fef3c7;

  /* Status: Nicht eingestempelt */
  --status-idle: #64748b;
  --status-idle-bg: #f1f5f9;
}

[data-theme="dark"] {
  --status-working-bg: #14532d;
  --status-break-bg: #78350f;
  --status-idle-bg: #334155;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --status-working-bg: #14532d;
    --status-break-bg: #78350f;
    --status-idle-bg: #334155;
  }
}