/* ============================================================================
   RB Servicios Generales — Tokens de diseño
   Único lugar donde se definen colores, tipografías, espaciados y sombras.
   Documentación: docs/PALETA-DE-COLORES.md
   ========================================================================= */

:root {
  /* ---- Azul RB (marca, tomado del logo) ---------------------------------- */
  --rb-azul-900: #0A1533;
  --rb-azul-800: #0E1D45;
  --rb-azul-700: #14285C;   /* color de marca */
  --rb-azul-600: #1D3878;
  --rb-azul-500: #2A4C9B;
  --rb-azul-300: #7A93CC;
  --rb-azul-100: #DCE4F5;
  --rb-azul-50:  #F1F5FC;

  /* ---- Ámbar de obra (acento) -------------------------------------------- */
  --rb-ambar-700: #965C00;  /* único tono legible como texto sobre blanco */
  --rb-ambar-600: #D98A05;
  --rb-ambar-500: #F2A007;  /* acento */
  --rb-ambar-300: #FFCB63;
  --rb-ambar-100: #FFF1D6;

  /* ---- Neutros ------------------------------------------------------------ */
  --rb-tinta:    #101828;
  --rb-gris-700: #344054;
  --rb-gris-500: #667085;
  --rb-gris-400: #98A2B3;
  --rb-gris-300: #D0D5DD;
  --rb-gris-200: #E4E7EC;
  --rb-gris-100: #F2F4F7;
  --rb-gris-50:  #F9FAFB;
  --rb-blanco:   #FFFFFF;

  /* ---- Estado ------------------------------------------------------------- */
  --rb-exito:      #12874A;
  --rb-exito-bg:   #E7F6ED;
  --rb-aviso:      #B54708;
  --rb-aviso-bg:   #FFF3E6;
  --rb-error:      #B42318;
  --rb-error-bg:   #FEE9E7;
  --rb-info:       #175CD3;
  --rb-info-bg:    #E8F0FE;
  --rb-whatsapp:   #25D366;
  --rb-whatsapp-d: #128C7E;

  /* ---- Roles semánticos (lo que usa el CSS) ------------------------------- */
  --sup-fondo:        var(--rb-gris-50);
  --sup-panel:        var(--rb-blanco);
  --sup-suave:        var(--rb-gris-100);
  --sup-invertida:    var(--rb-azul-700);
  --txt-principal:    var(--rb-tinta);
  --txt-secundario:   var(--rb-gris-500);
  --txt-sobre-oscuro: var(--rb-blanco);
  --txt-tenue-oscuro: var(--rb-azul-300);
  --borde:            var(--rb-gris-300);
  --borde-suave:      var(--rb-gris-200);
  --marca:            var(--rb-azul-700);
  --marca-hover:      var(--rb-azul-600);
  --acento:           var(--rb-ambar-500);
  --acento-hover:     var(--rb-ambar-600);
  --acento-texto:     var(--rb-ambar-700);

  /* ---- Tipografía --------------------------------------------------------- */
  --fuente-titulo: 'Archivo', 'Arial Black', 'Helvetica Neue', system-ui, sans-serif;
  --fuente-texto:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                   'Helvetica Neue', Arial, sans-serif;
  --fuente-mono:   ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --txt-xs:   0.75rem;    /* 12 */
  --txt-sm:   0.875rem;   /* 14 */
  --txt-base: 1rem;       /* 16 */
  --txt-lg:   1.25rem;    /* 20 */
  --txt-xl:   1.5625rem;  /* 25 */
  --txt-2xl:  1.9375rem;  /* 31 */
  --txt-3xl:  2.4375rem;  /* 39 */
  --txt-4xl:  3.0625rem;  /* 49 */
  --txt-5xl:  3.8125rem;  /* 61 */

  /* ---- Espaciado (base 4 px) ---------------------------------------------- */
  --e-1:  0.25rem;  --e-2:  0.5rem;   --e-3:  0.75rem;  --e-4:  1rem;
  --e-5:  1.25rem;  --e-6:  1.5rem;   --e-8:  2rem;     --e-10: 2.5rem;
  --e-12: 3rem;     --e-16: 4rem;     --e-20: 5rem;     --e-24: 6rem;

  /* ---- Radios ------------------------------------------------------------- */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-full: 999px;

  /* ---- Sombras (tinte azulado, no gris puro) ------------------------------ */
  --sombra-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --sombra-md: 0 4px 8px -2px rgba(16, 24, 40, .08), 0 2px 4px -2px rgba(16, 24, 40, .06);
  --sombra-lg: 0 12px 24px -6px rgba(20, 40, 92, .12), 0 4px 8px -4px rgba(16, 24, 40, .06);
  --sombra-xl: 0 24px 48px -12px rgba(20, 40, 92, .18);
  --anillo:    0 0 0 4px rgba(42, 76, 155, .25);

  /* ---- Layout ------------------------------------------------------------- */
  --ancho-max:   1200px;
  --ancho-texto: 68ch;
  --alto-barra:  72px;

  /* ---- Movimiento --------------------------------------------------------- */
  --trans-rapida: 140ms cubic-bezier(.4, 0, .2, 1);
  --trans-media:  240ms cubic-bezier(.4, 0, .2, 1);
}

/* ============================================================================
   Modo oscuro — solo en el cotizador (<html data-tema-oscuro>).
   La landing se mantiene siempre clara: las fotos de obra se ven mejor así.
   ========================================================================= */
@media (prefers-color-scheme: dark) {
  html[data-tema-oscuro]:not([data-tema="claro"]) {
    --sup-fondo:      #0B1220;
    --sup-panel:      #111B2E;
    --sup-suave:      #16223A;
    --sup-invertida:  #16223A;
    --txt-principal:  #E7ECF5;
    --txt-secundario: #9AA8C0;
    --borde:          #2A3A57;
    --borde-suave:    #22314B;
    --marca:          #6E8FD8;
    --marca-hover:    #8AA5E2;
    --acento-texto:   var(--rb-ambar-300);

    --rb-azul-50:  #16223A;
    --rb-azul-100: #22314B;
    --rb-gris-50:  #0B1220;
    --rb-gris-100: #16223A;
    --rb-gris-200: #22314B;
    --rb-gris-300: #2A3A57;
    --rb-blanco:   #111B2E;
    --rb-tinta:    #E7ECF5;

    --rb-exito-bg: #0E2D1E;
    --rb-aviso-bg: #33220C;
    --rb-error-bg: #33150F;
    --rb-info-bg:  #10203F;

    --sombra-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --sombra-md: 0 4px 10px rgba(0, 0, 0, .45);
    --sombra-lg: 0 14px 28px rgba(0, 0, 0, .5);
    --sombra-xl: 0 24px 48px rgba(0, 0, 0, .55);
  }
}

/* Forzado manual desde el interruptor de tema */
html[data-tema="oscuro"] {
  --sup-fondo:      #0B1220;
  --sup-panel:      #111B2E;
  --sup-suave:      #16223A;
  --sup-invertida:  #16223A;
  --txt-principal:  #E7ECF5;
  --txt-secundario: #9AA8C0;
  --borde:          #2A3A57;
  --borde-suave:    #22314B;
  --marca:          #6E8FD8;
  --marca-hover:    #8AA5E2;
  --acento-texto:   var(--rb-ambar-300);

  --rb-azul-50:  #16223A;
  --rb-azul-100: #22314B;
  --rb-gris-50:  #0B1220;
  --rb-gris-100: #16223A;
  --rb-gris-200: #22314B;
  --rb-gris-300: #2A3A57;
  --rb-blanco:   #111B2E;
  --rb-tinta:    #E7ECF5;

  --rb-exito-bg: #0E2D1E;
  --rb-aviso-bg: #33220C;
  --rb-error-bg: #33150F;
  --rb-info-bg:  #10203F;

  --sombra-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --sombra-md: 0 4px 10px rgba(0, 0, 0, .45);
  --sombra-lg: 0 14px 28px rgba(0, 0, 0, .5);
  --sombra-xl: 0 24px 48px rgba(0, 0, 0, .55);
}