/* Synced from brand/tokens.css (v1.1, 11 Oct 2026). @font-face lives in styles.css (woff2). Edit brand/tokens.css, then re-sync. */
/* Facilita and Quedó design tokens (brand/IDENTITY.md has the rules).
   v1.1 · 11 Oct 2026. Import once; set data-brand="quedo" on a container to switch it to Quedó.
   v1.1 changes: IBM Plex Sans for all text (Albert Sans stays only inside the outlined Facilita logo);
   Papel and Calca removed; the one light surface is Tinte #E9EDF3, everything else is white.

   Fonts: copy the files from brand/fonts/ next to your CSS (or adjust the url() paths below).
   IBM Plex Sans and Archivo are SIL OFL 1.1 (license files in brand/fonts/). Self-host; don't hotlink Google Fonts.
   On the web, use ibm-plex-sans-latin.woff2 (45 KB, weights 100-700, latin subset).

   Contrast (WCAG 2.x), checked 11 Oct 2026:
     Overol on white 13.6 · on Tinte 11.6                          (AAA)
     Grafito on white 14.8 · on Tinte 12.6                         (AAA)
     Lápiz on white 6.0 · on Tinte 5.1                             (AA body text)
     Naranja texto on white 5.7 · on Tinte 4.8                     (AA body text; white on it 5.7)
     Naranja on white 3.6 · on Tinte 3.05 · on Overol 3.8          (graphics and LARGE text only:
       white on Naranja 3.6                                         >= 24px, or >= 18.66px bold)
     Niebla on Overol 7.7                                          (secondary text on dark)
     Overol profundo on white 17.0                                 (AAA)
     Naranja on Overol profundo 4.7 · Niebla on it 9.5             (AA: orange text is fine on Quedó dark surfaces)
     Línea on Tinte 1.07: borders vanish on Tinte; put white cards on it, not outlined boxes */


:root {
  /* ---- palette (shared by the suite) */
  --overol: #1F2D4D;          /* Facilita's dark: symbol, name, headings, dark surfaces */
  --overol-profundo: #141C30; /* Quedó's dark: the deeper tone of the same family */
  --naranja: #E8590C;         /* the software / the product: badge, Quedó, icons, large text */
  --naranja-texto: #B3420A;   /* orange for links, small text and buttons with white text */
  --grafito: #24282C;         /* body text only */
  --lapiz: #5B6470;           /* secondary text, captions */
  --niebla: #B9C3D3;          /* secondary text on Overol */
  --tinte: #E9EDF3;           /* the one light surface (a tint of Overol): alternating bands, hovers */
  --blanco: #FFFFFF;
  --linea: #E1E6EB;           /* hairlines and borders on light backgrounds */

  /* ---- semantic roles (Facilita default) */
  --color-bg: var(--blanco);
  --color-surface: var(--tinte);
  --color-heading: var(--overol);
  --color-text: var(--grafito);
  --color-text-muted: var(--lapiz);
  --color-link: var(--naranja-texto);
  --color-accent: var(--naranja);
  --color-action-bg: var(--overol);          /* primary button: Overol with white text (13.6) */
  --color-action-text: var(--blanco);
  --color-action-alt-bg: var(--naranja-texto);/* secondary/attention button: white text (5.7) */
  --color-on-dark: var(--blanco);
  --color-on-dark-muted: var(--niebla);
  --color-border: var(--linea);
  --color-focus: var(--naranja);              /* focus ring: 2px, offset 2px (non-text 3:1 met on white and Overol) */

  /* ---- type */
  --font-text: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-quedo: "Archivo", "IBM Plex Sans", system-ui, sans-serif;
  --font-body: var(--font-text);
  --font-heading: var(--font-text);
  /* Albert Sans is only the Facilita wordmark, which ships outlined in the logo SVGs: no web font needed. */
  --weight-body: 400;
  --weight-medium: 500;
  --weight-heading: 600;         /* Plex goes to 700; 600 is the heading weight, 700 for short emphasis */
  --tracking-heading: -0.015em;  /* large headings; open to 0 below 20px */
  --leading-body: 1.55;
  --leading-heading: 1.12;
  /* scale (1.25), rem at 16px */
  --text-xs: 0.8rem;    /* 12.8 */
  --text-sm: 0.875rem;  /* 14 */
  --text-md: 1rem;      /* 16 */
  --text-lg: 1.25rem;   /* 20 */
  --text-xl: 1.5625rem; /* 25 */
  --text-2xl: 1.953rem; /* 31 */
  --text-3xl: 2.441rem; /* 39 */
  --text-4xl: 3.052rem; /* 49 */
  --text-5xl: 3.815rem; /* 61 */
  --measure: 66ch;      /* max line length for running text */

  /* ---- space (4px base) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;

  /* ---- shape. Brand rule: structure is straight, software is round. */
  --radius-structure: 2px;   /* panels, tables, rules, cards: nearly square */
  --radius-control: 8px;     /* buttons, inputs */
  --radius-pill: 999px;      /* status chips, the "dot" */
  --radius-app-icon: 22.9%;  /* app icon tiles (Quedó) */

  /* ---- logo sizes (see brand/facilita/logo/README.md) */
  --logo-nav-height: 30px;   /* facilita-logo.svg height in the site header */
  --logo-min-width: 100px;   /* below this use the symbol alone */
}

/* Quedó surfaces: same palette, its own type. Light surfaces are white (the report sheet too). */
[data-brand="quedo"] {
  --color-heading: var(--overol-profundo);
  --color-dark-surface: var(--overol-profundo);
  --color-bg: var(--blanco);
  --color-surface: var(--blanco);
  --font-heading: var(--font-quedo);
  --heading-stretch: 112%;
  --weight-heading: 800;
  --tracking-heading: -0.02em;
  --color-action-bg: var(--naranja-texto); /* app buttons: orange family; use --naranja only at >= 18.66px bold */
}
[data-brand="quedo"] :is(h1, h2, h3) {
  font-family: var(--font-quedo);
  font-stretch: var(--heading-stretch);
  font-weight: var(--weight-heading);
}