/* Design tokens — Source of Truth: UI library board */
:root {
  /* Brand / semantic */
  --ui-primary: #1B61D1;
  --ui-primary-hover: #1554B8;
  --ui-primary-active: #1248A0;
  --ui-primary-soft: #E8F0FB;
  --ui-secondary: #8DA3B9;
  --ui-secondary-hover: #7A92AB;
  --ui-success: #19A34A;
  --ui-success-hover: #158A3F;
  --ui-success-soft: #E8F8EE;
  --ui-warning: #F59E0B;
  --ui-warning-hover: #D97706;
  --ui-warning-soft: #FEF3C7;
  --ui-danger: #EF4444;
  --ui-danger-hover: #DC2626;
  --ui-danger-soft: #FEE2E2;
  --ui-info: #06B6D4;
  --ui-info-hover: #0891B2;
  --ui-info-soft: #CFFAFE;
  /* Alias of --ui-n-800. Prefer --ui-n-800 in new styles. */
  --ui-dark: var(--ui-n-800);

  /* Status / badge / alert ink — same hex as the previous component literals */
  --ui-status-info-bg: #DBEAFE;
  --ui-status-info-fg: #1D4ED8;
  --ui-status-warning-bg: #FEF3C7;
  --ui-status-warning-fg: #B45309;
  --ui-status-success-bg: #DCFCE7;
  --ui-status-success-fg: #15803D;
  --ui-status-danger-bg: #FEE2E2;
  --ui-status-danger-fg: #B91C1C;
  --ui-status-accent-bg: #E0E7FF;
  --ui-status-accent-fg: #4338CA;
  --ui-status-info-border: #A5F3FC;
  --ui-status-info-ink: #155E75;
  --ui-status-warning-border: #FDE68A;
  --ui-status-warning-ink: #92400E;
  --ui-status-success-border: #BBF7D0;
  --ui-status-success-ink: #166534;
  --ui-status-danger-border: #FECACA;
  --ui-status-danger-ink: #991B1B;
  --ui-status-rail-info-fg: #0E7490;
  --ui-selected-bg: #DCE8F9;

  /* Neutrals */
  --ui-n-50: #F9FAFB;
  --ui-n-100: #F3F4F6;
  --ui-n-200: #E5E7EB;
  --ui-n-300: #D1D5DB;
  --ui-n-400: #9CA3AF;
  --ui-n-500: #6B7280;
  --ui-n-600: #4B5563;
  --ui-n-700: #374151;
  --ui-n-800: #1F2937;
  --ui-n-900: #111827;

  /* Text */
  --ui-text-primary: var(--ui-n-900);
  --ui-text-secondary: var(--ui-n-600);
  --ui-text-muted: var(--ui-n-400);
  --ui-text-inverse: #FFFFFF;

  /* Surfaces */
  --ui-page-bg: var(--ui-n-50);
  --ui-surface: #FFFFFF;
  --ui-surface-muted: var(--ui-n-100);
  --ui-border: var(--ui-n-200);
  --ui-border-strong: var(--ui-n-300);

  /* Radius */
  --ui-radius-xs: 2px;
  --ui-radius-sm: 4px;
  --ui-radius-md: 6px;
  --ui-radius-lg: 8px;
  --ui-radius-xl: 12px;

  /* Shadows */
  --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --ui-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --ui-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.12);

  /* Spacing scale */
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 20px;
  --ui-space-6: 24px;
  --ui-space-8: 32px;
  --ui-space-10: 40px;

  /* Typography */
  --ui-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ui-fs-h1: 32px;
  --ui-lh-h1: 40px;
  --ui-fw-h1: 700;
  --ui-fs-h2: 24px;
  --ui-lh-h2: 32px;
  --ui-fw-h2: 600;
  --ui-fs-h3: 20px;
  --ui-lh-h3: 28px;
  --ui-fw-h3: 600;
  --ui-fs-h4: 18px;
  --ui-lh-h4: 24px;
  --ui-fw-h4: 600;
  --ui-fs-lg: 16px;
  --ui-lh-lg: 24px;
  --ui-fs-base: 14px;
  --ui-lh-base: 20px;
  --ui-fs-sm: 12px;
  --ui-lh-sm: 16px;
  --ui-fs-caption: 11px;
  --ui-lh-caption: 16px;

  /* Component sizes */
  --ui-btn-h-sm: 28px;
  --ui-btn-h-md: 36px;
  --ui-btn-h-lg: 44px;
  --ui-btn-pad-x-sm: 10px;
  --ui-btn-pad-x-lg: 18px;
  --ui-input-h: 36px;
  --ui-sidebar-w: 240px;
  --ui-table-row-h: 46px;
  --ui-icon-sm: 16px;
  --ui-icon-md: 18px;
  --ui-icon-lg: 20px;

  /* Focus */
  --ui-focus-ring: 0 0 0 3px rgba(27, 97, 209, 0.28);

  /* Layout */
  --ui-content-max: 1400px;
  --ui-gutter: 20px;

  /*
    Canonical breakpoints. @media cannot read custom properties, so queries repeat these literals.
    --ui-bp-wide-min: 1600px
    --ui-bp-content-max: 1279px
    --ui-bp-tablet-max: 1023px
    --ui-bp-mobile-max: 767px
    --ui-bp-phone-max: 429px
    --ui-bp-compact-max: 359px
    Catalog-only queries (1180/960/860/620) belong to ui-catalog.css, not the product shell.
  */

  /* Library watermark mark (ui-catalog / ui-library). HR product mark is --ui-hr-mark. */
  --ui-brand-short: KZ;
  --ui-hr-mark: HR;
  --ui-brand-watermark-text: "KZ    KZ    KZ    KZ    KZ    KZ    KZ    KZ    KZ    KZ    KZ    KZ    KZ    KZ    KZ    KZ    KZ    KZ    KZ    KZ    KZ    KZ    KZ    KZ";
  --ui-brand-watermark-color: rgba(27, 97, 209, 0.045);
}