/* REKAINOS TOKENS (Figma v1.0) */
:root {
  /* Brand */
  --color-brand-primary: #a4cf5b;
  --color-brand-primary-hover: #8fbc43;
  --color-brand-accent: #d4b254;
  --color-brand-ember: #e06c3c;
  --color-brand-ember-dark: #c5562b;
  --color-brand-ember-soft: rgba(224, 108, 60, 0.18);

  /* Ink & Neutrals */
  --color-ink-900: #0f172a;
  --color-ink-800: #1e293b;
  --color-ink-950: #020617;
  --color-neutral-background-light: #f8faf3;
  --color-neutral-surface-light: #ffffff;

  /* Elevation & Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --shadow-sm: 0 4px 12px rgba(2, 6, 23, 0.08);
  --shadow-md: 0 10px 30px rgba(2, 6, 23, 0.08);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.45);

  /* Typography */
  --font-family-base: "Inter", system-ui;
  --font-weight-regular: 400;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* Semantic: Actions */
  --color-action-primary: var(--color-brand-primary);
  --color-action-primary-hover: var(--color-brand-primary-hover);
  --color-action-secondary: rgba(164, 207, 91, 0.1);
  --color-action-destructive: var(--color-brand-ember);

  /* Semantic: Feedback */
  --color-feedback-success: var(--color-brand-primary);
  --color-feedback-warning: var(--color-brand-ember);
  --color-feedback-highlight: var(--color-brand-accent);

  /* Component: Buttons */
  --button-primary-bg: var(--color-action-primary);
  --button-primary-text: var(--color-ink-950);
  --button-secondary-bg: var(--color-action-secondary);
  --button-destructive-bg: var(--color-action-destructive);

  /* Component: Alerts */
  --alert-error-bg: var(--color-brand-ember-soft);
  --alert-error-text: var(--color-brand-ember);
  --alert-error-border: rgba(224, 108, 60, 0.45);

  /* Component: Inputs */
  --input-bg: var(--color-neutral-surface-light);
  --input-text: var(--color-ink-900);
  --input-placeholder: color-mix(
    in oklab,
    var(--color-ink-800) 55%,
    transparent
  );
  --input-border: var(--color-border-default);
  --input-focus-ring: color-mix(
    in oklab,
    var(--color-feedback-highlight) 40%,
    transparent
  );

  /* Misc semantic tokens */
  --color-overlay-backdrop: rgba(2, 6, 23, 0.6);
}

/* Theme mapping defaults (prefers-color-scheme) */
:root {
  --color-bg-default: var(--color-neutral-background-light);
  --color-surface-default: var(--color-neutral-surface-light);
  --color-text-primary: var(--color-ink-900);
  --color-text-secondary: var(--color-ink-800);
  --color-border-default: #e6ead9;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-default: var(--color-ink-950);
    --color-surface-default: #0b1220;
    --color-text-primary: #e7eef8;
    --color-text-secondary: #c9d7ea;
    --color-border-default: rgba(248, 250, 243, 0.1);
    --input-bg: color-mix(
      in oklab,
      var(--color-surface-default) 88%,
      white
    );
    --input-text: var(--color-text-primary);
    --input-placeholder: color-mix(
      in oklab,
      var(--color-text-secondary) 70%,
      transparent
    );
    --input-border: color-mix(
      in oklab,
      var(--color-border-default) 65%,
      transparent
    );
    --input-focus-ring: color-mix(
      in oklab,
      var(--color-feedback-highlight) 55%,
      transparent
    );
  }
}

html[data-theme="light"] {
  --color-bg-default: var(--color-neutral-background-light);
  --color-surface-default: var(--color-neutral-surface-light);
  --color-text-primary: var(--color-ink-900);
  --color-text-secondary: var(--color-ink-800);
  --color-border-default: #e6ead9;
  --input-bg: var(--color-neutral-surface-light);
  --input-text: var(--color-ink-900);
  --input-placeholder: color-mix(
    in oklab,
    var(--color-ink-800) 55%,
    transparent
  );
  --input-border: var(--color-border-default);
  --input-focus-ring: color-mix(
    in oklab,
    var(--color-feedback-highlight) 40%,
    transparent
  );
}

html[data-theme="dark"] {
  --color-bg-default: var(--color-ink-950);
  --color-surface-default: #0b1220;
  --color-text-primary: #e7eef8;
  --color-text-secondary: #c9d7ea;
  --color-border-default: rgba(248, 250, 243, 0.1);
  --input-bg: color-mix(
    in oklab,
    var(--color-surface-default) 88%,
    white
  );
  --input-text: var(--color-text-primary);
  --input-placeholder: color-mix(
    in oklab,
    var(--color-text-secondary) 70%,
    transparent
  );
  --input-border: color-mix(
    in oklab,
    var(--color-border-default) 65%,
    transparent
  );
  --input-focus-ring: color-mix(
    in oklab,
    var(--color-feedback-highlight) 55%,
    transparent
  );
}

body {
  background: var(--color-bg-default);
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
}

*:focus-visible {
  outline: 2px solid var(--color-feedback-highlight);
  outline-offset: 2px;
}

.btn {
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
  border-radius: var(--radius-sm);
}

.btn:hover,
.btn:focus-visible {
  background: var(--color-action-primary-hover);
}

.btn--outline {
  background: var(--button-secondary-bg);
  color: var(--color-text-primary);
  border-color: var(--color-border-default);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  background: var(--color-action-primary-hover);
  color: var(--button-primary-text);
}

.cta-form input,
.cta-form select,
.cta-form textarea {
  background: var(--input-bg);
  color: var(--input-text);
  border: 1px solid var(--input-border);
}

.cta-form input::placeholder,
.cta-form textarea::placeholder {
  color: var(--input-placeholder);
}

.cta-form input:focus,
.cta-form select:focus,
.cta-form textarea:focus {
  outline: none;
  border-color: var(--color-feedback-highlight);
  box-shadow: 0 0 0 0.3rem var(--input-focus-ring);
}

.cta *:focus {
  outline: none;
  box-shadow: 0 0 0 0.3rem var(--input-focus-ring);
}

.waitlist-modal {
  position: fixed;
  inset: 0;
  background: var(--color-overlay-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 1000;
  padding: 2.4rem;
}

.waitlist-modal.is-open,
.waitlist-modal:target {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.waitlist-modal__dialog {
  background: var(--color-surface-default);
  border-radius: var(--radius-md);
  max-width: 52rem;
  width: 100%;
  padding: 3.2rem;
  position: relative;
  box-shadow: var(--shadow-md);
  color: var(--color-text-primary);
}

.waitlist-modal__close {
  position: absolute;
  top: 1.6rem;
  right: 1.6rem;
  font-size: 3rem;
  text-decoration: none;
  color: var(--color-text-secondary);
  line-height: 1;
}

.waitlist-modal__close:hover,
.waitlist-modal__close:focus {
  color: var(--color-feedback-highlight);
}

.waitlist-modal__subtitle {
  font-size: 1.6rem;
  line-height: 1.6;
  margin-bottom: 2.4rem;
  color: var(--color-text-secondary);
}

.waitlist-form {
  grid-template-columns: 1fr;
}

.waitlist-modal__submit[aria-busy="true"] {
  opacity: 0.7;
  cursor: progress;
  color: var(--button-primary-text);
}

.waitlist-modal__message {
  margin-top: 1.6rem;
  font-size: 1.6rem;
}

.waitlist-modal__message.is-success {
  color: var(--color-feedback-success);
}

.waitlist-modal__message.is-error {
  color: var(--alert-error-text);
}

.waitlist-modal-open {
  overflow: hidden;
}

.footer-tagline {
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: 1.2rem;
}

.footer-description {
  font-size: 1.6rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
}

@media (max-width: 34em) {
  .waitlist-modal__dialog {
    padding: 2.4rem;
  }
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .header,
  html:not([data-theme]) .section-hero,
  html:not([data-theme]) .section-testimonials,
  html:not([data-theme]) .pricing-plan--complete,
  html:not([data-theme]) .footer {
    background-color: var(--color-surface-default);
  }

  html:not([data-theme]) .sticky .header {
    background-color: var(--color-surface-default);
    box-shadow: var(--shadow-sm);
  }

  html:not([data-theme]) .pricing-plan--starter {
    border-color: var(--color-border-default);
  }

  html:not([data-theme]) .feature-icon {
    background-color: var(--color-surface-default);
  }

  html:not([data-theme]) .main-nav-link:link,
  html:not([data-theme]) .main-nav-link:visited,
  html:not([data-theme]) .icon-mobile-nav,
  html:not([data-theme]) .heading-primary,
  html:not([data-theme]) .heading-secondary,
  html:not([data-theme]) .heading-tertiary,
  html:not([data-theme]) .meal-title,
  html:not([data-theme]) .feature-title,
  html:not([data-theme]) .plan-price,
  html:not([data-theme]) .footer-heading {
    color: var(--color-text-primary);
  }

  html:not([data-theme]) .heading-featured-in,
  html:not([data-theme]) .plan-text,
  html:not([data-theme]) .testimonial-name,
  html:not([data-theme]) .footer-link:link,
  html:not([data-theme]) .footer-link:visited,
  html:not([data-theme]) .copyright {
    color: var(--color-text-secondary);
  }

  html:not([data-theme]) .cta-text-box {
    color: var(--color-text-primary);
  }
}

html[data-theme="dark"] .header,
html[data-theme="dark"] .section-hero,
html[data-theme="dark"] .section-testimonials,
html[data-theme="dark"] .pricing-plan--complete,
html[data-theme="dark"] .footer {
  background-color: var(--color-surface-default);
}

html[data-theme="dark"] .sticky .header {
  background-color: var(--color-surface-default);
  box-shadow: var(--shadow-sm);
}

html[data-theme="dark"] .pricing-plan--starter {
  border-color: var(--color-border-default);
}

html[data-theme="dark"] .feature-icon {
  background-color: var(--color-surface-default);
}

html[data-theme="dark"] .main-nav-link:link,
html[data-theme="dark"] .main-nav-link:visited,
html[data-theme="dark"] .icon-mobile-nav,
html[data-theme="dark"] .heading-primary,
html[data-theme="dark"] .heading-secondary,
html[data-theme="dark"] .heading-tertiary,
html[data-theme="dark"] .meal-title,
html[data-theme="dark"] .feature-title,
html[data-theme="dark"] .plan-price,
html[data-theme="dark"] .footer-heading {
  color: var(--color-text-primary);
}

html[data-theme="dark"] .heading-featured-in,
html[data-theme="dark"] .plan-text,
html[data-theme="dark"] .testimonial-name,
html[data-theme="dark"] .footer-link:link,
html[data-theme="dark"] .footer-link:visited,
html[data-theme="dark"] .copyright {
  color: var(--color-text-secondary);
}

html[data-theme="dark"] .cta-text-box {
  color: var(--color-text-primary);
}

/* Mockup accents */
.mock-accent--zigzag {
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.mock-accent--zigzag::before {
  content: "";
  position: absolute;
  inset: -20% -30%;
  background: url("../../img/zigzag-wave.svg") no-repeat center;
  background-size: cover;
  opacity: 0.08;
  transform: translate(12%, -6%) rotate(-8deg) scale(1.15);
  z-index: -1;
  pointer-events: none;
}

.mock-accent--zigzag::after {
  content: none;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .mock-accent--zigzag::before {
    opacity: 0.13;
  }
}

html[data-theme="dark"] .mock-accent--zigzag::before {
  opacity: 0.13;
}