/*
 * Brand (skin): Aljibe, light mode (manual v02, "Paleta de uso" of the kit GUIA).
 *
 * aljibe.css and fuentes/ are copied unchanged from the brand kit
 * (~/Workspace/kit-marca/aljibe/, "Copiar" recipe); this file only maps the kit
 * tokens (--al-*) to the semantic variables that static/css/app.css uses.
 *
 * Contrast (kit GUIA, WCAG 2.x, truncated): dark on light 12.01, dark on white
 * 13.80, light on dark 12.01 (footer), white on turquoise-text 5.20 (buttons),
 * turquoise-text on light 4.53 and on white 5.20 (accent text, meta), orange-text
 * on light 4.52 (errors), red on light 6.20 (notices). Turquoise #029990 only for
 * non-text elements (borders, focus, toggle: 3.06 on light, 3.91 on dark).
 * The logo red #CA120A stays inside the logo files; it is never used here.
 * Values marked "derived" are tints of kit colours, not kit tokens.
 */
@import url("aljibe.css");
@import url("carga.css"); /* waiting animation of carga.svg (brand.json "loader") */

:root {
  color-scheme: light;

  /* Surfaces and text */
  --c-bg: var(--al-claro);
  --c-surface: var(--al-blanco);               /* kit: background of cards and fields */
  --c-input-bg: var(--al-blanco);
  --c-dialog-bg: var(--al-claro);
  --c-backdrop: rgba(41, 45, 53, 0.85);        /* derived: --al-oscuro at 85 % */
  --c-footer-bg: var(--al-oscuro);             /* kit: dark background for footer and blocks */
  --c-footer-text: var(--al-claro);
  --c-text: var(--al-oscuro);
  --c-muted: var(--al-oscuro);                 /* the kit has no grey for text */
  --c-meta: var(--al-turquesa-texto);          /* kit: meta texts (dates, labels) in turquoise-text */

  /* Accent */
  --c-accent: var(--al-turquesa);              /* non-text only: borders, focus, toggle */
  --c-accent-text: var(--al-turquesa-texto);
  --c-accent-border: var(--al-turquesa);       /* 3:1 for component borders */
  --c-accent-tint: rgba(2, 153, 144, 0.08);    /* derived: turquoise tint */
  --c-accent-tint-strong: rgba(2, 153, 144, 0.16);
  --c-on-accent: var(--al-blanco);
  --c-focus: var(--al-turquesa);
  --c-deco: var(--al-turquesa-texto);          /* the "←" of the back link */
  --c-mark: var(--al-tinte-turquesa);          /* kit: colour at 40 % with dark text */
  --c-mark-text: var(--al-oscuro);

  /* Links (manual p. 9): text colour, turquoise underline; active turquoise
     text (its AA tone). Hover: the manual puts dark text on solid turquoise
     (3.91, below AA; the GUIA allows overriding it), so the hover background
     is the kit's turquoise tint at 40 % instead (dark text on it > 6:1;
     light text on it over the dark footer about 7:1). */
  --c-link: var(--al-oscuro);
  --c-link-underline: var(--al-turquesa);
  --c-link-hover: var(--al-oscuro);
  --c-link-hover-bg: var(--al-tinte-turquesa);
  --c-link-hover-underline: var(--al-oscuro);
  --c-link-active: var(--al-turquesa-texto);
  --c-link-on-dark: var(--al-claro);           /* footer */
  --c-link-on-dark-underline: var(--al-turquesa);
  --c-link-on-dark-hover: var(--al-claro);
  --c-link-on-dark-hover-bg: var(--al-tinte-turquesa);
  --link-offset: 3px;
  --link-hover-thickness: 1px;

  /* Buttons (manual p. 9, accessible variant of the kit): small caps of
     Inclusive Sans Bold; hover shows a dark border; click, dark background */
  --c-button-bg: var(--al-turquesa-texto);
  --c-button-text: var(--al-blanco);
  --c-button-border: var(--al-turquesa-texto);
  --c-button-hover-border: var(--al-oscuro);
  --c-button-active-bg: var(--al-oscuro);
  --button-case: uppercase;
  --button-spacing: 0.02em;

  /* States */
  --c-error: var(--al-naranja-texto);
  --c-warn: var(--al-rojo);                    /* kit: notices and alerts */
  --c-warn-tint: rgba(165, 43, 0, 0.06);       /* derived: red tint */
  --c-border: var(--al-oscuro);                /* kit: fields carry a dark border */
  --c-line: var(--al-borde);
  --c-line-soft: var(--al-borde);
  --c-line-faint: var(--al-borde);

  /* Type: Inclusive Sans (titles Bold 700, text Regular 400), Roboto Mono for meta */
  --f-text: var(--al-font-texto);
  --f-title: var(--al-font-titulo);
  --f-mono: var(--al-font-meta);
  --w-title: 700;
  --ls-title: normal;
  --lh-title: 1.2;
  --lh-subtitle: 1.2;
  --deco-heading: "";
  --deco-back: "\2190\00a0";                   /* manual p. 9: "← Volver" */

  /* Geometry */
  --radius: var(--al-radio);
  --radius-large: var(--al-radio-grande);
  --radius-pill: var(--al-radio-pildora);
}