/* ============================================================
   RANQHAY E.I.R.L. — Design Tokens
   Sistema "Andén + Brote": de nuestras raíces hacia el futuro del campo.
   Paleta derivada del logotipo (azul profundo + cian, hoja/brote).
   ============================================================ */

:root {
  /* ---------- Color de marca (muestreado del logotipo) ---------- */
  --c-azul-950:  #04121C;   /* fondo oscuro extremo */
  --c-azul-900:  #0A2438;   /* navy del emblema */
  --c-azul-800:  #0B3D57;
  --c-azul-700:  #0A5474;
  --c-azul-600:  #0668A8;   /* PRIMARIO — azul del wordmark */
  --c-azul-500:  #0A80B8;
  --c-azul-200:  #B9DCEF;
  --c-azul-100:  #E3F1F9;

  --c-cielo-600: #0E8FAF;   /* turquesa legible sobre claro */
  --c-cielo-500: #12A9C9;   /* ACENTO — turquesa del emblema */
  --c-cielo-300: #58C8DC;
  --c-cielo-100: #DDF3F8;

  /* ---------- Color de contexto ---------- */
  --c-ocre-600:  #9A5A15;   /* raíces / tierra — legible sobre claro */
  --c-ocre-500:  #D48B36;
  --c-ocre-300:  #EFC48A;
  --c-ocre-200:  #F7E4C7;
  --c-arena-100: #FBF3E7;   /* fondo cálido de sección */
  --c-hoja-600:  #1F7C58;   /* brote / campo — usado con moderación */
  --c-hoja-500:  #2E9E74;
  --c-hoja-100:  #DCF0E7;

  /* ---------- Neutrales fríos ---------- */
  --c-neblina:   #ECF2F5;   /* fondo claro */
  --c-hueso:     #F6FAFB;
  --c-blanco:    #FFFFFF;
  --c-piedra-800:#18272F;
  --c-piedra-700:#38505C;
  --c-piedra-600:#556A76;   /* texto secundario */
  --c-piedra-400:#889AA4;
  --c-piedra-300:#C3D1D9;   /* bordes */
  --c-piedra-200:#DCE6EB;

  /* ---------- Estados ---------- */
  --c-ok:      var(--c-hoja-600);  --c-ok-bg:    var(--c-hoja-100);
  --c-warn:    #96601A;            --c-warn-bg:  #FBEBD3;
  --c-off:     #6B7784;            --c-off-bg:   #E7EBEF;
  --c-alert:   #A93226;            --c-alert-bg: #FBE3E0;

  /* ---------- Roles semánticos (tema claro) ---------- */
  --bg:           var(--c-neblina);
  --bg-elevated:  var(--c-blanco);
  --text:         var(--c-azul-950);
  --text-muted:   var(--c-piedra-600);
  --border:       var(--c-piedra-300);
  --brand:        var(--c-azul-600);
  --brand-strong: var(--c-azul-800);
  --accent:       var(--c-cielo-500);
  --accent-warm:  var(--c-ocre-500);

  /* ---------- Tipografía ---------- */
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  --fs-display-xl: clamp(2.6rem, 6.2vw, 5.25rem);
  --fs-display-l:  clamp(2.1rem, 4.4vw, 3.5rem);
  --fs-h2:         clamp(1.75rem, 3.1vw, 2.7rem);
  --fs-h3:         clamp(1.25rem, 1.8vw, 1.5rem);
  --fs-h4:         1.0625rem;
  --fs-lede:       clamp(1.0625rem, 1.35vw, 1.25rem);
  --fs-body:       1.0625rem;
  --fs-sm:         0.9375rem;
  --fs-xs:         0.8125rem;
  --fs-label:      0.75rem;

  --lh-tight: 1.04;
  --lh-head:  1.14;
  --lh-body:  1.62;
  --ls-label: 0.14em;

  /* ---------- Espaciado (escala 4px) ---------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;
  --section-y: clamp(56px, 8vw, 124px);

  /* ---------- Layout ---------- */
  --container: 1240px;
  --container-narrow: 860px;
  --gutter: clamp(20px, 4vw, 48px);

  /* ---------- Forma: el escalón del andén ---------- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
  --r-pill: 999px;
  --notch: 22px;
  --step-cut: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);

  /* ---------- Elevación ---------- */
  --sh-1: 0 1px 2px rgba(6,15,31,.06), 0 2px 6px rgba(6,15,31,.04);
  --sh-2: 0 2px 4px rgba(6,15,31,.05), 0 10px 24px rgba(6,15,31,.08);
  --sh-3: 0 4px 8px rgba(6,15,31,.06), 0 20px 48px rgba(6,15,31,.14);
  --ring: 0 0 0 3px rgba(6,104,168,.38);

  /* ---------- Movimiento ---------- */
  --e-out: cubic-bezier(.22,.61,.36,1);
  --e-in-out: cubic-bezier(.65,.05,.36,1);
  --t-fast: 140ms;
  --t-base: 260ms;
  --t-slow: 620ms;

  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;
}

/* Superficies oscuras: invierten los roles, no los colores sueltos.
   .grower (bloque del productor) siempre se pinta sobre fondo oscuro, asi que
   invierte los roles por si solo: sin esto el boton secundario que lleva dentro
   quedaba con texto oscuro sobre oscuro, ilegible hasta pasar el cursor. */
.on-dark,
.grower {
  --bg: var(--c-azul-950);
  --bg-elevated: #0C2C42;
  --text: var(--c-hueso);
  --text-muted: #9DB4BF;
  --border: rgba(255,255,255,.14);
  --brand: var(--c-cielo-300);
  --brand-strong: var(--c-cielo-100);
  --accent: var(--c-cielo-500);
}