/*
  Winter Garden — sistema de diseño
  Paleta derivada del logo real (verde salvia del rótulo + rayos pálidos
  del motivo de sol/hojas) y de la fachada real del local (madera cálida
  iluminada contra el vidrio frío del invernadero por la noche).
  Tema claro = invernadero de día. Tema oscuro = invernadero de noche.
*/

:root{
  /* — superficies y texto (claro) — */
  --bg: #EBEEE3;
  --surface: #FCFBF4;
  --surface-2: #E2E9D3;
  --surface-3: #D4DFBE;
  --ink: #16210F;
  --ink-muted: #57624E;
  --border: #C0CEA9;

  /* — marca (claro): misma esencia que el modo oscuro, más saturada y
     rica en vez de apagada, para que el modo claro tenga la misma
     personalidad — no solo una versión "deslavada" del oscuro. */
  --brand: #3E6B2C;
  --brand-strong: #22381A;
  --brand-soft: #DCEACB;
  --amber: #A9720E;
  --amber-strong: #7A4E05;
  --amber-soft: #F3E1B0;

  /* — estado (claro) — */
  --critical: #A03D33;
  --critical-soft: #F5DDD9;
  --success: #2E6B41;
  --success-soft: #DCEBDC;

  /* — escala tipográfica — */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Karla', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --step-1: clamp(1.2rem, 1.13rem + 0.35vw, 1.4rem);
  --step-2: clamp(1.45rem, 1.32rem + 0.6vw, 1.8rem);
  --step-3: clamp(1.85rem, 1.6rem + 1.1vw, 2.5rem);
  --step-4: clamp(2.4rem, 1.95rem + 2vw, 3.6rem);
  --step-5: clamp(3rem, 2.2rem + 3.6vw, 5.2rem);

  /* — espaciado — */
  --space-1: 0.4rem;
  --space-2: 0.8rem;
  --space-3: 1.4rem;
  --space-4: 2.2rem;
  --space-5: 3.6rem;
  --space-6: 5.6rem;

  /* — forma / profundidad — */
  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 28px;
  --shadow-1: 0 1px 2px rgba(20, 30, 14, 0.06), 0 6px 18px -10px rgba(20, 30, 14, 0.18);
  --shadow-2: 0 10px 30px -12px rgba(20, 30, 14, 0.28), 0 2px 8px rgba(20, 30, 14, 0.08);
  --ring: 0 0 0 3px var(--amber-soft), 0 0 0 5px var(--amber);
  /* Relieve/emboss para clicables: filo claro arriba, sombra fina abajo —
     el gesto universal de "esto es un botón, se puede pulsar". */
  --relief: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 2px rgba(20,30,14,.14);
  --relief-pressed: inset 0 1px 3px rgba(20,30,14,.25);

  --content-w: 72rem;
  --measure: 62ch;

  color-scheme: light;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg: #0E160F;
    --surface: #162016;
    --surface-2: #1C271C;
    --surface-3: #233223;
    --ink: #E9EEE1;
    --ink-muted: #9FAC92;
    --border: #293A28;

    --brand: #92C27B;
    --brand-strong: #C9E4B6;
    --brand-soft: #21301F;
    --amber: #E7B15A;
    --amber-strong: #F4CE8C;
    --amber-soft: #362A12;

    --critical: #E5978F;
    --critical-soft: #3A211C;
    --success: #83D492;
    --success-soft: #1D2E1D;

    --shadow-1: 0 1px 2px rgba(0,0,0,0.35), 0 6px 20px -10px rgba(0,0,0,0.55);
    --shadow-2: 0 14px 34px -14px rgba(0,0,0,0.65), 0 2px 10px rgba(0,0,0,0.35);
    --ring: 0 0 0 3px var(--amber-soft), 0 0 0 5px var(--amber);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg: #0E160F;
  --surface: #162016;
  --surface-2: #1C271C;
  --surface-3: #233223;
  --ink: #E9EEE1;
  --ink-muted: #9FAC92;
  --border: #293A28;

  --brand: #92C27B;
  --brand-strong: #C9E4B6;
  --brand-soft: #21301F;
  --amber: #E7B15A;
  --amber-strong: #F4CE8C;
  --amber-soft: #362A12;

  --critical: #E5978F;
  --critical-soft: #3A211C;
  --success: #83D492;
  --success-soft: #1D2E1D;

  --shadow-1: 0 1px 2px rgba(0,0,0,0.35), 0 6px 20px -10px rgba(0,0,0,0.55);
  --shadow-2: 0 14px 34px -14px rgba(0,0,0,0.65), 0 2px 10px rgba(0,0,0,0.35);
  --ring: 0 0 0 3px var(--amber-soft), 0 0 0 5px var(--amber);
  color-scheme: dark;
}