/**
 * MAMDOCUNG.VN - DESIGN SYSTEM TOKENS
 * Phối màu chủ đạo: Ngọc lục (#123E35) & Champagne (#C5AC78)
 * Nền ấm: Ngà (#FCFAF4), Chữ tương phản: #172D28
 * Tiêu chuẩn: WCAG 2.1 AA, 44px Touch Targets, 4 Breakpoints (360, 390, 768, 1440px)
 */

:root {
  /* Brand Core Colors */
  --mdc-jade: #123E35;
  --mdc-jade-dark: #0B2621;
  --mdc-jade-light: #1D5449;
  --mdc-champagne: #C5AC78;
  --mdc-champagne-light: #F7F3EB;
  --mdc-champagne-hover: #B59B63;
  --mdc-ivory: #FCFAF4;
  --mdc-text: #172D28;
  --mdc-text-muted: #556B64;
  --mdc-border: #E8E2D5;
  --mdc-border-focus: #C5AC78;
  --mdc-card-bg: #FFFFFF;
  --mdc-surface: #F9F6EE;

  /* State / Feedback Colors (Luôn đi kèm Text + Icon, không chỉ dùng màu) */
  --mdc-success: #1E6B38;
  --mdc-success-bg: #EAF7EE;
  --mdc-success-border: #B7E4C7;
  --mdc-warning: #925807;
  --mdc-warning-bg: #FEF7EA;
  --mdc-warning-border: #F5DCA8;
  --mdc-error: #A82424;
  --mdc-error-bg: #FDF2F2;
  --mdc-error-border: #F7BDBD;

  /* Backward Compatibility Aliases cho code hiện hành */
  --mdc-red: var(--mdc-jade);
  --mdc-red-dark: var(--mdc-jade-dark);
  --mdc-bg: var(--mdc-ivory);
  --mdc-card: var(--mdc-card-bg);
  --mdc-line: var(--mdc-border);
  --mdc-input: #D5CBBF;
  --mdc-ink: var(--mdc-text);
  --mdc-muted: var(--mdc-text-muted);
  --mdc-green: var(--mdc-success);

  /* Typography */
  --mdc-font-serif: 'Playfair Display', Georgia, serif;
  --mdc-font-sans: 'Be Vietnam Pro', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mdc-font-size-xs: 12px;
  --mdc-font-size-sm: 14px;
  --mdc-font-size-base: 16px;
  --mdc-font-size-lg: 18px;
  --mdc-font-size-xl: 20px;
  --mdc-font-size-2xl: 24px;
  --mdc-font-size-3xl: 30px;
  --mdc-line-height-tight: 1.25;
  --mdc-line-height-base: 1.5;
  --mdc-line-height-relaxed: 1.75;

  /* Spacing Grid (Bội số 4px & 8px) */
  --mdc-space-1: 4px;
  --mdc-space-2: 8px;
  --mdc-space-3: 12px;
  --mdc-space-4: 16px;
  --mdc-space-5: 20px;
  --mdc-space-6: 24px;
  --mdc-space-8: 32px;
  --mdc-space-10: 40px;
  --mdc-space-12: 48px;
  --mdc-space-16: 64px;

  /* Layout & Container */
  --mdc-max-width: 1240px;
  --mdc-radius-sm: 4px;
  --mdc-radius-md: 8px;
  --mdc-radius-lg: 12px;
  --mdc-radius-full: 9999px;
  --mdc-shadow-sm: 0 1px 3px rgba(18, 62, 53, 0.05);
  --mdc-shadow-md: 0 4px 12px rgba(18, 62, 53, 0.08);
  --mdc-shadow-lg: 0 8px 24px rgba(18, 62, 53, 0.12);

  /* Accessibility & Tap Target (Tiêu chuẩn tối thiểu 44px) */
  --mdc-min-touch: 44px;
}

/* Base Body & Layout Styling */
body {
  background-color: var(--mdc-ivory);
  color: var(--mdc-text);
  font-family: var(--mdc-font-sans);
  font-size: var(--mdc-font-size-base);
  line-height: var(--mdc-line-height-base);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .mdc-serif {
  font-family: var(--mdc-font-serif);
  color: var(--mdc-jade);
  font-weight: 600;
  line-height: var(--mdc-line-height-tight);
}

/* Accessibility Focus Ring Chuẩn */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--mdc-champagne) !important;
  outline-offset: 2px !important;
}

/* Chuẩn Nút Bấm Chính & Phụ */
.mdc-btn-primary, .button.primary {
  background-color: var(--mdc-jade) !important;
  border-color: var(--mdc-jade) !important;
  color: #FFFFFF !important;
  border-radius: var(--mdc-radius-md) !important;
  font-family: var(--mdc-font-sans) !important;
  font-weight: 600 !important;
  min-height: var(--mdc-min-touch);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--mdc-space-6);
  transition: all 0.2s ease-in-out;
  text-transform: none !important;
}

.mdc-btn-primary:hover, .button.primary:hover {
  background-color: var(--mdc-jade-dark) !important;
  border-color: var(--mdc-jade-dark) !important;
  box-shadow: var(--mdc-shadow-md);
}

.mdc-btn-secondary {
  background-color: var(--mdc-champagne-light);
  border: 1px solid var(--mdc-champagne);
  color: var(--mdc-jade);
  border-radius: var(--mdc-radius-md);
  font-family: var(--mdc-font-sans);
  font-weight: 600;
  min-height: var(--mdc-min-touch);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--mdc-space-6);
  transition: all 0.2s ease-in-out;
}

.mdc-btn-secondary:hover {
  background-color: var(--mdc-champagne);
  color: #FFFFFF;
}

/* Notice & Alerts (Kèm Icon & Chữ) */
.mdc-notice {
  padding: var(--mdc-space-4);
  border-radius: var(--mdc-radius-md);
  display: flex;
  align-items: flex-start;
  gap: var(--mdc-space-3);
  font-size: var(--mdc-font-size-sm);
  margin-bottom: var(--mdc-space-4);
}

.mdc-notice.success {
  background-color: var(--mdc-success-bg);
  border: 1px solid var(--mdc-success-border);
  color: var(--mdc-success);
}

.mdc-notice.warning {
  background-color: var(--mdc-warning-bg);
  border: 1px solid var(--mdc-warning-border);
  color: var(--mdc-warning);
}

.mdc-notice.error {
  background-color: var(--mdc-error-bg);
  border: 1px solid var(--mdc-error-border);
  color: var(--mdc-error);
}

/* Responsive Container & Breakpoint Helpers */
.mdc-container {
  width: 100%;
  max-width: var(--mdc-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--mdc-space-4);
  padding-right: var(--mdc-space-4);
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .mdc-container {
    padding-left: var(--mdc-space-6);
    padding-right: var(--mdc-space-6);
  }
}

@media (min-width: 1440px) {
  .mdc-container {
    padding-left: var(--mdc-space-8);
    padding-right: var(--mdc-space-8);
  }
}