:root {
  /* 主色調配色 - 灰冷色系 */
  --yr-primary-50: #f8fafc;
  --yr-primary-100: #f1f5f9;
  --yr-primary-200: #e2e8f0;
  --yr-primary-300: #cbd5e1;
  --yr-primary-400: #94a3b8;
  --yr-primary-500: #64748b;
  --yr-primary-600: #475569;
  --yr-primary-700: #334155;
  --yr-primary-800: #1e293b;
  --yr-primary-900: #0f172a;

  --yr-error-color: #b91c1c;
  --yr-warning-color: #b45309;
  --yr-success-color: #15803d;
  --yr-info-color: #2563eb;
  --yr-notice-color: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.3) 0%,
      rgba(0, 0, 0, 0.3) 100%
    ),
    radial-gradient(
      at top left,
      rgba(255, 255, 255, 0.4) 0%,
      rgba(0, 0, 0, 0.8) 120%
    ),
    var(--yr-primary-500);

  --yr-text-dark-color: #1e293b;
  --yr-text-light-color: #f8fafc;
  --yr-text-secondary-color: #64748b;

  --yr-link-color: var(--yr-info-color);
  --yr-link-hover-color: color-mix(
    in srgb,
    var(--yr-info-color) 80%,
    var(--yr-primary-900)
  );

  --yr-unit-xs: 0.75rem;
  --yr-unit-sm: 1rem;
  --yr-unit-md: 1.3rem;
  --yr-unit-lg: 1.8rem;
  --yr-unit-xl: 2.2rem;
  --yr-unit-2xl: 2.6rem;
  --yr-unit-3xl: 3rem;
  --yr-unit-full: 9999rem;

  --site-btn-color: #af1212;
  --site-btn-hover-color: #d1a33a;
  --site-btn-padding: 0.8rem 2.4rem;
  --site-btn-border-radius: 0.4rem;
}

.flex {
  display: flex;
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.justify-between {
  justify-content: space-between;
}
.justify-center {
  justify-content: center;
}
.justify-end {
  justify-content: flex-end;
}
.justify-start {
  justify-content: flex-start;
}
.align-center {
  align-items: center;
}
.align-end {
  align-items: flex-end;
}
.align-start {
  align-items: flex-start;
}
.align-between {
  align-items: space-between;
}
.align-stretch {
  align-items: stretch;
}
.align-baseline {
  align-items: baseline;
}