/*
 * carparts64.ru — Enterprise Design System Tokens v1
 * Typography: Manrope (display), Inter (UI/body)
 * Style: Stripe · Linear · Atlassian · Apple HIG
 */

:root {
  /* ── Typography ── */
  --font-display: "Manrope", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
  --font-mono: "SF Mono", "Consolas", "Liberation Mono", monospace;

  --text-2xs: 12px;
  --text-xs: 13px;
  --text-sm: 15px;
  --text-base: 16px;
  --text-md: 17px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 34px;
  --text-4xl: 42px;

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.03em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* ── Color: surfaces ── */
  --color-bg: #f4f6f9;
  --color-surface: #ffffff;
  --color-surface-2: #f8fafc;
  --color-surface-3: #f1f5f9;
  --color-surface-4: #e2e8f0;
  --color-surface-inset: #eef2f7;
  --color-surface-raised: #ffffff;

  /* ── Color: text ── */
  --color-text: #0f172a;
  --color-text-secondary: #334155;
  --color-text-muted: #64748b;
  --color-text-disabled: #94a3b8;
  --color-text-inverse: #f8fafc;

  /* ── Color: borders ── */
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-border-subtle: #eef2f7;
  --color-border-focus: #2563eb;

  /* ── Color: accent ── */
  --color-accent: #2563eb;
  --color-accent-hover: #1d4ed8;
  --color-accent-active: #1e40af;
  --color-accent-on: #ffffff;
  --color-accent-soft: #eff6ff;
  --color-accent-soft-text: #1e40af;
  --color-accent-soft-border: #bfdbfe;

  /* ── Color: semantic ── */
  --color-success: #059669;
  --color-success-soft: #ecfdf5;
  --color-success-border: #a7f3d0;
  --color-success-text: #065f46;

  --color-warning: #d97706;
  --color-warning-soft: #fffbeb;
  --color-warning-border: #fcd34d;
  --color-warning-text: #92400e;

  --color-danger: #dc2626;
  --color-danger-soft: #fef2f2;
  --color-danger-border: #fecaca;
  --color-danger-text: #991b1b;

  --color-info: #0284c7;
  --color-info-soft: #f0f9ff;
  --color-info-border: #bae6fd;
  --color-info-text: #075985;

  /* ── Color: chrome ── */
  --color-sidebar-bg: #0f172a;
  --color-sidebar-surface: #1e293b;
  --color-sidebar-text: #cbd5e1;
  --color-sidebar-text-muted: #94a3b8;
  --color-sidebar-border: rgba(255, 255, 255, 0.06);
  --color-sidebar-active: rgba(37, 99, 235, 0.18);

  --color-header-bg: #ffffff;
  --color-footer-bg: #0f172a;
  --color-footer-text: #cbd5e1;

  /* ── Spacing (4px base) ── */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;

  /* ── Radius (public legacy + DS) ── */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 999px;

  --ds-radius-sm: 8px;
  --ds-radius-md: 12px;
  --ds-radius-lg: 16px;
  --ds-radius-xl: 20px;

  /* ── Elevation (flat — no glossy gradients) ── */
  --elevation-0: none;
  --elevation-1: 0 1px 2px rgba(15, 23, 42, 0.05);
  --elevation-2: 0 4px 12px rgba(15, 23, 42, 0.06);
  --elevation-3: 0 10px 28px rgba(15, 23, 42, 0.08);
  --elevation-4: 0 20px 48px rgba(15, 23, 42, 0.1);

  --shadow-sm: var(--elevation-1);
  --shadow-md: var(--elevation-2);
  --shadow-lg: var(--elevation-3);
  --shadow-card-hover: var(--elevation-4);

  /* ── Layout ── */
  --ds-grid-columns: 12;
  --ds-grid-gap: var(--space-4);
  --ds-page-max: none;
  --ds-sidebar-width: 272px;
  --ds-topbar-height: 56px;
  --header-height: 64px;

  /* ── Z-index ── */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-toolbar: 300;
  --z-drawer: 400;
  --z-modal: 500;
  --z-toast: 600;

  /* ── Motion ── */
  --transition-fast: 0.12s ease;
  --transition: 0.18s ease;
  --transition-slow: 0.28s ease;

  /* ── Buttons ── */
  --btn-height-sm: 32px;
  --btn-height-md: 40px;
  --btn-height-lg: 48px;
  --btn-padding-x: var(--space-4);
  --btn-primary-bg: var(--color-accent);
  --btn-primary-bg-hover: var(--color-accent-hover);
  --btn-primary-fg: var(--color-accent-on);
  --btn-primary-border: var(--color-accent);
  --btn-primary-shadow: var(--elevation-1);
  --btn-secondary-bg: var(--color-surface);
  --btn-secondary-bg-hover: var(--color-surface-2);
  --btn-secondary-fg: var(--color-text);
  --btn-secondary-border: var(--color-border);
  --btn-ghost-fg: var(--color-accent-soft-text);
  --btn-ghost-fg-hover: var(--color-accent-hover);
  --btn-ghost-bg-hover: var(--color-accent-soft);
  --btn-disabled-opacity: 0.45;
  --btn-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.2);

  /* ── Forms ── */
  --input-height: 40px;
  --input-height-sm: 34px;
  --input-height-lg: 48px;
  --input-padding-x: var(--space-3);
  --input-border: var(--color-border-strong);
  --input-bg: var(--color-surface);
  --input-radius: var(--ds-radius-sm);
  --input-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.12);
  --label-size: var(--text-xs);
  --label-weight: var(--weight-bold);
  --hint-size: var(--text-xs);

  /* ── Tables ── */
  --table-header-bg: var(--color-surface-2);
  --table-header-size: var(--text-2xs);
  --table-cell-padding-y: 10px;
  --table-cell-padding-x: var(--space-3);
  --table-row-hover: var(--color-surface-2);
  --table-border: var(--color-border-subtle);
  --table-density-compact: 8px;
  --table-density-comfortable: 12px;

  /* ── Cards ── */
  --card-padding: var(--space-6);
  --card-padding-sm: var(--space-4);
  --card-radius: var(--ds-radius-lg);
  --card-border: var(--color-border);
  --card-bg: var(--color-surface);
  --card-shadow: var(--elevation-1);

  /* ── KPI / metrics ── */
  --metric-display-size: var(--text-4xl);
  --metric-value-size: var(--text-xl);
  --metric-label-size: var(--text-2xs);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}