/* =====================================================
   NutricionistaPaz · Design Tokens
   Editorial cálido + acentos vibrantes botánicos
   ===================================================== */

:root {
  /* Colors — base neutrals (cream + warm ink) */
  --cream: oklch(0.97 0.012 75);
  --cream-2: oklch(0.94 0.018 75);
  --cream-3: oklch(0.90 0.022 75);
  --paper: oklch(0.985 0.008 75);
  --ink: oklch(0.22 0.018 40);
  --ink-soft: oklch(0.38 0.020 40);
  --ink-mute: oklch(0.55 0.018 40);
  --hairline: oklch(0.85 0.012 60);
  --hairline-strong: oklch(0.72 0.015 60);

  /* Brand-derived from logo */
  --noche: oklch(0.20 0.012 30);            /* logo black */
  --indigo: oklch(0.42 0.10 285);           /* logo violet center */
  --indigo-soft: oklch(0.62 0.07 285);
  --gold: oklch(0.82 0.13 90);              /* logo gold drop */
  --gold-soft: oklch(0.90 0.07 90);

  /* Vibrant botanical accents */
  --terracota: oklch(0.66 0.13 38);
  --terracota-soft: oklch(0.86 0.06 38);
  --salvia: oklch(0.58 0.07 145);
  --salvia-soft: oklch(0.88 0.04 145);
  --rosa: oklch(0.78 0.09 20);
  --rosa-soft: oklch(0.92 0.04 20);
  --mostaza: oklch(0.78 0.13 80);
  --kombu: oklch(0.30 0.04 180);

  /* Type */
  --serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
  --script: "Pinyon Script", "Mr De Haviland", cursive;

  /* Scale */
  --t-mega: clamp(3.2rem, 9vw, 7.5rem);
  --t-display: clamp(2.4rem, 6vw, 4.6rem);
  --t-h1: clamp(2.0rem, 4.4vw, 3.4rem);
  --t-h2: clamp(1.5rem, 2.8vw, 2.2rem);
  --t-h3: clamp(1.15rem, 1.8vw, 1.4rem);
  --t-body: 1.0625rem;
  --t-small: 0.875rem;
  --t-xs: 0.75rem;

  /* Space */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --section: clamp(4rem, 10vw, 8rem);

  /* Radius / shadow */
  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
  --shadow-soft: 0 1px 2px rgba(40, 30, 20, 0.04), 0 8px 24px -10px rgba(40, 30, 20, 0.10);
  --shadow-lift: 0 2px 4px rgba(40, 30, 20, 0.06), 0 24px 48px -16px rgba(40, 30, 20, 0.16);

  /* motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

::selection { background: var(--gold); color: var(--noche); }

/* utility primitives ------------------------------------ */
.container {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-narrow {
  width: 100%;
  max-width: 880px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.eyebrow::before {
  content: "";
  width: 1.6em;
  height: 1px;
  background: var(--hairline-strong);
}

.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
.italic { font-style: italic; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.4rem;
  border-radius: var(--r-pill);
  font-size: 0.95rem;
  font-weight: 500;
  border: 1px solid transparent;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
  white-space: nowrap;
}
.btn-primary {
  background: var(--noche);
  color: var(--cream);
}
.btn-primary:hover { background: var(--ink); transform: translateY(-1px); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--hairline-strong);
}
.btn-ghost:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn-warm {
  background: var(--terracota);
  color: var(--cream);
}
.btn-warm:hover { background: oklch(0.58 0.13 38); }

/* Image placeholder pattern --------------------------- */
.ph {
  position: relative;
  background:
    repeating-linear-gradient(
      135deg,
      oklch(0.92 0.02 70) 0 8px,
      oklch(0.88 0.03 70) 8px 16px
    );
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-mute);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  overflow: hidden;
}
.ph[data-dark] {
  background:
    repeating-linear-gradient(
      135deg,
      oklch(0.30 0.015 30) 0 8px,
      oklch(0.26 0.018 30) 8px 16px
    );
  color: oklch(0.7 0.02 60);
  border-color: oklch(0.32 0.02 30);
}
.ph[data-tone="salvia"] {
  background:
    repeating-linear-gradient(
      135deg,
      oklch(0.85 0.04 145) 0 8px,
      oklch(0.81 0.05 145) 8px 16px
    );
}
.ph[data-tone="terracota"] {
  background:
    repeating-linear-gradient(
      135deg,
      oklch(0.84 0.06 38) 0 8px,
      oklch(0.80 0.07 38) 8px 16px
    );
}
.ph[data-tone="rosa"] {
  background:
    repeating-linear-gradient(
      135deg,
      oklch(0.90 0.04 20) 0 8px,
      oklch(0.86 0.05 20) 8px 16px
    );
}

/* hairline divider ------------------------------------- */
.hr-fancy {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--ink-mute);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.hr-fancy::before,
.hr-fancy::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hairline-strong);
}

/* card ------------------------------------------------- */
.card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 1.6rem;
}

/* section spacing */
.section { padding-block: var(--section); }

/* focus ------------------------------------------------ */
:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}