/* 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;
  --font-size-body: clamp(15px, calc(14.6px + 0.1vw), 16px);
  --font-size-page-title: clamp(28px, 3.4vw, 52px);
  --font-size-section-title: clamp(20px, 1.8vw, 26px);
  --font-size-card-title: clamp(14px, 1.05vw, 16px);
  --font-size-control: clamp(13px, 0.25vw + 12px, 14px);
  --text-xs: 12px;
  --text-sm: clamp(13px, 0.2vw + 12px, 14px);
  --text-md: clamp(14px, 0.2vw + 13px, 15px);
  --text-base: var(--font-size-body);
  --text-lg: clamp(18px, 0.5vw + 16px, 20px);
  --text-xl: clamp(22px, 1vw + 18px, 26px);
  --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: #fff;
  --color-white: #fff;
  --color-ink: #202a33;
  --color-muted: #4c5b65;
  --color-line: #dfe5e9;
  --color-line-strong: #cbd5db;
  --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: #c73e3e;
  --color-danger-soft: #fff2f0;
  --color-danger-border: #ddb0aa;
  --focus-outline-color: rgba(246, 197, 21, 0.48);
  --focus-ring-soft: 0 0 0 3px rgba(246, 197, 21, 0.24);
  --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: #dfe5e9;
  --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;
  --radius-panel-compact: var(--radius-md);
  --radius-panel-standard: var(--radius-lg);
  --radius-panel-featured: 24px 24px 14px 24px;
  --radius-panel-floating: 22px;
  --container-max: 1320px;
  --container-wide-max: 1480px;
  --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;
  --industrial-navy: var(--color-navy);
  --industrial-steel: var(--color-blue);
  --industrial-yellow: var(--color-gold);
  --industrial-yellow-dark: #866600;
  --industrial-accent-border: #d4b14d;
  --industrial-accent-border-soft: color-mix(
    in srgb,
    var(--industrial-accent-border) 28%,
    white
  );
  --industrial-bg: var(--color-cream);
  --industrial-surface: var(--color-surface);
  --industrial-ink: var(--color-ink);
  --industrial-muted: var(--color-muted);
  --industrial-line: var(--color-line);
  --industrial-line-strong: var(--color-line-strong);
  --industrial-icon-border: var(--color-card-icon-border);
  --industrial-icon-surface: var(--color-card-icon-bg);
  --industrial-icon-ink: var(--color-card-icon);
  --industrial-icon-accent-border: #f0df9d;
  --industrial-icon-accent-surface: #fff9e4;
  --industrial-icon-accent-ink: #866600;
  --industrial-icon-gold: #b38700;
  --industrial-success: var(--color-success);
  --industrial-danger: #c73e3e;
  --industrial-shadow: 0 12px 30px rgba(16, 42, 67, 0.08);
  --industrial-shadow-hover: 0 18px 42px rgba(16, 42, 67, 0.14);
  --color-accent-border-soft: var(--industrial-accent-border-soft);
  --color-accent-border: var(--industrial-accent-border);
  --color-accent-ink: var(--industrial-yellow-dark);
  --color-accent-ink-soft: #94713d;
  --color-accent-ink-strong: #5f411c;
  --luxury-ink: var(--industrial-ink);
  --luxury-navy: var(--industrial-navy);
  --luxury-navy-soft: var(--industrial-steel);
  --luxury-gold: var(--industrial-yellow);
  --luxury-gold-light: #ffdf54;
  --luxury-ivory: var(--industrial-bg);
  --luxury-paper: var(--industrial-bg);
  --luxury-line: var(--industrial-line);
  --luxury-shadow: var(--industrial-shadow);
  --luxury-border-soft: rgba(16, 42, 67, 0.12);
  --luxury-border: rgba(16, 42, 67, 0.2);
  --luxury-border-strong: rgba(16, 42, 67, 0.34);
  --luxury-hover-surface: #eef2f4;
  --luxury-focus-ring: rgba(246, 197, 21, 0.24);
  /* Shared component aliases must derive from the canonical theme tokens. */
  --ui-navy: var(--color-navy);
  --ui-navy-deep: var(--color-navy);
  --ui-gold: var(--color-gold);
  --ui-gold-soft: var(--industrial-accent-border);
  --ui-surface: var(--color-surface);
  --ui-surface-soft: var(--color-page);
  --ui-text: var(--color-text);
  --ui-muted: var(--color-text-muted);
  --ui-border: var(--color-line);
  --ui-radius-sm: var(--radius-sm);
  --ui-radius-md: var(--radius-md);
  --ui-radius-lg: var(--radius-panel-standard);
  --ui-shadow-1: var(--shadow-card);
  --ui-shadow-2: var(--shadow-card-hover);
  --ui-ease: var(--transition-fast);
  /* Legacy Material theme values are centralized to keep current rendering stable. */
  --md-primary: #102a56;
  --md-on-primary: #fff;
  --md-primary-container: #e8dec9;
  --md-on-primary-container: #102a56;
  --md-secondary: #145b73;
  --md-secondary-container: #d7b66c;
  --md-on-secondary-container: #17243a;
  --md-surface: #f5f1e8;
  --md-surface-container-low: #fbf9f5;
  --md-surface-container: #e8e0d3;
  --md-surface-container-high: #d9cdbc;
  --md-on-surface: #17243a;
  --md-on-surface-variant: #536273;
  --md-outline: #796b59;
  --md-outline-variant: #c4b7a5;
  --md-radius-sm: 8px;
  --md-radius-md: 12px;
  --md-radius-lg: 16px;
  --md-radius-xl: 20px;
  --md-elevation-1:
    0 1px 2px rgba(7, 26, 46, 0.12), 0 1px 3px 1px rgba(7, 26, 46, 0.06);
  --md-elevation-2:
    0 2px 6px 2px rgba(7, 26, 46, 0.08), 0 1px 2px rgba(7, 26, 46, 0.12);
  --md-elevation-3:
    0 8px 18px 4px rgba(7, 26, 46, 0.1), 0 3px 5px rgba(7, 26, 46, 0.12);
  --bs-primary: var(--industrial-navy);
  --bs-secondary: var(--industrial-steel);
  --bs-warning: var(--industrial-yellow);
  --bs-body-color: var(--industrial-ink);
  --bs-body-bg: var(--industrial-bg);
  --bs-border-color: var(--industrial-line);
  --bs-link-color: var(--industrial-steel);
  --bs-link-hover-color: var(--industrial-navy);
  --product-card-image-height: 220px;
}
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;
  }
}