/* Shared design system. The MVC home view is the visual reference. */
:root {
  color-scheme: light;
  --font-body: "Vazirmatn", "Estedad", Tahoma, sans-serif;
  --font-heading: "Estedad", "Vazirmatn", Tahoma, sans-serif;
  --font-latin: Arial, sans-serif;
  --font-size-root: 16px;
  --text-xs: 10px;
  --text-sm: 12px;
  --text-md: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --leading-tight: 1.5;
  --leading-normal: 1.8;
  --leading-relaxed: 2;
  --color-navy: #102a43;
  --color-blue: #243b53;
  --color-gold: #f6c515;
  --color-cream: #f5f7f8;
  --color-surface: #ffffff;
  --color-white: #fff;
  --color-ink: #202a33;
  --color-muted: #65737d;
  --color-line: #dee4e7;
  --color-line-strong: #aeb9bf;
  --color-page: var(--color-cream);
  --color-content-surface: var(--color-surface);
  --color-text: var(--color-ink);
  --color-text-muted: var(--color-muted);
  --color-divider: var(--color-line);
  --color-accent: var(--color-gold);
  --color-success: #16835a;
  --color-success-soft: #edf7f1;
  --color-danger: #b94f45;
  --color-danger-soft: #fff2f0;
  --color-danger-border: #ddb0aa;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --font-size-caption: 12px;
  --font-size-body-sm: 14px;
  --color-card-border: #dee4e7;
  --color-card-border-hover: #f6c515;
  --color-card-icon-border: #d6e0e5;
  --color-card-icon-bg: #edf2f4;
  --color-card-icon: #243b53;
  --surface-raised: #fff;
  --radius-card: 14px;
  --shadow-card: 0 8px 24px rgba(16, 42, 67, 0.06);
  --shadow-card-hover: 0 16px 34px rgba(16, 42, 67, 0.12);
  --transition-fast: 0.2s ease;
  --action-submit-bg: #102a43;
  --action-submit-bg-hover: #243b53;
  --action-submit-border: #102a43;
  --action-submit-shadow: 0 8px 20px rgba(16, 42, 67, 0.2);
  --action-submit-ring: rgba(246, 197, 21, 0.34);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --container-max: 1320px;
  --container-gutter: 40px;
  --header-height: 96px;
  --panel-shell-bg:
    radial-gradient(
      circle at 12% 4%,
      rgba(203, 218, 238, 0.62),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(237, 242, 248, 0.97)
    );
  --panel-icon-bg: linear-gradient(145deg, #edf2f8, #dfe7f1);
  --panel-icon-bg-hover: linear-gradient(145deg, #dfe9f5, #cfdcec);
  --panel-icon-border: rgba(113, 135, 166, 0.18);
  --panel-icon-color: #405a7d;
  /* Compatibility aliases for existing page components. */
  --navy: var(--color-navy);
  --navy2: var(--color-blue);
  --blue: var(--color-blue);
  --gold: var(--color-gold);
  --cream: var(--color-gold);
  --cream2: var(--color-cream);
  --white: var(--color-white);
  --ink: var(--color-ink);
  --muted: var(--color-muted);
  --surface: var(--color-surface);
  --line: var(--color-line);
  --p-navy: var(--color-navy);
  --p-blue: var(--color-blue);
  --p-gold: var(--color-gold);
  --p-cream: var(--color-cream);
  --p-ink: var(--color-ink);
  --p-muted: var(--color-muted);
}
html {
  font-size: var(--font-size-root);
}
body,
button,
input,
select,
textarea {
  font-family: var(--font-body);
  font-synthesis: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
.brand {
  font-family: var(--font-heading);
}
@media (max-width: 575px) {
  :root {
    --container-gutter: 24px;
  }
}