/* Design Token Foundation — UI Comprehensive Refactor v2
 * Rewrites v1 (UI Design System Uplift) with warm off-black palette.
 * All backward-compat aliases at bottom keep existing components working.
 * Load order: tokens.css → typography.css → spacing.css → components/*.css
 */

/* Reserve scrollbar gutter so the viewport width stays constant whether the
 * page currently overflows vertically or not. Prevents the centered page
 * wrappers (.hunter-config-main, .contacts-main, SPA dashboard, .admin-main)
 * from shifting ~15px inward when async data fills the page and a vertical
 * scrollbar appears. No-op on mobile overlay-scrollbar platforms. */
html { scrollbar-gutter: stable; }

:root {

  /* ── Brand ────────────────────────────────────────────────────────────── */
  --color-brand-500: #3B82F6;   /* primary blue */
  --color-brand-600: #2563EB;   /* hover state */
  --color-brand-100: #DBEAFE;   /* tint / highlight */

  /* ── Semantic ─────────────────────────────────────────────────────────── */
  --color-success-500: #10B981;
  --color-warning-500: #F59E0B;
  --color-error-500:   #EF4444;
  --color-info-500:    #06B6D4;

  /* ── Surfaces (warm off-black — Entergram premium B2B) ────────────────── */
  --surface-page:     #16161A;   /* root background — warm dark */
  --surface-elevated: #1A1A1F;   /* slightly lifted panels */
  --surface-card:     #1F1F24;   /* card backgrounds */
  --surface-input:    #1A1A1F;   /* form inputs */
  --surface-hover:    #26262C;   /* hover state */
  --surface-active:   #2A2A30;   /* active / pressed state */

  /* ── Text ─────────────────────────────────────────────────────────────── */
  --text-primary:   #E6E7EB;   /* main readable text */
  --text-secondary: #9CA3AF;   /* supporting / secondary copy */
  --text-muted:     #6B7280;   /* disabled-adjacent, hints */
  --text-disabled:  #4B5563;   /* truly disabled labels */
  --text-on-brand:  #FFFFFF;   /* text on brand-colored backgrounds */

  /* ── Borders (subtle — no heavy elevation) ────────────────────────────── */
  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong:  rgba(255, 255, 255, 0.16);

  /* ── Shadows (minimal — warm dark context) ────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.55);

  /* ── Radius ───────────────────────────────────────────────────────────── */
  --radius-xs:   4px;    /* micro-pills */
  --radius-sm:   6px;    /* mini buttons */
  --radius-base: 8px;    /* buttons, inputs */
  --radius-md:   10px;   /* cards */
  --radius-lg:   14px;   /* modals */
  --radius-xl:   20px;   /* heroic cards */
  --radius-full: 9999px; /* pills, avatars */

  /* ── Focus ring ───────────────────────────────────────────────────────── */
  --focus-ring-color: var(--color-brand-500);

  /* ── Layout dimensions ────────────────────────────────────────────────── */
  --layout-icon-rail-width:  56px;    /* left narrow icon-only rail */
  --layout-sidebar-width:    264px;   /* settings nav-sidebar — fits "Администрирование" */
  --layout-container-max:    1440px;
  --layout-header-height:    52px;   /* Direction B §9 slim top-nav (was 64px); app-header + admin sticky-nav track this token */
  --layout-page-padding-x:   32px;

  /* ── Backward-compat aliases ──────────────────────────────────────────── */
  /* These map old names → new tokens so existing CSS continues to work.    */
  --primary-color:    var(--color-brand-500);
  --bg-primary:       var(--surface-page);
  --bg-secondary:     var(--surface-elevated);
  --bg-tertiary:      var(--surface-elevated);
  --bg-card:          var(--surface-card);
  --bg-input:         var(--surface-input);
  --bg-hover:         var(--surface-hover);
  --bg-sidebar:       var(--surface-elevated);
  --border-color:     var(--border-default);
  --border-light:     var(--border-subtle);
  --border-dark:      var(--border-strong);
  --border-radius:    var(--radius-base);
  --border-radius-sm: var(--radius-sm);
  --border-radius-lg: var(--radius-lg);
  --text-accent:      var(--color-brand-500);
  --success-color:    var(--color-success-500);
  --warning-color:    var(--color-warning-500);
  --error-color:      var(--color-error-500);
  --shadow-lg:        var(--shadow-md);
}

/* ── Control-sizing tokens — canonical interactive control sizes ──────────
 * Single source of truth for button/input/row heights, padding, fonts, icons.
 * All controls consume these; no page or module may hardcode heights in px/rem.
 * Defined in a separate :root block so they cascade after the base block above.
 */
:root {
  /* Control heights — the spine of the whole UI */
  --control-h-sm:  28px;  /* dense: table-row buttons, inline filters, chips */
  --control-h-md:  36px;  /* DEFAULT: primary buttons, inputs, selects, table rows */
  --control-h-lg:  44px;  /* touch / hero: the Start control, mobile, settings rows */

  /* Horizontal padding paired with each height (vertical comes from the height) */
  --control-px-sm: var(--space-3);   /* 12px */
  --control-px-md: var(--space-4);   /* 16px */
  --control-px-lg: var(--space-5);   /* 20px */

  /* Font size paired with each height */
  --control-font-sm: var(--font-xs);    /* 12px */
  --control-font-md: var(--font-sm);    /* 13px — matches --font-base for inputs */
  --control-font-lg: var(--font-base);  /* 14px */

  /* Icon size inside controls */
  --control-icon-sm: 14px;
  --control-icon-md: 16px;

  /* Gap between icon and label inside a control */
  --control-gap: var(--space-2);  /* 8px */
}