:root {
  /* Brand */
  --tf-primary:        #003478;
  --tf-primary-hover:  #00449e;
  --tf-primary-active: #002d69;
  --tf-primary-light:  #f0f4f9;
  --tf-primary-border: #99b3d4;
  --tf-accent:         #0077cc;

  /* Feedback */
  --tf-danger:         #dc2626;
  --tf-danger-light:   rgba(220,38,38,0.08);
  --tf-success:        #10b981;
  --tf-warning-bg:     #fffbeb;
  --tf-warning-border: #fde68a;
  --tf-warning-text:   #92400e;

  /* Neutral */
  --tf-bg:             #edf1f7;
  --tf-white:          #ffffff;
  --tf-border:         #dde3ec;
  --tf-border-hover:   #b8c5d6;
  --tf-text:           #0f1923;
  --tf-text-secondary: #2d3a4a;
  --tf-text-muted:     #64748b;
  --tf-text-placeholder: #94a3b8;
  --tf-bg-disabled:    #f4f6f9;

  /* Radius */
  --tf-radius-sm:  6px;
  --tf-radius-md:  10px;
  --tf-radius-lg:  14px;

  /* Shadow — layered with blue tint for depth */
  --tf-shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,68,158,0.08), 0 0 0 1px rgba(0,68,158,0.04);
  --tf-shadow-card-hover: 0 2px 6px rgba(0,0,0,0.06), 0 14px 36px rgba(0,68,158,0.12);
  --tf-shadow-btn:  0 4px 16px rgba(0,52,120,0.40), 0 1px 4px rgba(0,0,0,0.12);

  /* Spacing */
  --tf-card-pad: 28px;
  --tf-gap:      16px;

  /* Misc */
  --tf-surface:  #f0f4f9;
  --tf-heading:  #0f1923;
}