/* Design tokens of the redesign (plan 4.1), linked first by index.html, before estilos-osint.css.

   1. @font-face of the three brand families, vendored under vendor/fonts/ (OFL-ibm-plex.txt, OFL-source-serif-4.txt) and
      never fetched from the network: IBM Plex Sans 400, 400 italic, 500, 600, 700 (IBM/plex, @ibm/plex-sans 1.1.0);
      IBM Plex Mono 400, 500, 600 (@ibm/plex-mono 2.5.0); Source Serif 4 400, 600, 600 italic, 700 (adobe-fonts/source-serif
      4.005R, the text optical size). Manrope and DM Mono stay in estilos-osint.css for the canvas of the loading animation.
   2. The design proposal's assets/tokens.css (lampyre/docs/propuesta-grafica/, beside this repository) verbatim, without
      its first line (the import of the web font service): light values on :root, dark values on [data-theme="dark"],
      and reduced motion zeroing the durations.
   3. Density: [data-densidad="compacta"] (plan 4.1).

   index.html sets data-theme (ev-tema, default dark) and data-densidad (ev-densidad, default comoda) on <html> before the
   first paint. tests/osint3/tema-tokens.test.js holds this file to the prototype's tokens. */

@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('./vendor/fonts/ibm-plex-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('./vendor/fonts/ibm-plex-sans-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('./vendor/fonts/ibm-plex-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('./vendor/fonts/ibm-plex-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('./vendor/fonts/ibm-plex-sans-700.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('./vendor/fonts/ibm-plex-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('./vendor/fonts/ibm-plex-mono-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('./vendor/fonts/ibm-plex-mono-600.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap; src: url('./vendor/fonts/source-serif-4-400.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 600; font-display: swap; src: url('./vendor/fonts/source-serif-4-600.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 600; font-display: swap; src: url('./vendor/fonts/source-serif-4-600-italic.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 700; font-display: swap; src: url('./vendor/fonts/source-serif-4-700.woff2') format('woff2'); }

/* ---- lampyre/docs/propuesta-grafica/assets/tokens.css, verbatim below this line (its web font import removed) ---- */

/*
  Expediente Vivo design tokens.
  Light values live on :root; [data-theme="dark"] overrides them.
  Every page of the proposal (prototype and documents) links this file first.
*/

:root {
  /* Brand ramps */
  --ev-petroleo-900: #06363B;
  --ev-petroleo-700: #0D5C63;
  --ev-petroleo-500: #13808A;
  --ev-petroleo-300: #5BB7BC;
  --ev-petroleo-100: #DCEBEB;
  --ev-chispa: #9FE3E6;
  --ev-tinta-900: #101923;
  --ev-tinta-700: #3D4A57;
  --ev-niebla-500: #66757F;
  --ev-niebla-300: #C7D0D7;
  --ev-niebla-200: #DFE5E9;
  --ev-niebla-100: #EEF2F5;
  --ev-papel: #F7F9FA;
  --ev-blanco: #FFFFFF;
  --ev-noche-950: #0A1016;
  --ev-noche-900: #0F1720;
  --ev-noche-800: #152130;
  --ev-noche-700: #1E2C3C;
  --ev-noche-600: #2A3A4D;

  /* Roles, light theme */
  --ev-bg: var(--ev-papel);
  --ev-surface: var(--ev-blanco);
  --ev-surface-2: var(--ev-niebla-100);
  --ev-surface-3: var(--ev-niebla-200);
  --ev-border: var(--ev-niebla-200);
  --ev-border-strong: var(--ev-niebla-300);
  --ev-text: var(--ev-tinta-900);
  --ev-text-2: var(--ev-tinta-700);
  --ev-text-3: var(--ev-niebla-500);
  --ev-brand: var(--ev-petroleo-700);
  --ev-brand-hover: var(--ev-petroleo-900);
  --ev-brand-soft: var(--ev-petroleo-100);
  --ev-on-brand: #FFFFFF;
  --ev-focus: var(--ev-petroleo-500);
  --ev-overlay: rgba(10, 16, 22, 0.45);
  --ev-stage: #F1F5F7;
  --ev-stage-grid: rgba(16, 25, 35, 0.05);

  /* Semantic colors: reserved for verdicts, alerts and states */
  --ev-ok: #177A54;       --ev-ok-soft: #DDF3EA;
  --ev-doubt: #9A6210;    --ev-doubt-soft: #F7EAD2;
  --ev-bad: #C0392B;      --ev-bad-soft: #F8E1DE;
  --ev-info: #2563EB;     --ev-info-soft: #E0EAFD;
  --ev-neutral: #66757F;  --ev-neutral-soft: #EEF2F5;

  /* Entity type palette (graph, chips, map pins) */
  --ev-t-persona: #0E7C86;
  --ev-t-org: #6D4AE0;
  --ev-t-contacto: #C2327A;
  --ev-t-doc: #5B6B7A;
  --ev-t-lugar: #2563EB;
  --ev-t-otro: #7A8794;

  /* Typography */
  --ev-font-ui: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --ev-font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --ev-font-doc: "Source Serif 4", Georgia, "Times New Roman", serif;
  --ev-fs-2xs: 10.5px;
  --ev-fs-xs: 11.5px;
  --ev-fs-sm: 12.5px;
  --ev-fs-base: 14px;
  --ev-fs-md: 16px;
  --ev-fs-lg: 20px;
  --ev-fs-xl: 26px;
  --ev-fs-2xl: 34px;
  --ev-fs-3xl: 48px;
  --ev-lh: 1.45;
  --ev-lh-tight: 1.15;
  --ev-tracking-caps: 0.07em;

  /* Space, radius, elevation */
  --ev-s1: 4px;
  --ev-s2: 8px;
  --ev-s3: 12px;
  --ev-s4: 16px;
  --ev-s5: 20px;
  --ev-s6: 24px;
  --ev-s8: 32px;
  --ev-s10: 40px;
  --ev-s12: 48px;
  --ev-s16: 64px;
  --ev-r-sm: 6px;
  --ev-r-md: 10px;
  --ev-r-lg: 14px;
  --ev-r-pill: 999px;
  --ev-shadow-1: 0 1px 2px rgba(16, 25, 35, 0.06), 0 1px 1px rgba(16, 25, 35, 0.04);
  --ev-shadow-2: 0 6px 18px rgba(16, 25, 35, 0.10);
  --ev-shadow-3: 0 18px 48px rgba(16, 25, 35, 0.18);

  /* Motion */
  --ev-dur-1: 120ms;
  --ev-dur-2: 200ms;
  --ev-dur-3: 380ms;
  --ev-dur-firma: 900ms;
  --ev-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ev-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layers */
  --ev-z-nav: 20;
  --ev-z-dock: 30;
  --ev-z-drawer: 40;
  --ev-z-modal: 50;
  --ev-z-toast: 60;
  --ev-z-palette: 70;

  /* Shell metrics */
  --ev-rail: 64px;
  --ev-rail-open: 224px;
  --ev-topbar: 52px;
  --ev-ficha: 360px;
  --ev-lateral: 280px;
  --ev-dock: 40px;
}

[data-theme="dark"] {
  --ev-bg: var(--ev-noche-950);
  --ev-surface: var(--ev-noche-900);
  --ev-surface-2: var(--ev-noche-800);
  --ev-surface-3: var(--ev-noche-700);
  --ev-border: #1B2735;
  --ev-border-strong: var(--ev-noche-600);
  --ev-text: #E6EDF3;
  --ev-text-2: #A9B6C3;
  --ev-text-3: #75879A;
  --ev-brand: var(--ev-petroleo-300);
  --ev-brand-hover: #7FCBCF;
  --ev-brand-soft: #123036;
  --ev-on-brand: #06262A;
  --ev-focus: var(--ev-petroleo-300);
  --ev-overlay: rgba(2, 6, 10, 0.62);
  --ev-stage: #0B131B;
  --ev-stage-grid: rgba(230, 237, 243, 0.035);

  --ev-ok: #3DD6A3;       --ev-ok-soft: #10302A;
  --ev-doubt: #F5B84B;    --ev-doubt-soft: #33270F;
  --ev-bad: #F07167;      --ev-bad-soft: #3A1A18;
  --ev-info: #6AA8FF;     --ev-info-soft: #14243F;
  --ev-neutral: #94A3B8;  --ev-neutral-soft: #1A2533;

  --ev-t-persona: #4FB3BF;
  --ev-t-org: #A78BFA;
  --ev-t-contacto: #F472B6;
  --ev-t-doc: #94A3B8;
  --ev-t-lugar: #60A5FA;
  --ev-t-otro: #CBD5E1;

  --ev-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40);
  --ev-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45);
  --ev-shadow-3: 0 24px 64px rgba(0, 0, 0, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ev-dur-1: 0ms;
    --ev-dur-2: 0ms;
    --ev-dur-3: 0ms;
    --ev-dur-firma: 0ms;
  }
}

/* ---- end of the verbatim copy ---- */

/* Density (plan 4.1): <html data-densidad="comoda|compacta">, the prototype's attribute and values, remembered under
   ev-densidad (default comoda). Compact takes the base text to 13 px, the 16 px step to 12 px and every row height to 0.88
   of its size: a row is written as calc(<height> * var(--ev-density-row)). */
:root {
  --ev-density-row: 1;
}

[data-densidad="compacta"] {
  --ev-fs-base: 13px;
  --ev-s4: 12px;
  --ev-density-row: 0.88;
}