/* ============================================
   CSS Variables
   ============================================ */
:root {
  /* Colors */
  /* Primary: modern blue */
  --color-primary: #2563eb;
  --color-primary-dark: #1d4ed8;
  --color-primary-light: #93c5fd;
  /* Secondary: rose/pink */
  --color-secondary: #f43f5e;
  --color-secondary-dark: #e11d48;
  --color-secondary-light: #fb7185;
  --color-success: #10b981;
  --color-danger: #ef4444;
  --color-warning: #f59e0b;

  /* Feedback / status colors (light theme) */
  --color-info-soft: #dbeafe;
  --color-info-soft-strong: #bfdbfe;
  --color-info-strong: #1e40af;
  --color-info-accent-border: #60a5fa;
  --color-error-soft: #fee2e2;
  --color-error-soft-strong: #fecaca;
  --color-error-strong: #991b1b;
  --color-error-soft-border: #fca5a5;

  /* Badge colors (light theme) */
  --color-night-badge-bg: #eef2ff;
  --color-night-badge-text: #4338ca;
  --color-night-badge-icon: #6366f1;
  --color-day-badge-bg: #fef3c7;
  --color-day-badge-text: #92400e;
  --color-day-badge-icon: #f59e0b;

  /* Light theme (default) */
  --color-background: #f8fafc;
  --color-surface: #ffffff;
  --color-border: #e2e8f0;
  --color-border-light: #f1f5f9;
  --color-text: #0f172a;
  --color-text-secondary: #475569;
  --color-text-light: #94a3b8;
  --color-white: #ffffff;

  /* Spacing */
  --spacing-unit: 1rem;
  --spacing-xs: calc(var(--spacing-unit) * 0.25);
  --spacing-sm: calc(var(--spacing-unit) * 0.5);
  --spacing-md: calc(var(--spacing-unit) * 0.75);
  --spacing-lg: var(--spacing-unit);
  --spacing-xl: calc(var(--spacing-unit) * 1.5);
  --spacing-2xl: calc(var(--spacing-unit) * 2);
  --spacing-3xl: calc(var(--spacing-unit) * 3);

  /* Border Radius */
  --border-radius: 12px;
  --border-radius-sm: 8px;
  --border-radius-lg: 16px;

  /* Layout */
  --max-width: 1200px;
  --form-max-width: 600px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  /* Transitions */
  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-transform: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Dashboard redesign — day/night dusk system */
  --hero-gradient: radial-gradient(135% 135% at 15% -10%, #4f46e5 0%, #362e8f 45%, #1c1b40 100%);
  --hero-horizon: radial-gradient(120% 100% at 50% 145%, rgba(251,191,36,.30) 0%, rgba(245,158,11,.10) 38%, transparent 68%);
  --hero-border: transparent;
  --hero-shadow: 0 12px 32px -14px rgba(30,27,75,.55);

  --activity-day: #f59e0b;
  --activity-night: #6366f1;
  --activity-both: linear-gradient(135deg, #f59e0b 0 50%, #6366f1 50% 100%);
  --activity-empty-bg: #f1f5f9;
  --activity-empty-border: #e2e8f0;
  --activity-today-ring: #2563eb;
  --activity-tint: radial-gradient(120% 90% at 92% -12%, rgba(99,102,241,.10) 0%, rgba(99,102,241,.03) 40%, transparent 70%);
  --activity-tint-border: rgba(99,102,241,.18);
  --streak-color: #2563eb;

  --recent-badge-day-bg: #fef3c7;
  --recent-badge-day-fg: #f59e0b;
  --recent-badge-night-bg: #eef2ff;
  --recent-badge-night-fg: #6366f1;
}

:root[data-theme="dark"],
body[data-theme="dark"] {
  --color-background: #020617;
  --color-surface: #0f172a;
  --color-border: #1e293b;
  --color-border-light: #0b1120;
  --color-text: #e2e8f0;
  --color-text-secondary: #94a3b8;
  --color-text-light: #64748b;
  --color-white: #ffffff;
  /* Secondary: slightly lighter for dark mode */
  --color-secondary: #fb7185;
  --color-secondary-dark: #f43f5e;
  --color-secondary-light: #fda4af;

  /* Feedback / status colors (dark theme overrides) */
  --color-info-soft: #1d283a;
  --color-info-soft-strong: #1d4ed8;
  --color-info-strong: #e0f2fe;
  --color-error-soft: #450a0a;
  --color-error-soft-strong: #7f1d1d;
  --color-error-strong: #fee2e2;
  --color-error-soft-border: #fca5a5;

  /* Badge colors (dark theme) */
  --color-night-badge-bg: #312e81;
  --color-night-badge-text: #c7d2fe;
  --color-night-badge-icon: #a5b4fc;
  --color-day-badge-bg: #78350f;
  --color-day-badge-text: #fef3c7;
  --color-day-badge-icon: #fbbf24;

  /* Dashboard redesign — dark */
  --hero-gradient: radial-gradient(135% 135% at 15% -10%, #2b2870 0%, #1f1c49 46%, #121129 100%);
  --hero-horizon: radial-gradient(120% 100% at 50% 150%, rgba(251,191,36,.17) 0%, rgba(245,158,11,.05) 40%, transparent 68%);
  --hero-border: rgba(129,140,248,.16);
  --hero-shadow: 0 10px 30px -18px rgba(0,0,0,.8);

  --activity-day: #fbbf24;
  --activity-night: #a5b4fc;
  --activity-both: linear-gradient(135deg, #fbbf24 0 50%, #a5b4fc 50% 100%);
  --activity-empty-bg: #1e293b;
  --activity-empty-border: #334155;
  --activity-today-ring: #60a5fa;
  --activity-tint: radial-gradient(120% 90% at 92% -12%, rgba(129,140,248,.18) 0%, rgba(129,140,248,.05) 42%, transparent 72%);
  --activity-tint-border: rgba(129,140,248,.20);

  --recent-badge-day-bg: #78350f;
  --recent-badge-day-fg: #fbbf24;
  --recent-badge-night-bg: #312e81;
  --recent-badge-night-fg: #a5b4fc;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --color-background: #020617;
    --color-surface: #0f172a;
    --color-border: #1e293b;
    --color-border-light: #0b1120;
    --color-text: #e2e8f0;
    --color-text-secondary: #94a3b8;
    --color-text-light: #64748b;
    --color-white: #ffffff;

    /* Dashboard redesign — dark */
    --hero-gradient: radial-gradient(135% 135% at 15% -10%, #2b2870 0%, #1f1c49 46%, #121129 100%);
    --hero-horizon: radial-gradient(120% 100% at 50% 150%, rgba(251,191,36,.17) 0%, rgba(245,158,11,.05) 40%, transparent 68%);
    --hero-border: rgba(129,140,248,.16);
    --hero-shadow: 0 10px 30px -18px rgba(0,0,0,.8);

    --activity-day: #fbbf24;
    --activity-night: #a5b4fc;
    --activity-both: linear-gradient(135deg, #fbbf24 0 50%, #a5b4fc 50% 100%);
    --activity-empty-bg: #1e293b;
    --activity-empty-border: #334155;
    --activity-today-ring: #60a5fa;
    --activity-tint: radial-gradient(120% 90% at 92% -12%, rgba(129,140,248,.18) 0%, rgba(129,140,248,.05) 42%, transparent 72%);
    --activity-tint-border: rgba(129,140,248,.20);
    --streak-color: #60a5fa;

    --recent-badge-day-bg: #78350f;
    --recent-badge-day-fg: #fbbf24;
    --recent-badge-night-bg: #312e81;
    --recent-badge-night-fg: #a5b4fc;
  }
}

@media (max-width: 768px) {
  :root {
    --spacing-unit: 0.875rem;
  }
}