/* Visual skin. Layout and motion mechanics live in styles.css.
   CollectUI is the reference for each block below.

   nav       Kopp — minimal dark bar, light links, one white pill
   hero      Notemap — headline, primary + ghost, “Free, Pro $8/month”
             Lumo — that copy sits left, the product render sits right
   buttons   Thumbs glow (opacity) and a small press scale. No width stretch.
   cta       AutoMagic — one gradient card, one white button, above the footer
   pricing   All-Access — dark Pro offer; Free is the lighter companion
   statement Serif quote, centered. A product sentence, not a testimonial.
   footer    Ascend — dark field and a large ghost wordmark
*/

:root {
  --btn-radius: 999px;
  --btn-pad-y: 0.7rem;
  --btn-pad-x: 1.2rem;
  --btn-size: 0.98rem;
  --btn-weight: 600;
  --btn-tracking: -0.015em;
  --btn-press: 0.97;
  --btn-hover-lift: -1px;
  --btn-hover-scale: 1.02;
  --btn-press-duration: 140ms;
  --btn-primary-bg: #f4f1ea;
  --btn-primary-ink: #1c1915;
  --btn-primary-hover: #ffffff;
  --btn-glow: rgba(255, 255, 255, 0.55);
  --btn-ghost-bg: transparent;
  --btn-ghost-ink: #f3f0e8;
  --btn-ghost-border: #c9c2b6;
  --btn-ghost-hover: rgba(255, 255, 255, 0.08);
}

[data-skin="nav"] {
  --nav-bg: #141311;
  --nav-blur: 0px;
  --nav-ink: #f3f0e8;
  --nav-hover: rgba(255, 255, 255, 0.08);
  --nav-line: rgba(255, 255, 255, 0.08);
  --nav-radius: 999px;
  --nav-size: 0.95rem;
  --nav-weight: 550;
  --nav-mark-outline: 1px solid rgba(243, 240, 232, 0.45);
}

[data-skin="hero"] {
  --hero-bg: #12110e;
  --hero-ink: #f4f1ea;
  --hero-headline: #f7f4ee;
  --hero-headline-soft: #c4beb4;
  --hero-headline-size: clamp(2.7rem, 5.4vw, 4.6rem);
  --hero-headline-weight: 500;
  --hero-headline-tracking: -0.042em;
  --hero-headline-leading: 0.98;
  --hero-lede: #e6e1d6;
  --hero-lede-size: 1.125rem;
  --hero-muted: #c4beb4;
  --hero-kicker: #c4beb4;
  --hero-offer: #f4f1ea;
  --hero-field: radial-gradient(70% 80% at 85% 10%, rgba(14, 107, 84, 0.35), transparent 58%);
  --hero-frame-bg: #e7e4de;
  --hero-frame-radius: 24px;
  --hero-pill-border: rgba(244, 241, 234, 0.35);
  --hero-pill-ink: #f4f1ea;
}

[data-skin="cta"] {
  --cta-align: center;
  --cta-pad-top: 1.5rem;
  --cta-pad-bottom: 0;
  --cta-headline-measure: 14em;
  --cta-ink: #f7f4ee;
  --cta-muted: #d2cdc2;
  --cta-offer: #f4f1ea;
  --cta-card-bg:
    radial-gradient(90% 80% at 50% 120%, rgba(61, 190, 139, 0.22), transparent 58%),
    linear-gradient(180deg, #1c2824 0%, #121615 100%);
  --cta-card-radius: 28px;
}

[data-skin="pricing"] {
  --price-card-bg: transparent;
  --price-card-border: var(--line);
  --price-card-radius: 24px;
  --price-card-pad: 1.35rem 1.3rem 1.4rem;
  --price-flag: var(--muted);
  --price-amount-size: 2.6rem;
  --price-amount-tracking: -0.045em;
  --price-note: var(--muted);
  --price-pro-bg: #171614;
  --price-pro-ink: #f4f1ea;
  --price-pro-muted: #c4beb4;
  --price-pro-size: clamp(3.6rem, 6vw, 5rem);
}

[data-skin="statement"] {
  --statement-font: Georgia, "Iowan Old Style", Palatino, "Palatino Linotype", serif;
  --statement-color: #3a3631;
  --statement-strong: #1c1915;
  --statement-size: clamp(1.7rem, 3vw, 2.5rem);
  --statement-weight: 500;
  --statement-strong-weight: 650;
  --statement-tracking: -0.03em;
  --statement-leading: 1.25;
  --statement-measure: 18em;
}

[data-skin="footer"] {
  --footer-bg: #10100e;
  --footer-ink: #f3f0e8;
  --footer-muted: #c4beb4;
  --footer-radius: 28px 28px 0 0;
  --footer-word: rgba(255, 255, 255, 0.07);
  --footer-word-size: clamp(7.5rem, 27vw, 18rem);
  --footer-word-tracking: -0.06em;
  --footer-focus: #f3f0e8;
  --footer-mark-outline: 1px solid rgba(243, 240, 232, 0.4);
}

@media (prefers-color-scheme: dark) {
  [data-skin="statement"] {
    --statement-color: #c4beb4;
    --statement-strong: #f4f1ea;
  }

  [data-skin="pricing"] {
    --price-pro-bg: #0c0c0b;
  }

  [data-skin="footer"] {
    --footer-bg: #0a0a09;
    --footer-word: rgba(255, 255, 255, 0.05);
  }
}

@media (prefers-reduced-transparency: reduce) {
  [data-skin="nav"] {
    --nav-bg: #141311;
    --nav-blur: 0px;
  }

  [data-skin="cta"] {
    --cta-card-bg: #171614;
  }
}