/* AdSalad selected visual identity — reusable starting tokens and components. */
:root {
  --as-night: #06080d;
  --as-night-soft: #0b0e14;
  --as-card: #0c1018;
  --as-card-raised: #10141e;
  --as-porcelain: #f4f6f4;
  --as-product-canvas: #f6f8fa;
  --as-ink: #171b22;
  --as-white: #f7f8f7;
  --as-text-dark-muted: #aeb5c0;
  --as-text-light-muted: #67717c;
  --as-border-dark: #293241;
  --as-border-light: #e0e4e8;
  --as-electric: #5b93ff;
  --as-violet: #a67af3;
  --as-lime: #a9e600;
  --as-warm: #ff987d;
  --as-lime-soft: #eff8d9;
  --as-electric-soft: #eff4fa;
  --as-warm-soft: #fff1eb;

  --as-font: "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --as-display-size: clamp(2.75rem, 5.3vw, 5rem);
  --as-heading-size: clamp(2.25rem, 3.5vw, 3.25rem);
  --as-body-size: 1rem;
  --as-display-tracking: -0.065em;
  --as-heading-tracking: -0.05em;
  --as-wordmark-tracking: -0.07em;

  --as-radius-chip: 4px;
  --as-radius-button: 7px;
  --as-radius-panel: 9px;
  --as-radius-card: 13px;
  --as-radius-product: 18px;
  --as-radius-section: 24px;
  --as-gutter: clamp(20px, 5.84vw, 84px);
  --as-content-max: 1272px;

  --as-glow-product: 0 0 58px rgb(60 114 238 / 24%);
  --as-glow-blue: 0 0 34px rgb(75 158 255 / 61%);
  --as-glow-violet: 0 0 39px rgb(177 107 231 / 63%);
  --as-glow-lime: 0 0 38px rgb(169 230 0 / 69%);
  --as-shadow-card: 0 18px 36px rgb(0 0 0 / 28%);
}

.as-dark-section { background: var(--as-night); color: var(--as-white); }
.as-light-section { background: var(--as-porcelain); color: var(--as-ink); }
.as-container { width: min(calc(100% - 2 * var(--as-gutter)), var(--as-content-max)); margin-inline: auto; }
.as-wordmark { font-family: var(--as-font); font-weight: 800; letter-spacing: var(--as-wordmark-tracking); line-height: 1; }
.as-display { font-family: var(--as-font); font-size: var(--as-display-size); font-weight: 700; line-height: 1.04; letter-spacing: var(--as-display-tracking); }
.as-heading { font-family: var(--as-font); font-size: var(--as-heading-size); font-weight: 700; line-height: 1.08; letter-spacing: var(--as-heading-tracking); }
.as-body { font-family: var(--as-font); font-size: var(--as-body-size); line-height: 1.55; }
.as-eyebrow { font: 800 0.7rem/1.4 var(--as-font); letter-spacing: 0.16em; text-transform: uppercase; }
.as-button { display: inline-flex; align-items: center; justify-content: center; gap: 1.5rem; min-height: 44px; padding: 0.8rem 1.15rem; border-radius: var(--as-radius-button); font: 800 0.875rem/1 var(--as-font); text-decoration: none; cursor: pointer; }
.as-button--primary { background: var(--as-lime); color: var(--as-night); border: 1px solid var(--as-lime); }
.as-button--secondary { background: transparent; color: var(--as-white); border: 1px solid #424c5c; }
.as-button:focus-visible { outline: 3px solid var(--as-electric); outline-offset: 3px; }
.as-chip { display: inline-flex; align-items: center; padding: 0.35rem 0.55rem; border-radius: var(--as-radius-chip); background: var(--as-lime-soft); color: #283b0b; font: 800 0.75rem/1.2 var(--as-font); }
.as-card { background: var(--as-card); color: var(--as-white); border: 1px solid var(--as-border-dark); border-radius: var(--as-radius-card); box-shadow: var(--as-shadow-card); }
.as-product-frame { background: var(--as-night-soft); border: 1px solid #3b465c; border-radius: var(--as-radius-product); box-shadow: var(--as-glow-product), 0 42px 80px rgb(0 0 0 / 42%); overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .as-button, .as-card, .as-product-frame { animation: none !important; transition: none !important; }
}