/*
  УППС65 — design tokens (Phase 1 foundation).

  This file only declares custom properties on :root. It defines no
  selectors against existing markup, so linking it changes nothing
  visually today — it exists for Phase 3+ components to consume.

  Layers: primitive -> semantic -> component, per the redesign report's
  design-system section. Semantic tokens reference primitive tokens only;
  component tokens reference semantic tokens only — no raw hex below the
  primitive layer, no primitive references above it.

  Danger/red is reserved for fire/critical semantics only and must never
  be used as a decorative default.
*/

:root {
  /* ---------- Primitive: neutral scale ---------- */
  --gray-0: #FFFFFF;
  --gray-50: #F8FAFC;
  --gray-100: #F1F5F9;
  --gray-200: #E2E8F0;
  --gray-300: #CBD5E1;
  --gray-400: #94A3B8;
  --gray-500: #64748B;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1E293B;
  --gray-900: #0F172A;
  --gray-900-a40: rgba(15, 23, 42, .4);
  --overlay-bg: var(--gray-900-a40);

  /* ---------- Primitive: hue scales (tint / mid / deep) ---------- */
  --blue-50: #EEF3FC;
  --blue-200: #B9CBEA;
  --blue-500: #0369A1;
  --blue-600: #075985;
  --blue-500-a35: rgba(3, 105, 161, .35);

  --green-50: #EAF6EE;
  --green-200: #BFE2CB;
  --green-500: #15803D;
  --green-600: #14532D;

  --amber-50: #FDF3E6;
  --amber-200: #EAC488;
  --amber-500: #B45309;
  --amber-600: #92400E;

  --red-50: #FDEDEC;
  --red-200: #E7B3AC;
  --red-500: #B91C1C;
  --red-600: #991B1B;

  /* ---------- Primitive: spacing scale ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---------- Primitive: radius / shadow ---------- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 1px rgba(15, 23, 42, .04);
  --shadow-md: 0 4px 10px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .06);

  /* ---------- Primitive: type scale (12/13/14/16/18/22/28) ---------- */
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-md: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 22px;
  --font-size-xxl: 28px;
  --line-height-tight: 1.2;
  --line-height-body: 1.5;
  --font-heading: var(--font-body);
  --font-body: "Source Sans 3", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* ---------- Semantic: surfaces & text ---------- */
  --surface: var(--gray-0);
  --surface-muted: var(--gray-50);
  --surface-strong: var(--gray-100);
  --border: var(--gray-200);
  --border-strong: var(--gray-300);
  --text: var(--gray-900);
  --text-muted: var(--gray-600);
  --text-faint: var(--gray-500);
  --text-on-accent: var(--gray-0);

  /* ---------- Semantic: accent ---------- */
  --accent: var(--gray-900);
  --accent-soft: var(--gray-100);
  --link: var(--blue-500);
  --focus: var(--blue-500-a35);

  /* ---------- Semantic: status (bg / fg / border triples) ---------- */
  --info-bg: var(--blue-50);
  --info-fg: var(--blue-600);
  --info-border: var(--blue-200);

  --success-bg: var(--green-50);
  --success-fg: var(--green-600);
  --success-border: var(--green-200);

  --warning-bg: var(--amber-50);
  --warning-fg: var(--amber-600);
  --warning-border: var(--amber-200);

  --danger-bg: var(--red-50);
  --danger-fg: var(--red-600);
  --danger-border: var(--red-200);

  --disabled-bg: var(--gray-100);
  --disabled-fg: var(--gray-400);
  --disabled-border: var(--gray-200);

  /* ---------- Component (seed only — full inventory is Phase 3) ---------- */
  --focus-ring: 0 0 0 3px var(--focus);
  --button-primary-bg: var(--accent);
  --button-primary-fg: var(--text-on-accent);

  /* ---------- Component: unified forms ---------- */
  --control-height: 42px;
  --control-height-compact: 36px;
  --control-padding-x: 11px;
  --control-padding-y: 9px;
  --control-radius: var(--radius-md);
  --control-border: var(--border);
  --control-border-focus: var(--info-fg);
  --control-bg: var(--surface);
  --control-disabled-bg: var(--disabled-bg);
  --control-label-size: var(--font-size-md);
  --control-help-size: var(--font-size-sm);
  --form-field-gap: var(--space-3);

  /* ---------- Component: typography / density / proportions ---------- */
  --page-title-size: 24px;
  --page-title-size-mobile: 22px;
  --section-title-size: 18px;
  --section-title-size-mobile: 17px;
  --body-size: var(--font-size-base);
  --control-text-size: var(--font-size-md);
  --label-size: var(--font-size-md);
  --helper-size: var(--font-size-sm);
  --table-text-size: var(--font-size-md);
  --table-head-size: var(--font-size-sm);
  --table-text-weight: 400;
  --table-head-weight: 700;
  --table-line-height: 1.35;
  --table-head-line-height: 1.3;
  --table-cell-padding-y: 10px;
  --table-cell-padding-x: 12px;
  --table-cell-padding-y-compact: 8px;
  --table-cell-padding-x-compact: 10px;
  --table-row-height: 44px;
  --table-row-height-compact: 40px;
  --table-head-bg: #f7f9fc;
  --table-row-hover-bg: #f8fafc;
  --table-border: var(--border);
  --table-col-id-min: 64px;
  --table-col-date-min: 112px;
  --table-col-time-min: 88px;
  --table-col-number-min: 96px;
  --table-col-status-min: 112px;
  --table-col-plate-min: 104px;
  --table-col-primary-min: 144px;
  --table-col-text-min: 160px;
  --table-col-text-wide-min: 220px;
  --table-col-actions-min: 120px;
  --table-tool-height: 34px;
  --table-tool-text-size: 13px;
  --table-tool-weight: 600;
  --button-text-size: var(--font-size-md);
  --panel-padding: var(--space-4);
  --panel-padding-mobile: 14px;
  --page-inline-padding: var(--space-5);
  --page-inline-padding-mobile: var(--space-4);
  --content-max-width: 1320px;
  --form-max-width: 1120px;
  --form-reading-width: 760px;
}