/*
 * TOÁN TIN Design System Core — BUILD 7 UI-FND-1
 * Nền token dùng chung cho toàn hệ thống. Không gắn theme theo từng role/page.
 * Chỉ thay đổi semantic token tại đây khi có quyết định Design System chung.
 */
:root {
  /* Brand / accent */
  --tt-color-brand-primary:#4f46e5;
  --tt-color-brand-primary-hover:#4338ca;
  --tt-color-brand-secondary:#7c3aed;
  --tt-color-accent:#0ea5e9;

  /* Text */
  --tt-color-text:#172033;
  --tt-color-text-muted:#64748b;
  --tt-color-text-subtle:#94a3b8;
  --tt-color-text-inverse:#ffffff;

  /* Surface / background */
  --tt-color-surface:#ffffff;
  --tt-color-surface-soft:#f6f8fc;
  --tt-color-surface-muted:#f1f5f9;
  --tt-color-canvas:#f8fafc;

  /* Border / divider */
  --tt-color-border:#e2e8f0;
  --tt-color-border-strong:#cbd5e1;

  /* Semantic status */
  --tt-color-success:#16a34a;
  --tt-color-success-soft:#ecfdf3;
  --tt-color-warning:#d97706;
  --tt-color-warning-soft:#fff7ed;
  --tt-color-danger:#dc2626;
  --tt-color-danger-soft:#fff1f2;
  --tt-color-info:#0284c7;
  --tt-color-info-soft:#eff6ff;
  --tt-color-disabled:#94a3b8;
  --tt-color-disabled-soft:#e2e8f0;
  --tt-color-focus:#4f46e5;
  --tt-focus-ring:0 0 0 .2rem rgba(79,70,229,.22);

  /* Typography */
  --tt-font-sans:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --tt-font-size-xs:.75rem;
  --tt-font-size-sm:.875rem;
  --tt-font-size-md:1rem;
  --tt-font-size-lg:1.125rem;
  --tt-font-size-xl:1.375rem;
  --tt-line-height-tight:1.25;
  --tt-line-height-normal:1.5;
  --tt-line-height-relaxed:1.7;

  /* Spacing — 4px base rhythm */
  --tt-space-0:0;
  --tt-space-1:.25rem;
  --tt-space-2:.5rem;
  --tt-space-3:.75rem;
  --tt-space-4:1rem;
  --tt-space-5:1.25rem;
  --tt-space-6:1.5rem;
  --tt-space-8:2rem;
  --tt-space-10:2.5rem;
  --tt-space-12:3rem;

  /* Radius */
  --tt-radius-sm:.5rem;
  --tt-radius-md:.75rem;
  --tt-radius-lg:1rem;
  --tt-radius-xl:1.25rem;
  --tt-radius-pill:999px;

  /* Elevation */
  --tt-shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --tt-shadow-md:0 8px 24px rgba(15,23,42,.08);
  --tt-shadow-lg:0 18px 46px rgba(15,23,42,.12);

  /* Motion */
  --tt-motion-fast:150ms;
  --tt-motion-normal:200ms;
  --tt-motion-smooth:260ms;
  --tt-motion-ease:cubic-bezier(.2,.8,.2,1);

  /* Responsive contract (documentation/JS reference; media queries use literal values). */
  --tt-breakpoint-sm:576px;
  --tt-breakpoint-md:768px;
  --tt-breakpoint-lg:992px;
  --tt-breakpoint-xl:1200px;
  --tt-breakpoint-xxl:1400px;

  /* Interaction / layout */
  --tt-touch-target:44px;
  --tt-content-max:1320px;
  --tt-z-sticky:1020;
  --tt-z-fixed:1030;
  --tt-z-offcanvas:1045;
  --tt-z-modal:1055;
  --tt-z-toast:1090;
}

/* Foundation-level accessibility: chỉ bổ sung focus khi bàn phím thực sự dùng. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible {
  outline:2px solid var(--tt-color-focus);
  outline-offset:2px;
  box-shadow:var(--tt-focus-ring);
}

/* Không dùng màu như tín hiệu duy nhất: component status luôn cần text/icon/label đi kèm. */
.tt-status-semantic {
  display:inline-flex;
  align-items:center;
  gap:var(--tt-space-1);
}

@media (prefers-reduced-motion:reduce) {
  :root {
    --tt-motion-fast:1ms;
    --tt-motion-normal:1ms;
    --tt-motion-smooth:1ms;
  }
}