/* ==========================================================================
   Calorita Design System
   Single source of truth — layout, typography, color, motion, components.
   ========================================================================== */

* { box-sizing: border-box; }

:root {
  /* —— Layout —— */
  --ds-container-max: 1200px;
  --ds-container-gutter: 92vw;
  --ds-scroll-padding: 88px;
  --ds-content-narrow: 580px;
  --ds-content-medium: 720px;

  /* —— Spacing scale (4px base) —— */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;
  --ds-space-10: 40px;
  --ds-space-12: 48px;
  --ds-space-16: 64px;
  --ds-space-20: 80px;

  /* —— Section vertical rhythm —— */
  --ds-section-y: 90px;
  --ds-section-y-lg: clamp(88px, 12vw, 128px);
  --ds-section-y-md: clamp(80px, 11vw, 120px);
  --ds-section-y-sm: clamp(56px, 8vw, 88px);
  --ds-section-y-mobile: 40px;

  /* —— Border radius —— */
  --ds-radius-sm: 8px;
  --ds-radius-md: 12px;
  --ds-radius-lg: 14px;
  --ds-radius-xl: 18px;
  --ds-radius-2xl: 22px;
  --ds-radius-3xl: 24px;
  --ds-radius-device: 28px;
  --ds-radius-frame: 32px;
  --ds-radius-pill: 999px;
  --ds-radius-logo: 10px;

  /* —— Shadows —— */
  --ds-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.2);
  --ds-shadow-md: 0 12px 36px rgba(0, 0, 0, 0.32);
  --ds-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.28);
  --ds-shadow-card: 0 16px 40px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
  --ds-shadow-card-hover: 0 20px 48px rgba(0, 0, 0, 0.34), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
  --ds-shadow-screenshot: 0 28px 56px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --ds-shadow-screenshot-hover: 0 36px 64px rgba(0, 0, 0, 0.5), 0 0 40px rgba(123, 97, 255, 0.12);

  /* —— Motion —— */
  --ds-duration-fast: 0.2s;
  --ds-duration: 0.25s;
  --ds-duration-slow: 0.35s;
  --ds-duration-reveal: 0.8s;
  --ds-ease: ease;
  --ds-transition: var(--ds-duration) var(--ds-ease);
  --ds-transition-hover: transform var(--ds-duration-slow) var(--ds-ease),
    box-shadow var(--ds-duration-slow) var(--ds-ease),
    border-color var(--ds-duration-slow) var(--ds-ease),
    background var(--ds-duration-slow) var(--ds-ease),
    opacity var(--ds-duration) var(--ds-ease);
  --ds-hover-lift: -2px;
  --ds-hover-lift-md: -4px;
  --ds-reveal-distance: 24px;

  /* —— Colors (existing Calorita palette) —— */
  --bg: #f8fafc;
  --card: #ffffff;
  --muted: #64748b;
  --text: #1e293b;
  --accent: #5b7cff;
  --accent-2: #44e5b2;
  --warn: #ffb454;
  --danger: #ff6b6b;
  --border: rgba(0, 0, 0, 0.08);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  --radius-xl: 24px;

  --ds-bg-dark: #070B16;
  --ds-bg-section: #0B1020;
  --ds-bg-elevated: #08101C;
  --ds-header-dark: rgba(7, 11, 22, 0.72);
  --ds-header-light: rgba(248, 250, 252, 0.92);
  --ds-border-dark: rgba(255, 255, 255, 0.06);
  --ds-border-dark-subtle: rgba(255, 255, 255, 0.08);
  --ds-border-dark-strong: rgba(255, 255, 255, 0.12);
  --ds-text-on-dark: #f8fafc;
  --ds-text-on-dark-soft: #f1f5f9;
  --ds-text-on-dark-muted: rgba(203, 213, 225, 0.82);
  --ds-text-on-dark-faint: rgba(203, 213, 225, 0.65);
  --ds-text-nav: rgba(226, 232, 240, 0.88);
  --ds-kicker-color: rgba(175, 203, 255, 0.85);
  --ds-kicker-color-alt: rgba(196, 181, 253, 0.9);
  --ds-accent-purple: #7B61FF;
  --ds-accent-blue: #6AA8FF;
  --ds-glow-purple: rgba(123, 97, 255, 0.22);
  --ds-glow-blue: rgba(106, 168, 255, 0.12);
  --ds-glow-orange: rgba(255, 154, 98, 0.14);

  /* Resources aliases */
  --bg-dark: var(--ds-bg-dark);
  --bg-section: var(--ds-bg-elevated);
  --text-light: var(--ds-text-nav);
  --text-muted: var(--ds-text-on-dark-faint);
  --text-faint: rgba(203, 213, 225, 0.45);
  --accent-purple: var(--ds-accent-purple);
  --accent-blue: var(--ds-accent-blue);
  --border-subtle: var(--ds-border-dark-subtle);

  /* —— Typography —— */
  --ds-font: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --ds-text-hero: clamp(2.25rem, 4.2vw + 0.5rem, 3.65rem);
  --ds-text-section: clamp(1.85rem, 3vw + 0.5rem, 2.65rem);
  --ds-text-section-lg: clamp(2rem, 3.8vw + 0.4rem, 3.25rem);
  --ds-text-section-xl: clamp(2.15rem, 4.5vw + 0.35rem, 3.5rem);
  --ds-text-subtitle: clamp(1.05rem, 1.1vw + 0.5rem, 1.22rem);
  --ds-text-body: 1rem;
  --ds-text-small: 0.88rem;
  --ds-text-caption: 0.78rem;
  --ds-text-kicker: 0.72rem;
  --ds-tracking-kicker: 0.2em;
  --ds-tracking-tight: -0.03em;
  --ds-leading-tight: 1.06;
  --ds-leading-body: 1.65;
  --ds-kicker-gap: 14px;
  --ds-title-gap: 22px;
  --ds-subtitle-gap: 18px;

  /* —— Screenshots / device frames —— */
  --ds-screenshot-radius: var(--ds-radius-device);
  --ds-screenshot-inner-radius: var(--ds-radius-3xl);
  --ds-screenshot-frame-radius: var(--ds-radius-frame);
  --ds-screenshot-max-width: min(320px, 42vw);

  /* —— Icons —— */
  --ds-icon-size: 24px;
  --ds-icon-size-sm: 14px;
  --ds-icon-stroke: 1.75;
  --ds-icon-stroke-bold: 2;

  /* —— Cards —— */
  --ds-card-padding: 22px 20px;
  --ds-card-padding-sm: 20px 18px;

  /* —— Asset paths (reference for all sections) —— */
  /* EN screenshots: images/en/  |  ES: images/es/  |  Shared: images/common/ */

  /* —— Mobile / touch —— */
  --ds-tap-min: 44px;
}

/* —— Layout —— */
.container {
  width: min(var(--ds-container-max), var(--ds-container-gutter));
  margin: 0 auto;
}

/* —— Section spacing —— */
section {
  padding: var(--ds-section-y) 0;
  border-bottom: 1px solid var(--border);
}

/* —— Typography hierarchy (use classes or matching var() tokens) —— */
.ds-kicker,
[class$="__label"],
[class$="__kicker"] {
  margin: 0 0 var(--ds-kicker-gap);
  font-size: var(--ds-text-kicker);
  font-weight: 600;
  letter-spacing: var(--ds-tracking-kicker);
  text-transform: uppercase;
  color: var(--ds-kicker-color);
}

.ds-hero-title {
  margin: 0 0 var(--ds-title-gap);
  font-size: var(--ds-text-hero);
  font-weight: 700;
  line-height: var(--ds-leading-tight);
  letter-spacing: var(--ds-tracking-tight);
  color: var(--ds-text-on-dark);
}

.ds-section-title {
  margin: 0 0 var(--ds-subtitle-gap);
  font-size: var(--ds-text-section);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: var(--ds-tracking-tight);
  color: var(--ds-text-on-dark);
}

.ds-section-title-lg {
  font-size: var(--ds-text-section-lg);
}

.ds-subtitle {
  margin: 0;
  font-size: var(--ds-text-subtitle);
  line-height: var(--ds-leading-body);
  color: var(--ds-text-on-dark-muted);
}

.ds-body {
  font-size: var(--ds-text-body);
  line-height: var(--ds-leading-body);
  color: var(--ds-text-on-dark-muted);
}

.ds-small {
  font-size: var(--ds-text-small);
  line-height: var(--ds-leading-body);
}

.ds-caption {
  font-size: var(--ds-text-caption);
  line-height: 1.5;
  color: var(--ds-text-on-dark-faint);
}

/* —— Cards —— */
.ds-card,
.meal-card,
.feature-card,
.who-card,
.article-card {
  border-radius: var(--ds-radius-2xl);
  border: 1px solid var(--ds-border-dark-strong);
  box-shadow: var(--ds-shadow-card);
  transition: var(--ds-transition-hover);
}

.meal-card,
.feature-card,
.who-card {
  padding: var(--ds-card-padding);
}

.privacy-trust-card {
  padding: var(--ds-space-4) var(--ds-space-4) 14px;
  border-radius: var(--ds-radius-xl);
  border: 1px solid var(--ds-border-dark-strong);
  box-shadow: var(--ds-shadow-md);
  transition: border-color var(--ds-duration-slow) var(--ds-ease), box-shadow var(--ds-duration-slow) var(--ds-ease);
}

.ds-card:hover,
.meal-card:hover,
.feature-card:hover,
.who-card:hover {
  box-shadow: var(--ds-shadow-card-hover);
  transform: translateY(var(--ds-hover-lift));
}

.privacy-trust-card:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: var(--ds-shadow-card-hover);
}

.article-card {
  border-color: var(--ds-border-dark-strong);
  box-shadow: var(--ds-shadow-md);
}

.article-card:has(.article-card__link:hover),
.article-card:has(.article-card__link:focus-visible) {
  transform: translateY(var(--ds-hover-lift-md));
  box-shadow: var(--ds-shadow-card-hover);
}

/* —— Buttons —— */
.btn-primary,
.btn.primary,
.btn-resources {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ds-tap-min);
  padding: 14px 28px;
  border-radius: var(--ds-radius-lg);
  font-family: var(--ds-font);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, var(--accent), #6a8aff);
  border: none;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: var(--ds-transition-hover);
}

.btn-primary:hover,
.btn.primary:hover,
.btn-resources:hover {
  transform: translateY(var(--ds-hover-lift));
  opacity: 0.95;
  color: #fff;
}

.btn-secondary,
.btn-hero-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ds-tap-min);
  padding: 14px 24px;
  border-radius: var(--ds-radius-lg);
  font-family: var(--ds-font);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: var(--ds-transition-hover);
}

.btn-hero-secondary {
  color: rgba(248, 250, 252, 0.92);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--ds-border-dark-strong);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.btn-hero-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}

/* —— App screenshots / device presentation —— */
.screenshot-device,
.hero-premium__phone,
.hero-premium__video,
.how-step__img,
.solution__img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--ds-screenshot-radius);
  box-shadow: var(--ds-shadow-screenshot);
  transition: var(--ds-transition-hover);
}

.app-preview__frame {
  padding: 10px;
  border-radius: var(--ds-screenshot-frame-radius);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
  border: 1px solid var(--ds-border-dark-strong);
  box-shadow: var(--ds-shadow-screenshot);
  transition: var(--ds-transition-hover);
}

.app-preview__frame:hover,
.how-step__visual:hover .how-step__img {
  box-shadow: var(--ds-shadow-screenshot-hover);
  transform: translateY(var(--ds-hover-lift-md));
}

.app-preview__frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ds-screenshot-inner-radius);
}

.hero-premium__phone-wrap {
  animation: ds-float 6s ease-in-out infinite;
}

@keyframes ds-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* —— Scroll reveal —— */
.ds-reveal {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--ds-duration-reveal) var(--ds-ease),
    transform var(--ds-duration-reveal) var(--ds-ease);
}

.js .ds-reveal {
  opacity: 0;
  transform: translateY(var(--ds-reveal-distance));
}

.js .ds-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* —— Icons —— */
.ds-icon svg,
.privacy-trust-card__icon svg,
.article-card__btn svg {
  width: var(--ds-icon-size);
  height: var(--ds-icon-size);
  stroke: currentColor;
  fill: none;
  stroke-width: var(--ds-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.article-card__btn svg {
  width: var(--ds-icon-size-sm);
  height: var(--ds-icon-size-sm);
  stroke-width: var(--ds-icon-stroke-bold);
}

/* —— App Store badge links —— */
.app-store-badge-link {
  display: inline-block;
  line-height: 0;
  flex-shrink: 0;
  transition: opacity var(--ds-duration) var(--ds-ease),
    transform var(--ds-duration) var(--ds-ease);
}

.app-store-badge-link:hover {
  opacity: 0.9;
  transform: translateY(var(--ds-hover-lift));
}

/* —— Reduced motion —— */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .hero-premium__phone-wrap,
  .ds-reveal {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 680px) {
  .meal-card { padding: var(--ds-card-padding-sm); }
}

/* —— Mobile —— */
@media (max-width: 768px) {
  section {
    padding: var(--ds-section-y-mobile) 0;
  }
}