/* ==========================================================================
   Castle Solutions — Tokens de color
   Paleta "Granito": grises de piedra inspirados en castillos medievales,
   con un único acento "Bronce" (antorchas, herrajes) para usar con moderación.

   Uso:
     <link rel="stylesheet" href="tokens/colors.css">
     Tema claro por defecto. Tema oscuro automático (prefers-color-scheme)
     o forzado con <html data-theme="dark"> / <html data-theme="light">.
   ========================================================================== */

:root {
  /* --- Escala base: Granito ------------------------------------------- */
  --granito-50:  #F4F4F2; /* Cal          — fondos claros            */
  --granito-100: #E7E6E3; /* Niebla       — superficies claras        */
  --granito-200: #D0CECA; /* Arenisca     — bordes suaves             */
  --granito-300: #AFACA6; /* Piedra clara — bordes, iconos inactivos  */
  --granito-400: #8A8781; /* Piedra       — texto deshabilitado       */
  --granito-500: #6B6964; /* Muralla      — color de marca medio      */
  --granito-600: #53514D; /* Almena       — texto secundario (claro)  */
  --granito-700: #3E3D3A; /* Torre        — superficies oscuras       */
  --granito-800: #2B2A28; /* Pizarra      — color principal de marca  */
  --granito-900: #1D1C1B; /* Foso         — texto principal (claro)   */
  --granito-950: #131312; /* Mazmorra     — fondo oscuro              */

  /* --- Acento: Bronce (máx. ~5 % de la superficie) --------------------- */
  --bronce-300: #C9AB7A;
  --bronce-500: #A0804F;
  --bronce-700: #7D6238;

  /* --- Estados ---------------------------------------------------------- */
  --exito-claro:  #3F6B4A;  --exito-oscuro:  #8DBF98;
  --aviso-claro:  #8A6420;  --aviso-oscuro:  #E0B866;
  --error-claro:  #9B3B32;  --error-oscuro:  #E89A90;

  /* --- Tokens semánticos: TEMA CLARO ----------------------------------- */
  --color-bg:             var(--granito-50);
  --color-surface:        #FFFFFF;
  --color-surface-alt:    var(--granito-100);
  --color-border:         var(--granito-200);
  --color-border-strong:  var(--granito-300);
  --color-text:           var(--granito-900);
  --color-text-muted:     var(--granito-600);
  --color-text-subtle:    var(--granito-400);
  --color-primary:        var(--granito-800);
  --color-primary-hover:  var(--granito-900);
  --color-on-primary:     var(--granito-50);
  --color-accent:         var(--bronce-700);
  --color-accent-soft:    var(--bronce-500);
  --color-success:        var(--exito-claro);
  --color-warning:        var(--aviso-claro);
  --color-danger:         var(--error-claro);
  --color-logo:           var(--granito-800);

  /* Chat (mockups del agente de WhatsApp) */
  --chat-bg:              var(--granito-100);
  --chat-in-bg:           #FFFFFF;              /* mensaje del cliente  */
  --chat-in-text:         var(--granito-900);
  --chat-out-bg:          var(--granito-800);   /* respuesta del agente */
  --chat-out-text:        var(--granito-50);

  color-scheme: light;
}

/* --- TEMA OSCURO: automático según el sistema -------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:             var(--granito-950);
    --color-surface:        var(--granito-900);
    --color-surface-alt:    var(--granito-800);
    --color-border:         var(--granito-700);
    --color-border-strong:  var(--granito-600);
    --color-text:           var(--granito-100);
    --color-text-muted:     var(--granito-300);
    --color-text-subtle:    var(--granito-500);
    --color-primary:        var(--granito-200);
    --color-primary-hover:  var(--granito-100);
    --color-on-primary:     var(--granito-950);
    --color-accent:         var(--bronce-300);
    --color-accent-soft:    var(--bronce-500);
    --color-success:        var(--exito-oscuro);
    --color-warning:        var(--aviso-oscuro);
    --color-danger:         var(--error-oscuro);
    --color-logo:           var(--granito-100);
    --chat-bg:              var(--granito-950);
    --chat-in-bg:           var(--granito-800);
    --chat-in-text:         var(--granito-100);
    --chat-out-bg:          var(--granito-200);
    --chat-out-text:        var(--granito-950);
    color-scheme: dark;
  }
}

/* --- TEMA OSCURO: forzado manualmente ---------------------------------- */
:root[data-theme="dark"] {
  --color-bg:             var(--granito-950);
  --color-surface:        var(--granito-900);
  --color-surface-alt:    var(--granito-800);
  --color-border:         var(--granito-700);
  --color-border-strong:  var(--granito-600);
  --color-text:           var(--granito-100);
  --color-text-muted:     var(--granito-300);
  --color-text-subtle:    var(--granito-500);
  --color-primary:        var(--granito-200);
  --color-primary-hover:  var(--granito-100);
  --color-on-primary:     var(--granito-950);
  --color-accent:         var(--bronce-300);
  --color-accent-soft:    var(--bronce-500);
  --color-success:        var(--exito-oscuro);
  --color-warning:        var(--aviso-oscuro);
  --color-danger:         var(--error-oscuro);
  --color-logo:           var(--granito-100);
  --chat-bg:              var(--granito-950);
  --chat-in-bg:           var(--granito-800);
  --chat-in-text:         var(--granito-100);
  --chat-out-bg:          var(--granito-200);
  --chat-out-text:        var(--granito-950);
  color-scheme: dark;
}

/* --- Tipografía ---------------------------------------------------------
   Display: Space Grotesk — títulos y logotipo (geométrica, tecnológica).
   Texto:   Inter — cuerpo, UI y formularios.
   Mono:    JetBrains Mono — etiquetas, datos, fragmentos de código.
   <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet">
   ----------------------------------------------------------------------- */
:root {
  --font-display: "Space Grotesk", "Inter", -apple-system, "Segoe UI", Arial, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --text-4xl:  3rem;

  --tracking-display: -0.01em;  /* títulos */
  --tracking-label:   0.14em;   /* etiquetas en mayúsculas */

  /* Forma: esquinas casi rectas, como sillares de piedra */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;

  --shadow-sm: 0 1px 2px rgb(19 19 18 / 0.08);
  --shadow-md: 0 4px 12px rgb(19 19 18 / 0.10);
}