/* corporate-clean — tokens from DESIGN.md + responsive breakpoints (ТЗ-адаптивный-дизайн) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --font-ui: 'Inter', system-ui, sans-serif;
  --font-mono: 'Inter', system-ui, sans-serif;

  /* Breakpoints (documentation / JS; CSS media queries use literal px) */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;

  --bg: #F7F8FA;
  --bg-subtle: #f2f3fd;
  --surface: #FFFFFF;
  --surface-2: #ecedf7;
  --surface-low: #f2f3fd;
  --surface-container: #ecedf7;
  --surface-high: #e6e8f2;
  --border: #E5E7EB;
  --border-mid: #c3c5d8;
  --outline: #737687;

  --text: #1A1D24;
  --text-1: #191c22;
  --text-2: #434655;
  --text-3: #6B7280;
  --on-surface: #191c22;
  --on-surface-variant: #434655;
  --muted: #6B7280;
  --dim: #6B7280;

  --primary: #0051df;
  --primary-container: #2f6bff;
  --on-primary: #ffffff;
  --accent: #2F6BFF;
  --accent-bg: #2F6BFF;
  --accent-fg: #ffffff;
  --accent-soft: #dbe1ff;
  --primary-fixed: #dbe1ff;

  --secondary: #585f6c;
  --secondary-container: #dce2f3;
  --on-secondary-container: #5e6572;

  --tag-bg: #ecedf7;
  --tag-text: #434655;

  --success: #16A34A;
  --warning: #D97706;
  --danger: #DC2626;
  --error: #ba1a1a;
  /* Полка «В работе» в портфеле: отдельный тон, чтобы не сливаться с done/approved. */
  --progress: #7C3AED;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;

  --shadow-sm: 0 1px 3px rgba(26, 29, 36, 0.04);
  --shadow-md: 0 4px 20px -4px rgba(0, 0, 0, 0.06);
  --shadow-toolbar: 0 8px 24px rgba(26, 29, 36, 0.08);

  --ease: 0.15s ease;
  --gutter: 24px;
  --topbar-h: 56px;
  --touch-min: 44px;

  --card: #FFFFFF;
  color-scheme: light;
}

html[data-theme="dark"] {
  --bg: #2d3038;
  --bg-subtle: #191c22;
  --surface: #191c22;
  --surface-2: #2d3038;
  --surface-low: #191c22;
  --surface-container: #2d3038;
  --surface-high: #434655;
  --border: #434655;
  --border-mid: #737687;
  --outline: #c3c5d8;

  --text: #eff0fa;
  --text-1: #eff0fa;
  --text-2: #c0c7d6;
  --text-3: #c3c5d8;
  --on-surface: #eff0fa;
  --on-surface-variant: #c0c7d6;
  --muted: #c3c5d8;
  --dim: #c3c5d8;

  --primary: #b5c4ff;
  --primary-container: #2f6bff;
  --on-primary: #ffffff;
  --accent: #b5c4ff;
  --accent-bg: #2f6bff;
  --accent-fg: #ffffff;
  --accent-soft: #003cac;
  --primary-fixed: #003cac;

  --secondary: #c0c7d6;
  --secondary-container: #434655;
  --on-secondary-container: #dce2f3;

  --tag-bg: #434655;
  --tag-text: #dce2f3;

  --progress: #b8a1f5;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-toolbar: 0 8px 24px rgba(0, 0, 0, 0.4);
  --card: #191c22;
  color-scheme: dark;
}

@media (max-width: 767px) {
  :root {
    --gutter: 16px;
  }
}