:root {
  --font-display: Georgia, "Times New Roman", serif;
  --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --color-page: #fbfaf6;
  --color-surface: #ffffff;
  --color-surface-soft: #f7f5ef;
  --color-ink: #14213a;
  --color-muted: #687083;
  --color-accent: #b71446;
  --color-accent-strong: #8f0e37;
  --color-accent-soft: #fff0f4;
  --color-sky-soft: #eef8ff;
  --color-border: #e6e3dc;
  --color-border-strong: #d7d2c8;
  --color-focus: #2a65d5;
  --color-success: #2b6b50;
  --color-error: #b4233b;

  --header-height: 68px;
  --content-max-width: 1180px;
  --page-gutter: 28px;
  --mobile-page-gutter: 16px;
  --hero-min-height: 330px;
  --hero-padding-block: 54px;
  --title-start-offset: 2px;
  --page-title-size: clamp(36px, 4.2vw, 66px);
  --section-title-size: clamp(28px, 3vw, 44px);
  --page-title-weight: 500;
  --page-title-line-height: 0.98;
  --description-size: 15px;
  --description-line-height: 1.65;
  --eyebrow-size: 11px;

  --button-height: 46px;
  --button-radius: 12px;
  --card-radius: 18px;
  --card-border-width: 1px;
  --card-gap: 24px;
  --panel-gap: 18px;
  --input-panel-width: 34%;
  --result-panel-width: 66%;
  --mobile-breakpoint: 760px;

  --shadow-soft: 0 16px 42px rgba(36, 28, 25, 0.07);
  --shadow-header: 0 2px 12px rgba(41, 31, 28, 0.05);
  --wash-gradient: linear-gradient(115deg, #fff1f3 0%, #fbf5ff 48%, #edf8ff 100%);
  --action-gradient: linear-gradient(135deg, #d4275c 0%, #ac123f 48%, #75103c 100%);
  --action-gradient-hover: linear-gradient(135deg, #e03066 0%, #be1549 48%, #831345 100%);
  --action-gradient-error: linear-gradient(135deg, #d74a5f 0%, #a81730 100%);
  --action-gradient-success: linear-gradient(135deg, #3c8b69 0%, #245f48 100%);
  --action-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.38), inset 0 -1px 0 rgba(56, 5, 24, 0.25);
  --action-shadow: 0 9px 18px rgba(123, 12, 55, 0.22), 0 2px 4px rgba(70, 6, 32, 0.2);
  --action-shadow-hover: 0 14px 25px rgba(123, 12, 55, 0.29), 0 4px 7px rgba(70, 6, 32, 0.2);
  --action-shadow-active: 0 4px 9px rgba(94, 9, 42, 0.24), inset 0 2px 4px rgba(69, 5, 30, 0.2);
  --card-hover-border: #d7a6b5;
  --card-hover-background: #fffdfd;
  --card-shadow-hover: 0 17px 38px rgba(60, 35, 43, 0.12);
  --motion-fast: 150ms;
  --motion-standard: 220ms;
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
}