/* ==========================================================================
   AGENDO · Tokens de marca y base compartida (landing, app y panel)
   ========================================================================== */

@font-face { font-family: "Gabarito"; src: url("../assets/fonts/gabarito-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Gabarito"; src: url("../assets/fonts/gabarito-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Gabarito"; src: url("../assets/fonts/gabarito-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Gabarito"; src: url("../assets/fonts/gabarito-latin-900-normal.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Onest"; src: url("../assets/fonts/onest-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../assets/fonts/fraunces-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../assets/fonts/fraunces-latin-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }

:root {
  /* Paleta de marca */
  --tinta: #17140F;
  --tinta-2: #231F18;
  --tinta-3: #2F2A21;
  --papel: #F4EFE6;
  --papel-2: #FBF8F2;
  --arena: #E8DFD0;
  --arena-2: #D8CCB8;
  --piedra: #6E665B;
  --mandarina: #FF5A1F;
  --mandarina-2: #FF7A47;
  --mandarina-display: #EE4E16; /* mandarina para titulares grandes sobre papel (3,2:1) */
  --teja: #B83A0A;
  --melocoton: #FFDCCB;
  --salvia: #2A7152;
  --salvia-tint: #DCEBE1;
  --miel: #E9A21B;
  --miel-tint: #FBEBC8;
  --granada: #B4232A;
  --granada-tint: #F8DCDC;

  /* Roles (tema claro) */
  --bg: var(--papel);
  --surface: var(--papel-2);
  --surface-2: #FFFFFF;
  --sunken: #EDE6DA;
  --line: var(--arena);
  --line-strong: var(--arena-2);
  --text: var(--tinta);
  --text-2: var(--piedra);
  --accent: var(--mandarina);
  --accent-ink: var(--tinta);
  --accent-text: var(--teja);
  --focus: var(--mandarina);

  /* Tipografía */
  --font-display: "Gabarito", ui-sans-serif, system-ui, sans-serif;
  --font-ui: "Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-accent: "Fraunces", Georgia, serif;

  --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.86rem);
  --step-0: clamp(0.95rem, 0.92rem + 0.15vw, 1.05rem);
  --step-1: clamp(1.1rem, 1.04rem + 0.3vw, 1.3rem);
  --step-2: clamp(1.35rem, 1.22rem + 0.6vw, 1.75rem);
  --step-3: clamp(1.7rem, 1.45rem + 1.2vw, 2.5rem);
  --step-4: clamp(2.2rem, 1.7rem + 2.4vw, 3.8rem);
  --step-5: clamp(2.8rem, 1.9rem + 4.4vw, 6.4rem);

  /* Forma y espacio */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 999px;
  --gutter: clamp(16px, 4vw, 40px);

  /* Sombra: difusa y cálida, nunca gris */
  --shadow-1: 0 1px 2px rgb(23 20 15 / 0.05), 0 2px 8px rgb(23 20 15 / 0.04);
  --shadow-2: 0 2px 6px rgb(23 20 15 / 0.05), 0 12px 32px -8px rgb(23 20 15 / 0.12);
  --shadow-3: 0 4px 12px rgb(23 20 15 / 0.06), 0 30px 70px -20px rgb(23 20 15 / 0.28);

  /* Movimiento */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --ease-swift: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-1: 160ms;
  --dur-2: 280ms;
  --dur-3: 520ms;

  color-scheme: light;
}

/* Tema oscuro automático (app y panel lo activan con data-theme o por sistema) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-auto-dark] {
    --bg: var(--tinta);
    --surface: var(--tinta-2);
    --surface-2: var(--tinta-3);
    --sunken: #100E0A;
    --line: #3A342A;
    --line-strong: #4A4337;
    --text: var(--papel);
    --text-2: #A39B8E;
    --accent-text: var(--mandarina-2);
    --salvia: #5FBF8F;
    --salvia-tint: #1D3328;
    --miel-tint: #3A2E12;
    --granada: #F07A7F;
    --granada-tint: #3A1A1B;
    --melocoton: #3D2418;
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.3);
    --shadow-2: 0 12px 32px -8px rgb(0 0 0 / 0.5);
    --shadow-3: 0 30px 70px -20px rgb(0 0 0 / 0.7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: var(--tinta);
  --surface: var(--tinta-2);
  --surface-2: var(--tinta-3);
  --sunken: #100E0A;
  --line: #3A342A;
  --line-strong: #4A4337;
  --text: var(--papel);
  --text-2: #A39B8E;
  --accent-text: var(--mandarina-2);
  --salvia: #5FBF8F;
  --salvia-tint: #1D3328;
  --miel-tint: #3A2E12;
  --granada: #F07A7F;
  --granada-tint: #3A1A1B;
  --melocoton: #3D2418;
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-2: 0 12px 32px -8px rgb(0 0 0 / 0.5);
  --shadow-3: 0 30px 70px -20px rgb(0 0 0 / 0.7);
  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
:where(h1, h2, h3, h4) { font-family: var(--font-display); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
p { text-wrap: pretty; }
.num, time { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--mandarina); color: var(--tinta); }
html { scrollbar-color: var(--line-strong) transparent; }
input, textarea { caret-color: var(--mandarina); }
a { text-underline-offset: 0.18em; text-decoration-thickness: 1.5px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

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