/*
  Design tokens — единственный источник правды по цветам, отступам,
  радиусам, теням, типографике. Меняя значения здесь, меняется весь UI.
  Светлая тема — на :root, тёмная — через prefers-color-scheme и
  [data-theme="dark"] (ручное переключение всегда выигрывает).
*/

:root {
  /* ---- Brand / accent — единая синяя палитра на весь UI ---- */
  --c-primary-50:  #eff6ff;
  --c-primary-100: #dbeafe;
  --c-primary-200: #bfdbfe;
  --c-primary-300: #93c5fd;
  --c-primary-400: #60a5fa;
  --c-primary-500: #3b82f6;
  --c-primary-600: #2563eb;
  --c-primary-700: #1d4ed8;
  --c-primary-800: #1e40af;
  --c-primary-900: #1e3a8a;

  --c-accent-500: #0ea5e9; /* sky — второстепенный акцент, тоже синий по духу */
  --c-accent-600: #0284c7;

  /* ---- Neutrals ---- */
  --c-gray-0:   #ffffff;
  --c-gray-50:  #f7f7fb;
  --c-gray-100: #eef0f6;
  --c-gray-200: #e2e4ee;
  --c-gray-300: #cbcedd;
  --c-gray-400: #a4a8bf;
  --c-gray-500: #7d829e;
  --c-gray-600: #5d6180;
  --c-gray-700: #454864;
  --c-gray-800: #2c2e45;
  --c-gray-900: #1a1b2e;
  --c-gray-950: #101122;

  /* ---- Semantic ---- */
  --c-success-500: #22c55e;
  --c-success-100: #dcfce7;
  --c-warning-500: #f59e0b;
  --c-warning-100: #fef3c7;
  --c-danger-500:  #ef4444;
  --c-danger-100:  #fee2e2;
  --c-info-500:    #0ea5e9;
  --c-info-100:    #e0f2fe;

  /* ---- Surface / text roles (light theme defaults) ---- */
  --bg-body:        var(--c-gray-50);
  --bg-surface:     var(--c-gray-0);
  --bg-surface-2:   var(--c-gray-100);
  --bg-elevated:    var(--c-gray-0);
  --bg-overlay:     rgb(26 27 46 / 55%);

  --border-subtle:  var(--c-gray-200);
  --border-default: var(--c-gray-300);

  --text-primary:   var(--c-gray-900);
  --text-secondary: var(--c-gray-600);
  --text-muted:     var(--c-gray-500);
  --text-on-brand:  #ffffff;

  --brand:          var(--c-primary-600);
  --brand-hover:    var(--c-primary-700);
  --brand-subtle:   var(--c-primary-50);
  --brand-subtle-text: var(--c-primary-700);

  --focus-ring: 0 0 0 3px rgb(108 86 240 / 35%);

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgb(26 27 46 / 6%);
  --shadow-md: 0 4px 12px rgb(26 27 46 / 8%), 0 1px 3px rgb(26 27 46 / 6%);
  --shadow-lg: 0 12px 32px rgb(26 27 46 / 14%), 0 2px 6px rgb(26 27 46 / 8%);

  /* ---- Typography ---- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 22px;
  --fs-3xl: 28px;

  --lh-tight: 1.25;
  --lh-normal: 1.5;

  /* ---- Layout metrics ---- */
  --sidebar-w: 264px;
  --sidebar-w-collapsed: 76px;
  --topbar-h: 64px;
  --bottomnav-h: 64px;

  /* ---- Breakpoints (referenced in comments; CSS can't read vars in @media) ---- */
  /* sm: 480px  md: 768px  lg: 1024px  xl: 1280px */

  /* ---- Motion ---- */
  --ease: cubic-bezier(.4,0,.2,1);
  --dur-fast: 120ms;
  --dur-normal: 200ms;

  --z-sidebar: 40;
  --z-topbar: 30;
  --z-bottomnav: 40;
  --z-dropdown: 50;
  --z-modal: 60;
  --z-toast: 70;
}

/*
  Светлая тема — единственная тема "по умолчанию", независимо от системных
  настроек ОС. Тёмная существует только как явный выбор пользователя через
  переключатель темы (data-theme="dark") — сайт никогда не переключается
  в тёмную сам по себе через prefers-color-scheme.
*/
:root[data-theme="dark"] {
  --bg-body:        var(--c-gray-950);
  --bg-surface:     var(--c-gray-900);
  --bg-surface-2:   var(--c-gray-800);
  --bg-elevated:    var(--c-gray-800);
  --bg-overlay:     rgb(0 0 0 / 60%);

  --border-subtle:  var(--c-gray-800);
  --border-default: var(--c-gray-700);

  --text-primary:   var(--c-gray-50);
  --text-secondary: var(--c-gray-300);
  --text-muted:     var(--c-gray-400);

  --brand:          var(--c-primary-400);
  --brand-hover:    var(--c-primary-300);
  --brand-subtle:   rgb(108 86 240 / 16%);
  --brand-subtle-text: var(--c-primary-200);

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 30%);
  --shadow-md: 0 4px 14px rgb(0 0 0 / 40%);
  --shadow-lg: 0 16px 40px rgb(0 0 0 / 50%);
}