:root {
  /* Tipografía */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Montserrat", Arial, sans-serif;

  /* Fondos */
  --color-bg: #101714;
  --color-bg-soft: #17221d;
  --color-primary: #123d32;
  --color-primary-light: #245748;

  /* Papel */
  --color-paper: #e8e4d9;
  --color-paper-text: #30352e;

  /* Texto */
  --color-text: #f2eee5;
  --color-muted: #b8b9ac;
  --color-accent: #a7b89b;

  /* Controles */
  --color-border: rgb(255 255 255 / 15%);
  --color-button: #285c4d;

  /* Flores */
  --flower-white: #f3f0e7;
  --flower-highlight: #ffffff;
  --flower-shadow: #d4d3c7;
  --flower-center: #b4a879;
  --flower-green: #092d25;

  /* Papel rasgado */
  --torn-edge-color: var(--color-bg);
  --torn-edge-height: 50px;
  --transition-flower-height: 460px;

  /* Espaciado */
  --section-padding: clamp(65px, 12vw, 130px);
  --content-width: 680px;
}

/* ==========================================
   OLIVA + MARFIL
   ========================================== */

[data-theme="olive"] {
  --color-bg: #101714;
  --color-bg-soft: #17221d;
  --color-primary: #123d32;
  --color-primary-light: #245748;

  --color-paper: #e8e4d9;
  --color-paper-text: #30352e;

  --color-text: #f2eee5;
  --color-muted: #b8b9ac;
  --color-accent: #a7b89b;

  --color-button: #285c4d;

  --flower-white: #f5f1e9;
  --flower-highlight: #ffffff;
  --flower-shadow: #d6d5ca;
  --flower-center: #b5a879;
  --flower-green: #082d24;
}

/* ==========================================
   OLIVA + DORADO
   ========================================== */

[data-theme="gold"] {
  --color-bg: #15140f;
  --color-bg-soft: #242116;
  --color-primary: #3e472d;
  --color-primary-light: #59643e;

  --color-paper: #f3ead8;
  --color-paper-text: #393326;

  --color-text: #f5eddf;
  --color-muted: #c5b99f;
  --color-accent: #c9a75e;

  --color-button: #75602e;

  --flower-white: #f2e8d6;
  --flower-highlight: #fffaf0;
  --flower-shadow: #d6c6a8;
  --flower-center: #b58b42;
  --flower-green: #333c24;
}

/* ==========================================
   ESMERALDA + ROSA
   ========================================== */

[data-theme="emerald"] {
  --color-bg: #101715;
  --color-bg-soft: #1b2824;
  --color-primary: #16483b;
  --color-primary-light: #28705a;

  --color-paper: #f3e7e4;
  --color-paper-text: #43312f;

  --color-text: #f8f0ec;
  --color-muted: #c8b7b3;
  --color-accent: #d8a5a0;

  --color-button: #814e50;

  --flower-white: #f5dcd9;
  --flower-highlight: #fff1ed;
  --flower-shadow: #d9a9a7;
  --flower-center: #c69a6e;
  --flower-green: #123e32;
}

/* ==========================================
   CLÁSICO NEGRO + BLANCO
   ========================================== */

[data-theme="classic"] {
  --color-bg: #111111;
  --color-bg-soft: #202020;
  --color-primary: #343434;
  --color-primary-light: #555555;

  --color-paper: #f7f5f0;
  --color-paper-text: #282828;

  --color-text: #f7f5f0;
  --color-muted: #bcbcbc;
  --color-accent: #b4a88f;

  --color-button: #333333;

  --flower-white: #ffffff;
  --flower-highlight: #ffffff;
  --flower-shadow: #d8d8d8;
  --flower-center: #b4a88f;
  --flower-green: #252525;
}

/* ==========================================
   BASE
   ========================================== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 300;
}

button,
input,
textarea,
select {
  font: inherit;
}

img,
svg {
  max-width: 100%;
}