/* ============================================================
   OHTLIA — Design tokens v1.0
   El camino: petróleo (confianza) · arena (superficie) · ámbar (acción)
   Saltillo · Ramos Arizpe · Arteaga
   Guía de uso con Tailwind: ver "OHTLIA Sistema.dc.html" § 08
   ============================================================ */

:root {

  /* ---- Petróleo — color base, confianza, camino nocturno ---- */
  --oh-petroleo-50:  #F0F6F7;
  --oh-petroleo-100: #DDEBEE;
  --oh-petroleo-200: #BED6DC;
  --oh-petroleo-300: #93B9C2;
  --oh-petroleo-400: #6296A3;
  --oh-petroleo-500: #417787;
  --oh-petroleo-600: #305F6E;
  --oh-petroleo-700: #274C59;
  --oh-petroleo-800: #1E3C47;
  --oh-petroleo-900: #152E37;
  --oh-petroleo-950: #0B1F27;

  /* ---- Arena — superficies cálidas del semidesierto ---- */
  --oh-arena-50:  #FBF8F1;
  --oh-arena-100: #F5EFE2;
  --oh-arena-200: #EBE1CC;
  --oh-arena-300: #DDCDAF;
  --oh-arena-400: #C9B085;
  --oh-arena-500: #B29564;
  --oh-arena-600: #94784C;
  --oh-arena-700: #75603E;
  --oh-arena-800: #574833;
  --oh-arena-900: #3B3125;

  /* ---- Ámbar — acción, atardecer, dinero en mano ---- */
  --oh-ambar-50:  #FDF6E7;
  --oh-ambar-100: #FAEACB;
  --oh-ambar-200: #F6D797;
  --oh-ambar-300: #F2C25E;
  --oh-ambar-400: #F0AF35;   /* acción primaria */
  --oh-ambar-500: #E29A1B;
  --oh-ambar-600: #C87F12;
  --oh-ambar-700: #A2640F;

  /* ---- Semáforo (estados; nunca decorativo) ---- */
  --oh-exito-100:   #DDF3E7;
  --oh-exito-600:   #1F8A5A;
  --oh-exito-700:   #14663F;
  --oh-aviso-100:   #FBEED2;
  --oh-aviso-600:   #B7791C;
  --oh-aviso-700:   #8F5D13;
  --oh-peligro-100: #FAE4DD;
  --oh-peligro-600: #BA3D22;
  --oh-peligro-700: #93301B;

  /* ---- Alias de superficie · modo claro (cliente / negocio) ---- */
  --oh-bg:      var(--oh-arena-50);
  --oh-surface: #FFFDF7;
  --oh-borde:   rgba(11, 31, 39, 0.10);
  --oh-ink:     var(--oh-petroleo-950);
  --oh-ink-2:   #4A6570;   /* texto secundario, AA sobre arena-50 */
  --oh-ink-3:   #7E959C;   /* solo texto no esencial */

  /* ---- Alias de superficie · modo noche (repartidor, dark-first) ---- */
  --oh-noche-bg:        #07191F;
  --oh-noche-surface:   #0F2A33;
  --oh-noche-surface-2: #153541;
  --oh-noche-borde:     rgba(240, 246, 247, 0.10);
  --oh-noche-ink:       #F3EEE1;
  --oh-noche-ink-2:     #9FBAC1;
  --oh-noche-ink-3:     #64828A;
  --oh-noche-exito:     #46CE8B;
  --oh-noche-aviso:     #F2C14E;
  --oh-noche-peligro:   #F07A5A;

  /* ---- Acción ---- */
  --oh-accion:       var(--oh-ambar-400);
  --oh-accion-hover: var(--oh-ambar-500);
  --oh-accion-ink:   var(--oh-petroleo-950);  /* texto sobre ámbar, 8.2:1 */

  /* ---- Tipografía ---- */
  --oh-font-display: 'Space Grotesk', 'Trebuchet MS', sans-serif;  /* display + PRECIOS */
  --oh-font-texto:   'Instrument Sans', system-ui, sans-serif;

  --oh-texto-micro:   11px;  /* etiquetas MAYÚSCULAS, tracking .08em */
  --oh-texto-caption: 12px;
  --oh-texto-sm:      13px;
  --oh-texto-base:    15px;
  --oh-texto-md:      17px;
  --oh-texto-titulo:  20px;
  --oh-texto-titulo-lg: 24px;
  --oh-texto-display: 28px;
  --oh-texto-display-lg: 34px;
  --oh-precio:    20px;   /* precio en cards */
  --oh-precio-lg: 26px;   /* precio en sheet / carrito */
  --oh-precio-xl: 34px;   /* desembolso / total */

  /* ---- Espaciado (escala de 4) ---- */
  --oh-esp-1: 4px;
  --oh-esp-2: 8px;
  --oh-esp-3: 12px;
  --oh-esp-4: 16px;
  --oh-esp-5: 20px;
  --oh-esp-6: 24px;
  --oh-esp-8: 32px;
  --oh-esp-10: 40px;
  --oh-esp-12: 48px;
  --oh-esp-16: 64px;

  /* ---- Radios ---- */
  --oh-radio-sm: 10px;   /* inputs, chips internos */
  --oh-radio-md: 14px;   /* botones, toasts */
  --oh-radio-lg: 20px;   /* cards */
  --oh-radio-xl: 28px;   /* bottom-sheets, modales */
  --oh-radio-pill: 999px;

  /* ---- Sombras (tinte petróleo, nunca negro puro en claro) ---- */
  --oh-sombra-1: 0 1px 2px rgba(11,31,39,.06), 0 2px 8px rgba(11,31,39,.06);
  --oh-sombra-2: 0 4px 16px rgba(11,31,39,.10);
  --oh-sombra-3: 0 12px 32px -8px rgba(11,31,39,.22);
  --oh-sombra-noche: 0 12px 32px -8px rgba(0,0,0,.5);

  /* ---- Foco / táctil / movimiento ---- */
  --oh-anillo: 0 0 0 3px rgba(240,175,53,.45);  /* foco visible siempre */
  --oh-tap: 44px;                                /* target táctil MÍNIMO */
  --oh-rapido: 120ms;
  --oh-normal: 200ms;
  --oh-ease: cubic-bezier(.2,.7,.3,1);
}