/* Shonix — Stitch design tokens + layout stability */
:root {
  --color-primary: #00668a;
  --color-primary-container: #38bdf8;
  --color-secondary: #006c4b;
  --color-secondary-container: #64f9bc;
  --color-on-secondary-container: #00714e;
  --color-tertiary: #5a5e6f;
  --color-on-surface: #0b1c30;
  --color-on-surface-variant: #3e484f;
  --color-background: #f8f9ff;
  --color-surface: #f8f9ff;
  --color-surface-container: #e5eeff;
  --color-surface-container-low: #eff4ff;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-high: #dce9ff;
  --color-surface-container-highest: #d3e4fe;
  --color-surface-variant: #d3e4fe;
  --color-outline: #6e7980;
  --color-outline-variant: #bdc8d1;
  --color-error: #ba1a1a;
  --color-on-primary: #ffffff;
  --color-on-primary-container: #004965;
  --color-inverse-primary: #7bd0ff;
  --section-spacing-y: clamp(3rem, 6vw, 8rem);
  --section-padding-x: clamp(1rem, 4vw, 3rem);
  --container-max: 96rem;
  --card-radius: 0.5rem;
  --btn-radius: 0.5rem;
  --shadow-card: 0px 48px 80px -32px rgba(11, 28, 48, 0.1);
  --shadow-nav: 0px 24px 48px -12px rgba(11, 28, 48, 0.06);
  --font-body-size: 1.0625rem;
  --line-body: 1.65;
}

img {
  max-width: 100%;
  height: auto;
}

body.stitch-theme {
  background-color: var(--color-background);
  color: var(--color-on-surface);
  font-size: var(--font-body-size);
  line-height: var(--line-body);
}

.glass-panel {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.signature-gradient {
  background: linear-gradient(135deg, #00668a 0%, #38bdf8 100%);
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

[data-animate] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
[data-animate].is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}