/* ===========================================================================
   Arrenda1 — brand pack para Twenty CRM
   ---------------------------------------------------------------------------
   Reescribe los design tokens `--t-*` que Twenty define en `.light` / `.dark`.
   Nuestro selector es `html.light` / `html.dark` (especificidad 0,1,1) para
   ganarle tanto al bloque base como al bloque `@supports (display-p3)`, que
   usa la misma especificidad que el base.

   Este archivo SOLO toca tokens. Es estable frente a upgrades de Twenty:
   mientras el sistema de tokens siga existiendo, sigue funcionando. El CSS
   frágil (ocultar elementos concretos) vive aparte, en `hide.css`.

   Paleta: rampa Radix de 12 pasos anclada en el logo de Arrenda1.
     paso 9  = #6365B8  periwinkle  (color sólido: botones, focus, links)
     paso 12 = #12063D  navy        (texto de máximo contraste)
   =========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap");

/* ---------------------------------------------------------------------------
   1. Tema claro
   --------------------------------------------------------------------------- */
html.light {
  /* Rampa de acento — 12 pasos, semántica Radix.
     1-2 fondos · 3-5 fondos de componente · 6-8 bordes · 9-10 sólidos · 11-12 texto */
  --t-accent-accent1: #fcfcfe;
  --t-accent-accent2: #f8f8fd;
  --t-accent-accent3: #f0f0fa;
  --t-accent-accent4: #e7e8f5;
  --t-accent-accent5: #dcdef0;
  --t-accent-accent6: #cfd1e9;
  --t-accent-accent7: #bdc0df;
  --t-accent-accent8: #a3a7d0;
  --t-accent-accent9: #6365b8;
  --t-accent-accent10: #585ba8;
  --t-accent-accent11: #4f5296;
  --t-accent-accent12: #12063d;

  /* Alias semánticos de la rampa (Twenty los mapea a los pasos 5, 3 y 2). */
  --t-accent-primary: #dcdef0;
  --t-accent-secondary: #dcdef0;
  --t-accent-tertiary: #f0f0fa;
  --t-accent-quaternary: #f8f8fd;
  --t-accent-accent3570: #a3a7d0;
  --t-accent-accent4060: #a3a7d0;

  /* Superficies: un susurro de navy sobre el gris neutro de Twenty.
     Suficiente para que no lea como gris de sistema, lejos de teñir la app. */
  --t-background-secondary: #fcfcfd;
  --t-background-tertiary: #f2f2f6;
  --t-background-quaternary: #ececf3;

  /* Bordes: mismo susurro, para que casen con las superficies. */
  --t-border-color-light: #f1f1f6;
  --t-border-color-medium: #e9e9f1;
  --t-border-color-strong: #d4d4e2;

  /* Estados de selección/foco y acento semántico.
     `--t-color-blue` es el alias que Twenty usa para el BOTÓN PRIMARIO y los
     links — es la superficie de marca más visible de la app, así que apunta al
     periwinkle. La rampa numérica `--t-color-blue1…12` y los tokens de tag
     (`--t-tag-background-blue`, `--t-tag-text-blue`) NO se tocan: son la paleta
     con nombre, y una etiqueta llamada "Azul" tiene que verse azul. */
  --t-color-blue: #6365b8;
  --t-border-color-blue: #bdc0df;
  --t-background-transparent-blue: #12063d12;

  /* Sombras teñidas de navy en vez de negro puro: el objeto proyecta el color
     de la marca, no un gris de sistema. Mismas geometrías que Twenty. */
  --t-box-shadow-color: #12063d0f;
  --t-box-shadow-light: 0px 2px 4px 0px #12063d0d, 0px 0px 4px 0px #12063d14;
  --t-box-shadow-strong: 2px 4px 16px 0px #12063d24, 0px 2px 4px 0px #12063d14;
  --t-box-shadow-super-heavy: 0px 0px 8px 0px #12063d29,
    0px 8px 64px -16px #12063d66, 0px 24px 56px -16px #12063d14;
}

/* ---------------------------------------------------------------------------
   2. Tema oscuro
   --------------------------------------------------------------------------- */
html.dark {
  /* En oscuro la rampa se invierte, salvo el paso 9: el color sólido de marca
     es idéntico en ambos temas (convención Radix) para que el botón primario
     sea reconociblemente Arrenda1 en los dos. */
  --t-accent-accent1: #131320;
  --t-accent-accent2: #171728;
  --t-accent-accent3: #1e1f3d;
  --t-accent-accent4: #24264e;
  --t-accent-accent5: #2b2d5d;
  --t-accent-accent6: #34366c;
  --t-accent-accent7: #40427f;
  --t-accent-accent8: #52549b;
  --t-accent-accent9: #6365b8;
  --t-accent-accent10: #7476c6;
  --t-accent-accent11: #a9abe4;
  --t-accent-accent12: #dcddf5;

  --t-accent-primary: #2b2d5d;
  --t-accent-secondary: #2b2d5d;
  --t-accent-tertiary: #1e1f3d;
  --t-accent-quaternary: #171728;
  --t-accent-accent3570: #52549b;
  --t-accent-accent4060: #52549b;

  /* Superficies oscuras: tinte mínimo. Más navy aquí lee como morado sucio. */
  --t-background-primary: #16161c;
  --t-background-secondary: #1a1a21;
  --t-background-tertiary: #1c1c24;
  --t-background-quaternary: #21212a;

  --t-color-blue: #6365b8;
  --t-border-color-blue: #40427f;
  --t-background-transparent-blue: #6365b81f;

  /* En oscuro la sombra sigue siendo negra: teñirla de navy no se percibe y
     ensucia el borde del objeto. Solo se refuerza la opacidad. */
  --t-box-shadow-color: #00000099;
}

/* ---------------------------------------------------------------------------
   3. Tipografía, radios y sombras — comunes a los dos temas
   --------------------------------------------------------------------------- */
html.light,
html.dark {
  /* Misma familia que el Onboarding de Arrenda1 → un solo producto.
     El mono (`--t-code-font-family`, DM Mono) se queda: es para datos. */
  --t-font-family: "Manrope", Inter, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Radios ligeramente más suaves que los 2/4/8 de Twenty.
     No mueven nada de sitio → cero riesgo en tablas densas. */
  --t-border-radius-xs: 3px;
  --t-border-radius-sm: 6px;
  --t-border-radius-md: 10px;
  --t-border-radius-xl: 22px;
}

/* Twenty escribe `font-family: Inter` literal en la regla `body`, sin pasar por
   el token. Sus componentes sí usan `--t-font-family`, así que la mayoría de la
   app ya sale en Manrope; esto arregla lo que hereda directo del body. Misma
   especificidad que la regla original, pero cargamos después → ganamos. */
body {
  font-family: var(--t-font-family);
}