/**
 * TYT Design Tokens v2.0
 * Nguồn: Design_System_Guidelines.html §17
 */
:root {
  --font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --primary: #0866f5;
  --primary-hover: #0053d6;
  --primary-soft: #eaf2ff;

  --ink: #101c3d;
  --muted: #52627e;
  --subtle: #72809d;

  --border-default: #e3eaf5;
  --btn-outline-border: #a1a1a1;
  --background: #f5f8fd;
  --bg: #f5f8fd;
  --line: var(--border-default);
  --surface: #ffffff;

  --success: #0b8d61;
  --success-soft: #e5f8ee;
  --warning: #ae6500;
  --warning-soft: #fff2dc;
  --danger: #d72840;
  --danger-soft: #ffebef;
  --info: #0866f5;

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

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  --shadow-card: 0 8px 28px rgba(31, 60, 110, 0.06);
  --focus-ring: 0 0 0 3px #0866f52e;

  /*
   * Login & components.css — alias (layout giữ nguyên, chỉ đổi giá trị semantic)
   */
  --dt-font-sans: var(--font-family);
  --dt-text-ui: 13px;
  --dt-leading-ui: 1.55;

  --dt-ink: var(--ink);
  --dt-ink-soft: var(--ink);
  --dt-ink-heading: var(--ink);
  --dt-muted: var(--muted);
  --dt-muted-2: var(--subtle);
  --dt-muted-3: var(--subtle);
  --dt-muted-4: var(--muted);
  --dt-muted-5: var(--subtle);
  --dt-muted-6: var(--subtle);
  --dt-placeholder: var(--subtle);

  --dt-brand: var(--primary);
  --dt-brand-hover: var(--primary-hover);
  --dt-brand-accent: var(--primary);
  --dt-brand-light: var(--primary);
  --dt-brand-border: var(--primary);
  --dt-brand-soft-bg: var(--primary-soft);
  --dt-brand-chip-bg: var(--primary-soft);
  --dt-brand-shadow: rgba(8, 102, 245, 0.16);

  --dt-focus: var(--primary);
  --dt-focus-ring: #0866f52e;

  --dt-page-bg: var(--background);
  --dt-shell-gradient-from: var(--surface);
  --dt-shell-gradient-to: var(--primary-soft);
  --dt-shell-shadow: rgba(31, 60, 110, 0.08);
  --dt-intro-gradient: linear-gradient(130deg, var(--surface), var(--primary-soft));
  --dt-intro-radial: var(--primary-soft);

  --dt-surface: var(--surface);
  --dt-surface-muted: var(--primary-soft);
  --dt-surface-soft: var(--background);
  --dt-card-shadow: rgba(31, 60, 110, 0.07);
  --dt-logo-shadow: rgba(31, 60, 110, 0.1);

  --dt-field-border: var(--border-default);
  --dt-divider: var(--border-default);
  --dt-icon: var(--subtle);
  --dt-icon-muted: var(--muted);

  --dt-error: var(--danger);
  --dt-error-text: var(--danger);
  --dt-success-text: var(--success);

  --dt-feature-blue: var(--info);
  --dt-feature-green: var(--success);
  --dt-feature-orange: var(--warning);
  --dt-art-bg: var(--primary-soft);

  --dt-radius-control: var(--radius-md);
  --dt-radius-shell: 20px;
  --dt-control-height: 40px;
  --dt-btn-height: 42px;
}