:root {
  --ease: cubic-bezier(.23, 1, .32, 1)
}

body {
  --paper: #f5f3ef;
  --ink: #191a1a;
  --line: rgba(25, 26, 26, .16);
  --wine: #672f35;
  --surface: #fffdfa;
  --surface-muted: #e7dfd2;
  --copy: rgba(25, 26, 26, .64);
  --shadow: 0 18px 42px rgba(21, 20, 18, .1);
  --heading: 'Playfair Display', serif;
  --subheading: Manrope, sans-serif;
  background: var(--paper);
  color: var(--ink);
  transition: background .28s var(--ease), color .28s var(--ease)
}

body[data-theme=dark] {
  --paper: #111513;
  --ink: #f2eee5;
  --line: rgba(242, 238, 229, .17);
  --wine: #d2b477;
  --surface: #1a201d;
  --surface-muted: #26302b;
  --copy: rgba(242, 238, 229, .64);
  --shadow: 0 18px 46px rgba(0, 0, 0, .36)
}

body[data-theme=photographic] {
  --paper: #e8dfd0;
  --ink: #1d201c;
  --line: rgba(29, 32, 28, .19);
  --wine: #884433;
  --surface: #f7f1e7;
  --surface-muted: #d8c8b4;
  --copy: rgba(29, 32, 28, .63);
  --shadow: 0 18px 42px rgba(71, 50, 28, .13)
}

body[data-theme=classic] {
  --paper: #f7f3eb;
  --ink: #272114;
  --line: rgba(39, 33, 20, .17);
  --wine: #294661;
  --surface: #fffdf8;
  --surface-muted: #ece0c9;
  --copy: rgba(39, 33, 20, .62);
  --shadow: 0 18px 42px rgba(66, 48, 21, .1)
}

body[data-theme=future] {
  --paper: #08101b;
  --ink: #e9f6ff;
  --line: rgba(141, 219, 255, .22);
  --wine: #4ee9bd;
  --surface: #101d2c;
  --surface-muted: #172a3d;
  --copy: rgba(233, 246, 255, .65);
  --shadow: 0 18px 48px rgba(0, 0, 0, .4)
}

body[data-heading-font=editorial] {
  --heading: 'Playfair Display', serif
}

body[data-heading-font=modern] {
  --heading: Manrope, sans-serif
}

body[data-heading-font=classic] {
  --heading: 'Libre Baskerville', serif
}

body[data-heading-font=geometric] {
  --heading: 'Space Grotesk', sans-serif
}

body[data-subheading-font=editorial] {
  --subheading: 'Playfair Display', serif
}

body[data-subheading-font=modern] {
  --subheading: Manrope, sans-serif
}

body[data-subheading-font=classic] {
  --subheading: 'Libre Baskerville', serif
}

body[data-subheading-font=geometric] {
  --subheading: 'Space Grotesk', sans-serif
}

body h1,
body h2,
body h3 {
  font-family: var(--heading)
}

body p {
  color: var(--copy)
}

body .site-header {
  background: color-mix(in srgb, var(--paper) 91%, transparent);
  border-color: var(--line)
}

body .camera-mark {
  background: var(--ink);
  color: var(--paper)
}

body .brand em {
  font-family: var(--heading)
}

body .header-actions button {
  color: var(--ink)
}

body .cabinet-button,
.button,
.cta {
  border-radius: 999px;
  transition: transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease)
}

body .cabinet-button,
.button-primary,
.cta.primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink)
}

body .button-secondary,
.button-ghost,
.cta.outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--line)
}

body .button-primary:hover,
.cta.primary:hover,
body .cabinet-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--wine) 24%, transparent)
}

body .button-secondary:hover,
.button-ghost:hover,
.cta.outline:hover {
  background: var(--surface-muted);
  border-color: var(--wine)
}

body .button:active,
.cta:active {
  transform: scale(.97)
}

body .photo-frame,
body .auth-card,
body .admin-grid section,
body .contact-card,
body .order-history {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--shadow)
}

body .manifesto,
body .review-panel {
  background: var(--surface-muted)
}

body .auth-wrap {
  padding: 56px 24px;
  background: radial-gradient(circle at 15% 5%, color-mix(in srgb, var(--wine) 15%, transparent), transparent 28%)
}

body .auth-card {
  width: min(1180px, 100%);
  padding: 0;
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  overflow: hidden;
  border-radius: 28px
}

body .auth-intro {
  padding: clamp(32px, 5vw, 64px);
  background: linear-gradient(150deg, var(--surface-muted), var(--paper));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 570px
}

body .auth-intro h1 {
  font-size: clamp(48px, 5.8vw, 78px);
  margin: 18px 0
}

body .auth-intro i {
  color: var(--wine)
}

body .auth-intro p {
  max-width: 380px
}

body .auth-steps {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font: 10px var(--mono);
  color: var(--copy)
}

body .auth-forms {
  padding: clamp(25px, 4vw, 58px)
}

body .auth-columns {
  gap: 15px
}

body .form-card {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface)
}

body .form-card-subtle {
  background: color-mix(in srgb, var(--surface-muted) 48%, var(--surface))
}

body .form-card h2 {
  font-size: 34px;
  margin: 3px 0 5px
}

body .form-kicker {
  font: 600 10px var(--mono);
  letter-spacing: .13em;
  color: var(--wine)
}

body .form-card label,
body .theme-form label,
body .cabinet-filters label {
  font: 600 10px var(--mono);
  letter-spacing: .06em;
  color: var(--copy)
}

body .form-card input,
body .resend-form input,
body .theme-form select,
body .cabinet-filters select {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
  border-radius: 11px;
  padding: 12px
}

body input:focus,
body select:focus,
body textarea:focus {
  outline: 0;
  border-color: var(--wine);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wine) 16%, transparent)
}

body .resend-form {
  grid-template-columns: 1.2fr 1fr auto;
  align-items: end;
  gap: 10px;
  margin-top: 16px;
  padding: 15px;
  border: 1px dashed var(--line);
  border-radius: 14px
}

body .resend-form small {
  display: block;
  color: var(--copy);
  font-size: 12px
}

body .notice {
  border: 1px solid var(--line);
  background: var(--surface-muted);
  color: var(--ink)
}

body .profile-panel,
body .theme-panel {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--shadow)
}

body .theme-panel {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: 20px;
  margin-top: 18px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(130deg, var(--surface), color-mix(in srgb, var(--surface-muted) 55%, var(--surface)))
}

body .theme-panel h2 {
  font-size: 34px;
  margin: 4px 0
}

body .theme-form {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  align-items: end
}

body .theme-form .button {
  grid-column: 1/-1
}

body .toolbar,
body .client-session header p {
  color: var(--copy);
  border-color: var(--line)
}

body .rating button {
  color: var(--line)
}

body .rating button.is-rated,
body .rating button:hover {
  color: var(--wine)
}

body .admin-layout aside {
  background: var(--surface-muted);
  border-color: var(--line)
}

body .theme-admin {
  background: linear-gradient(130deg, var(--surface), color-mix(in srgb, var(--surface-muted) 54%, var(--surface))) !important
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0)
}

@media(max-width:820px) {

  body .auth-card,
  body .theme-panel {
    grid-template-columns: 1fr
  }

  body .auth-intro {
    min-height: 0
  }

  body .theme-form {
    grid-template-columns: 1fr
  }

  body .theme-form .button {
    grid-column: auto
  }
}

@media(max-width:620px) {
  body .auth-wrap {
    padding: 24px 14px
  }

  body .auth-forms,
  body .auth-intro {
    padding: 28px 22px
  }

  body .resend-form {
    grid-template-columns: 1fr;
    align-items: stretch
  }

  body .auth-columns {
    grid-template-columns: 1fr
  }
}