:root {
  --hestya-shell-max-width: 1320px;
  --hestya-shell-max-width-tablet: 1200px;
  --hestya-shell-gutter-desktop: 48px;
  --hestya-shell-gutter-tablet: 36px;
  --hestya-shell-gutter-mobile: 24px;
  --hestya-color-page-bg-start: #f5f5f7;
  --hestya-color-page-bg-end: #f7f7f9;
  --hestya-color-page-glow: rgba(255, 124, 35, 0.06);
  --hestya-color-text: #111111;
  --hestya-color-text-strong: #1f1f23;
  --hestya-color-text-muted: #5f6470;
  --hestya-color-text-soft: #424857;
  --hestya-color-text-subtle: #606673;
  --hestya-color-surface: rgba(255, 255, 255, 0.92);
  --hestya-color-surface-strong: rgba(255, 255, 255, 0.96);
  --hestya-color-surface-muted: #f6f8fb;
  --hestya-color-surface-soft: #eef1f6;
  --hestya-color-surface-alt: #f2f5f8;
  --hestya-color-border: rgba(17, 17, 17, 0.08);
  --hestya-color-border-strong: #d6dbe5;
  --hestya-color-border-contrast: #c7ced9;
  --hestya-color-accent: #ff7c23;
  --hestya-color-accent-strong: #f15a00;
  --hestya-color-accent-soft: rgba(255, 123, 35, 0.16);
  --hestya-color-accent-focus: rgba(241, 90, 0, 0.18);
  --hestya-color-dark: #111111;
  --hestya-color-success: #25d366;
  --hestya-shadow-panel: 0 24px 72px rgba(15, 23, 42, 0.08);
  --hestya-shadow-card: 0 20px 60px rgba(15, 23, 42, 0.06);
  --hestya-shadow-card-hover: 0 24px 70px rgba(15, 23, 42, 0.1);
  --hestya-shadow-button: 0 18px 36px rgba(255, 124, 35, 0.24);
  --hestya-shadow-dark-button: 0 18px 36px rgba(17, 17, 17, 0.18);
  --hestya-shadow-soft: 0 16px 32px rgba(17, 17, 17, 0.06);
}

.hestya-surface-page {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  background:
    radial-gradient(circle at top center, var(--hestya-color-page-glow) 0, rgba(255, 124, 35, 0) 28%),
    linear-gradient(180deg, var(--hestya-color-page-bg-start) 0%, var(--hestya-color-page-bg-end) 100%);
  color: var(--hestya-color-text);
}

.hestya-surface-shell {
  width: min(var(--hestya-shell-max-width), calc(100vw - var(--hestya-shell-gutter-desktop)));
  max-width: none;
  margin: 0 auto;
  float: none;
  clear: both;
  box-sizing: border-box;
}

@media (max-width: 1279px) {
  .hestya-surface-shell {
    width: min(var(--hestya-shell-max-width-tablet), calc(100vw - var(--hestya-shell-gutter-tablet)));
  }
}

@media (max-width: 767px) {
  .hestya-surface-shell {
    width: calc(100vw - var(--hestya-shell-gutter-mobile));
  }
}