/* Tokens de diseño · Sabika Software
   Dirección B «Tapial y alicatado», segunda versión: mucho aire, verde de bosque de la Alhambra,
   granate del logo, ilustración de línea propia y lacería solo como celosía. Tipografía: Bricolage Grotesque. */

@font-face{
  font-family:"Bricolage Grotesque";
  src:url(/fonts/bricolage-latin.woff2) format("woff2");
  font-weight:400 800;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* superficies */
  --bg:#f6f5f1;          /* cal */
  --surface:#ffffff;
  --rule:#d5d8d2;        /* junta de la retícula */
  /* texto */
  --ink:#18201b;
  --ink-soft:#56605a;
  /* bosque */
  --forest:#1e3a2b;
  --forest-ink:#f6f5f1;
  --forest-soft:#b9c9bd;
  /* marca y acciones */
  --brand:#8a1218;
  --brand-ink:#ffffff;
  --lattice:#8a1218;
  /* tintes de ilustración */
  --brand-tint:#f4e1e1;
  --forest-tint:#dfe8e1;
  /* estados */
  --focus:#1d4f91;
  --ok:#2c6b45;
  --warn:#8a1218;
  --error:#a3141c;
  --error-bg:#fbeceb;
  --ok-bg:#e8f2ec;

  /* tipografía */
  --font:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --fs-body:1.0625rem;
  --fs-lead:1.2rem;
  --fs-h1:clamp(2.3rem,4.6vw,3.9rem);
  --fs-h2:clamp(1.8rem,3.2vw,2.6rem);
  --fs-h3:1.3rem;
  --fs-small:.875rem;
  --fs-label:.8rem;        /* etiquetas en versalitas */
  --track-label:.12em;

  /* espacio y forma */
  --pad:clamp(24px,4.4vw,56px);
  --gutter:24px;
  --maxw:1240px;
  --radius-control:2px;    /* controles de formulario */
  --radius-bubble:0 10px 10px 10px; /* solo burbujas de chat ilustrativas */
  --radius-panel:14px;     /* escenario del ejemplo y formulario */
  --space-section:clamp(104px,13vw,184px);

  /* movimiento */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-draw:cubic-bezier(.65,0,.35,1);
}

@media (prefers-color-scheme:dark){
  :root{
    --bg:#121614;
    --surface:#1a201c;
    --rule:#2c3530;
    --ink:#e9ece8;
    --ink-soft:#a3aca5;
    --forest:#1c3426;
    --forest-ink:#eef1ec;
    --forest-soft:#9fb5a5;
    --brand:#db5e65;
    --brand-ink:#121614;
    --lattice:#c45a60;
    --brand-tint:#3a2023;
    --forest-tint:#1f3328;
    --focus:#8fb4ff;
    --ok:#7cc495;
    --warn:#db5e65;
    --error:#f08a8f;
    --error-bg:#2a1718;
    --ok-bg:#16261c;
  }
}