/* Stage 8A: architecture v4 baseline. Keep semantic values centralized. */
:root {
  color-scheme: light;
  --color-primary: #dc151b;
  --color-primary-hover: #b90e14;
  --color-primary-soft: #fff0f1;
  --color-background: #f2f3f4;
  --color-surface: #ffffff;
  --color-surface-secondary: #eeeeee;
  --color-text-primary: #17191c;
  --color-text-secondary: #62666b;
  --color-border: #d8dade;
  --color-success: #237a4b;
  --color-warning: #9a6700;
  --color-error: #b42318;
  --color-primary-active: #8f0b10;
  --color-primary-faint: rgb(220 21 27 / 0.06);
  --color-primary-line: rgb(220 21 27 / 0.2);
  --color-on-primary: var(--color-surface);
  --color-canvas: #f8f8f7;
  --color-surface-soft: #fbfbfa;
  --color-surface-muted: #eff0f1;
  --color-border-soft: #e5e6e8;
  --color-border-strong: #b9bdc2;
  --color-charcoal: #141619;
  --color-charcoal-soft: #25282d;
  --color-gold: #ba8618;
  --color-gold-soft: #fff8e6;
  --color-neutral-0: #ffffff;
  --color-neutral-50: #fbfbfa;
  --color-neutral-100: #f2f3f4;
  --color-neutral-200: #e5e6e8;
  --color-neutral-400: #b9bdc2;
  --color-neutral-600: #62666b;
  --color-neutral-900: #17191c;
  --color-control-border: #858585;
  --color-disabled-text: var(--color-text-secondary);
  --color-disabled-surface: var(--color-surface-secondary);
  --color-focus: var(--color-primary);
  --color-success-soft: #edf7f1;
  --color-warning-soft: #fff7e6;
  --color-error-soft: #fff0ee;
  --color-overlay: rgb(40 40 40 / 0.4);

  /* Semantic surface and border roles shared by Public and Customer UI. */
  --surface-page: var(--color-background);
  --surface-section: var(--color-surface);
  --surface-section-soft: var(--color-surface-soft);
  --surface-panel: rgb(255 255 255 / 0.9);
  --surface-panel-strong: rgb(255 255 255 / 0.96);
  --surface-panel-dark: rgb(20 22 25 / 0.86);
  --surface-control: rgb(255 255 255 / 0.94);
  --border-subtle: rgb(216 218 222 / 0.72);
  --border-panel: rgb(255 255 255 / 0.86);
  --border-accent: var(--color-primary-line);
  --accent-glow: 0 14px 34px rgb(220 21 27 / 0.16);
  --accent-glow-soft: 0 22px 58px rgb(220 21 27 / 0.09);

  /* Background recipes: restrained technical geometry derived from the mark. */
  --pattern-industrial-lines: repeating-linear-gradient(125deg, transparent 0 5.5rem, rgb(23 25 28 / 0.018) 5.5rem 5.56rem);
  --pattern-technical-grid: linear-gradient(to right, transparent calc(100% - 1px), rgb(23 25 28 / 0.035) 0), linear-gradient(to bottom, transparent calc(100% - 1px), rgb(23 25 28 / 0.035) 0);
  --gradient-brand-glow: radial-gradient(circle at 88% 8%, rgb(220 21 27 / 0.08), transparent 24rem);
  --gradient-section: linear-gradient(150deg, var(--surface-section-soft), var(--surface-page) 56%, var(--color-canvas));
  --gradient-panel: linear-gradient(145deg, var(--surface-panel-strong), var(--surface-panel));
  --gradient-panel-dark: linear-gradient(145deg, var(--color-charcoal), var(--color-charcoal-soft));

  --font-fa: "Vazirmatn", "IRANSansX", Tahoma, Arial, sans-serif;
  --font-en: "Segoe UI", Arial, sans-serif;
  --font-mono: Consolas, "Courier New", monospace;
  --font-body: var(--font-en);
  --text-caption: 0.75rem;
  --text-small: 0.875rem;
  --text-body: 1rem;
  --text-lead: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);
  --text-h3: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --text-h2: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --text-h1: clamp(2.15rem, 1.45rem + 2.4vw, 4rem);
  --weight-regular: 400;
  --weight-medium: 600;
  --weight-bold: 700;
  --leading-body: 1.75;
  --leading-heading: 1.4;
  --leading-control: 1.5;
  --tracking-label: 0.04em;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --radius-sm: 0.55rem;
  --radius-md: 0.9rem;
  --radius-lg: 1.25rem;
  --radius-control: var(--radius-sm);
  --radius-panel: var(--radius-lg);
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgb(40 40 40 / 0.06);
  --shadow-card: 0 18px 50px rgb(20 22 25 / 0.09);
  --shadow-elevation-0: 0 1px 0 rgb(40 40 40 / 0.04);
  --shadow-elevation-1: 0 1px 2px rgb(20 22 25 / 0.04), 0 14px 38px rgb(20 22 25 / 0.07);
  --shadow-elevation-2: 0 8px 20px rgb(20 22 25 / 0.07), 0 30px 70px rgb(20 22 25 / 0.12);
  --shadow-floating: 0 16px 45px rgb(20 22 25 / 0.12);
  --shadow-panel: var(--shadow-elevation-1);
  --shadow-panel-raised: var(--shadow-elevation-2);

  --container-reading: 45rem;
  --container-content: 75rem;
  --container-wide: 90rem;
  /* CSS custom properties cannot be used in native media-query conditions.
     Matching literal rem thresholds are documented in components/showcase.css. */
  --breakpoint-sm: 40rem;
  --breakpoint-md: 48rem;
  --breakpoint-lg: 64rem;
  --breakpoint-xl: 80rem;
  --motion-fast: 140ms;
  --motion-normal: 220ms;
  --motion-slow: 620ms;
  --motion-stagger: 80ms;
  --transition-fast: var(--motion-fast);
  --transition-normal: var(--motion-normal);
  --duration-spin: 800ms;
  --duration-pulse: 1200ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-press: 1px;
  --motion-lift-button: -2px;
  --motion-lift-card: -4px;
  --motion-lift-feature: -6px;
  --motion-reveal-distance: 24px;
  --opacity-disabled: 0.65;
  --border-width: 1px;
  --focus-width: 3px;
  --focus-offset: 3px;
  --control-height: 2.75rem;
  --control-height-lg: 3rem;
  --panel-padding: var(--space-6);
  --icon-size: 1.25rem;
  --header-height: 5.25rem;
  --drawer-width: 22rem;
  --textarea-height: 8rem;
  --media-ratio: 4 / 3;
  --z-header: 10;
  --z-skip: 20;
  --page-gutter: var(--space-4);
  --section-gap: var(--space-12);
}
:root:lang(fa), [lang="fa"] { --font-body: var(--font-fa); }
:root:lang(en), [lang="en"] { --font-body: var(--font-en); }
@media (min-width: 40rem) {
  :root { --page-gutter: var(--space-6); }
}
@media (min-width: 64rem) {
  :root { --page-gutter: var(--space-8); --section-gap: var(--space-16); --panel-padding: var(--space-8); }
}