/* ============================================
   taskvel Design System - Theme Variables
   Filosofia: "Calm Productivity"
   ============================================ */

/* --- Typography tokens --- */
:root {
  --ft-font-display: 'General Sans', system-ui, -apple-system, sans-serif;
  --ft-font-body: 'Satoshi', system-ui, -apple-system, sans-serif;
  --ft-font-mono: 'Geist Mono', ui-monospace, 'Cascadia Code', monospace;
}

/* --- Easing tokens (CSS custom properties para Tailwind) --- */
:root {
  --ft-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ft-ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --ft-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ft-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* =============================================
   LIGHT THEME (default)
   ============================================= */
:root,
[data-theme="light"] {
  /* Surfaces */
  --ft-surface: #fafaf9;
  --ft-surface-alt: #f5f5f4;
  --ft-surface-raised: #ffffff;
  --ft-surface-overlay: rgba(255, 255, 255, 0.92);
  --ft-surface-inset: #f0efee;

  /* Text */
  --ft-text: #1c1917;
  --ft-text-secondary: #57534e;
  --ft-text-tertiary: #a8a29e;
  --ft-text-inverse: #fafaf9;

  /* Accent (indigo) */
  --ft-accent: #6366f1;
  --ft-accent-hover: #4f46e5;
  --ft-accent-soft: rgba(99, 102, 241, 0.12);
  --ft-accent-text: #4338ca;

  /* Borders */
  --ft-border: #e7e5e4;
  --ft-border-strong: #d6d3d1;

  /* Priority colors */
  --ft-priority-none: #a8a29e;
  --ft-priority-low: #22c55e;
  --ft-priority-medium: #f59e0b;
  --ft-priority-high: #f97316;
  --ft-priority-urgent: #ef4444;

  /* Semantic */
  --ft-success: #22c55e;
  --ft-warning: #f59e0b;
  --ft-danger: #ef4444;
  --ft-info: #3b82f6;

  /* Glass */
  --ft-glass-bg: rgba(255, 255, 255, 0.72);
  --ft-glass-border: rgba(255, 255, 255, 0.2);
  --ft-glass-blur: 16px;

  /* Misc */
  --ft-backdrop: rgba(0, 0, 0, 0.4);
  --ft-skeleton-base: #e7e5e4;
  --ft-skeleton-shine: #f5f5f4;
}

/* =============================================
   DARK THEME
   ============================================= */
[data-theme="dark"] {
  --ft-surface: #1a1a1a;
  --ft-surface-alt: #222222;
  --ft-surface-raised: #2a2a2a;
  --ft-surface-overlay: rgba(26, 26, 26, 0.92);
  --ft-surface-inset: #141414;

  --ft-text: #f5f5f4;
  --ft-text-secondary: #a8a29e;
  --ft-text-tertiary: #78716c;
  --ft-text-inverse: #1c1917;

  --ft-accent: #818cf8;
  --ft-accent-hover: #6366f1;
  --ft-accent-soft: rgba(129, 140, 248, 0.15);
  --ft-accent-text: #a5b4fc;

  --ft-border: #333333;
  --ft-border-strong: #444444;

  --ft-priority-none: #78716c;
  --ft-priority-low: #4ade80;
  --ft-priority-medium: #fbbf24;
  --ft-priority-high: #fb923c;
  --ft-priority-urgent: #f87171;

  --ft-success: #4ade80;
  --ft-warning: #fbbf24;
  --ft-danger: #f87171;
  --ft-info: #60a5fa;

  --ft-glass-bg: rgba(26, 26, 26, 0.72);
  --ft-glass-border: rgba(255, 255, 255, 0.08);
  --ft-glass-blur: 16px;

  --ft-backdrop: rgba(0, 0, 0, 0.6);
  --ft-skeleton-base: #333333;
  --ft-skeleton-shine: #444444;
}

/* =============================================
   AMOLED THEME (pure black)
   ============================================= */
[data-theme="amoled"] {
  --ft-surface: #000000;
  --ft-surface-alt: #0a0a0a;
  --ft-surface-raised: #141414;
  --ft-surface-overlay: rgba(0, 0, 0, 0.95);
  --ft-surface-inset: #000000;

  --ft-text: #fafaf9;
  --ft-text-secondary: #a8a29e;
  --ft-text-tertiary: #78716c;
  --ft-text-inverse: #000000;

  --ft-accent: #a5b4fc;
  --ft-accent-hover: #818cf8;
  --ft-accent-soft: rgba(165, 180, 252, 0.12);
  --ft-accent-text: #c7d2fe;

  --ft-border: #1a1a1a;
  --ft-border-strong: #2a2a2a;

  --ft-priority-none: #78716c;
  --ft-priority-low: #4ade80;
  --ft-priority-medium: #fbbf24;
  --ft-priority-high: #fb923c;
  --ft-priority-urgent: #f87171;

  --ft-success: #4ade80;
  --ft-warning: #fbbf24;
  --ft-danger: #f87171;
  --ft-info: #60a5fa;

  --ft-glass-bg: rgba(0, 0, 0, 0.85);
  --ft-glass-border: rgba(255, 255, 255, 0.06);
  --ft-glass-blur: 20px;

  --ft-backdrop: rgba(0, 0, 0, 0.75);
  --ft-skeleton-base: #1a1a1a;
  --ft-skeleton-shine: #2a2a2a;
}

/* =============================================
   BASE TYPOGRAPHY
   ============================================= */
h1, h2, h3, h4, h5, h6 {
  font-family: 'General Sans', system-ui, sans-serif;
  font-weight: 600;
  color: var(--ft-text);
  line-height: 1.2;
}

h1 { font-size: 1.875rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }

code, pre, kbd {
  font-family: 'Geist Mono', ui-monospace, monospace;
}

/* =============================================
   FORM VALIDATION (Blazor)
   ============================================= */
.valid.modified:not([type=checkbox]) {
  outline: 1px solid var(--ft-success);
}

.invalid {
  outline: 1px solid var(--ft-danger);
}

.validation-message {
  color: var(--ft-danger);
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* =============================================
   BLAZOR ERROR UI
   ============================================= */
#blazor-error-ui {
  background: var(--ft-danger);
  color: white;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 9999;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}