/* THE TOKENS OF THE LIGHT AND THE DARK LOOK (brief D, 2026-10-03). Linked before every other stylesheet of the signed-in app (inc/header.php).
 *
 * Light is what the app has always looked like: every token below holds the colour that was written in the stylesheets, and each use says so itself - var(--vk-text, #16161a) -
 * so a page that does not load this file (the public home, a client's web, the login: view/css/vk_waves.css and vk_brand.css are shared with them) looks as it always did.
 * Dark is the palette he approved on 2026-10-01 (_project/briefs/2026-10-01-dark-mode-palette.md), under html[data-theme="dark"]. The attribute is written by inc/header.php from the
 * account's own choice (vk_user_prefs `ui.theme`) and flipped at once by view/js/vk_theme.js when the switch in the right-hand bar is clicked.
 *
 * A token is one ROLE of a colour. Where the stylesheets wrote several light colours for one role (five soft greys, four fill greys) each keeps its own token - --vk-soft-6b6a76 and so on,
 * named after the colour it was - so light does not move by a unit, and in dark every one of them is the role's colour. His brand colours are NOT here: --vk-main, --vk-brand and the inline
 * block of view/custom/styles_custom.php stay his, light or dark; view/css/vk_dark.css, which paints the old stylesheets, is linked before that block so his colours win - except where his
 * mockup of 2026-10-03 puts the frame's grey in their place (the header, the right-hand bar, the header's search, the sidebar's «Nuevo»: the last section of vk_dark.css).
 *
 * 2026-10-03, HIS MOCKUP: he lightened the whole dark interface ("¡sí! lo he aclarado. solo la UI! las fotos déjalas como estaban"). Every dark value below went through the curve read
 * from his picture value by value (the page #121216 became #17171c, the surfaces #17171c became #1e1e24, the violet tint #2a2140 became #362b51, the text #ecebf2 became #f1f0f5...);
 * pictures are not drawn with these tokens, so they are as they were. The values named in the paragraph below are the ones before that lift.
 *
 * The -rgb tokens are the three channels of a colour, for the translucent forms: rgba(var(--vk-surface-rgb, 255, 255, 255), .45).
 * Colours that are not in his palette, added by this build (the dark values): raised #1c1c22, fieldh #2e2e38, line-soft #25252d, line-strong #3d3d49, faint #8c8b9a, ok #4cc38a, warn #f0b04b,
 * the tints behind status text (violet-tint #2a2140, err-tint #3a1c1c, ok-tint #1c3326, warn-tint #3a2f1a, accent-tint #1e2547), their lines (violet-line #5b4a86, err-line #5c2d2d, ok-line #2c5a40,
 * warn-line #5a4a22, accent-line #2d3a73) and inv / invh, the dark pills (the field and the line colours). */
:root{
    color-scheme: light;
    /* The page and its surfaces */
    --vk-page: #e6e6e6;
    --vk-surface: #ffffff;
    --vk-raised: #fbfafd;
    --vk-raised-faf9fc: #faf9fc;
    --vk-raised-fbfbfd: #fbfbfd;
    --vk-raised-fcfcfe: #fcfcfe;
    --vk-raised-fdfbff: #fdfbff;
    --vk-field: #efeef4;
    --vk-field-eeedf3: #eeedf3;
    --vk-field-f0eff5: #f0eff5;
    --vk-field-f1f0f5: #f1f0f5;
    --vk-field-f1f1f4: #f1f1f4;
    --vk-field-f3f2f6: #f3f2f6;
    --vk-field-f4f3f7: #f4f3f7;
    --vk-field-f4f3f8: #f4f3f8;
    --vk-field-f6f5f9: #f6f5f9;
    --vk-field-f6f5fa: #f6f5fa;
    --vk-field-f7f6fa: #f7f6fa;
    --vk-field-f7f7fa: #f7f7fa;
    --vk-fieldh: #e9e8ee;
    --vk-fieldh-e4e2ea: #e4e2ea;
    --vk-fieldh-e4e3ea: #e4e3ea;
    --vk-fieldh-e7e5ee: #e7e5ee;
    --vk-fieldh-e7e7ee: #e7e7ee;
    --vk-fieldh-e8e6ee: #e8e6ee;
    --vk-fieldh-e9e8ef: #e9e8ef;
    --vk-fieldh-eae8f0: #eae8f0;
    --vk-fieldh-eaeaea: #eaeaea;
    --vk-fieldh-ffffff: #ffffff;
    /* Lines */
    --vk-line-soft: #efeef4;
    --vk-line-soft-ecebf2: #ecebf2;
    --vk-line-soft-f3f2f6: #f3f2f6;
    --vk-line: #e4e3ea;
    --vk-line-d9d8e2: #d9d8e2;
    --vk-line-d9d9e3: #d9d9e3;
    --vk-line-dddce5: #dddce5;
    --vk-line-e4e3ec: #e4e3ec;
    --vk-line-strong: #cfcdd9;
    --vk-line-strong-c9c8d2: #c9c8d2;
    --vk-line-strong-cfcde0: #cfcde0;
    --vk-line-strong-cfcfd8: #cfcfd8;
    --vk-line-strong-d6d4e0: #d6d4e0;
    --vk-line-strong-d9d8e0: #d9d8e0;
    /* Text */
    --vk-text: #16161a;
    --vk-text-2c2b33: #2c2b33;
    --vk-soft: #5f5e6b;
    --vk-soft-3b3a46: #3b3a46;
    --vk-soft-3c3b46: #3c3b46;
    --vk-soft-4d4c58: #4d4c58;
    --vk-soft-55555f: #55555f;
    --vk-soft-5b5a66: #5b5a66;
    --vk-soft-5b6472: #5b6472;
    --vk-soft-6b6a75: #6b6a75;
    --vk-soft-6b6a76: #6b6a76;
    --vk-soft-85848f: #85848f;
    --vk-soft-8a8994: #8a8994;
    --vk-soft-8a8995: #8a8995;
    --vk-soft-8a8a94: #8a8a94;
    --vk-soft-8d8c98: #8d8c98;
    --vk-faint: #9a99a6;
    --vk-faint-9d9ca8: #9d9ca8;
    --vk-faint-a3a2ae: #a3a2ae;
    --vk-faint-a4a3ae: #a4a3ae;
    --vk-faint-b8b7c2: #b8b7c2;
    --vk-faint-c9c8d2: #c9c8d2;
    --vk-faint-cfcde0: #cfcde0;
    /* Links, and the app's violet (small accent text, thin lines, rings) */
    --vk-link: #0f52ff;
    --vk-link-23308a: #23308a;
    --vk-violet: #6e1fd1;
    --vk-violet-4f1697: #4f1697;
    --vk-violet-line: #cdb7ee;
    --vk-violet-line-b9a2e6: #b9a2e6;
    --vk-violet-line-d9c8f5: #d9c8f5;
    --vk-violet-tint: #f1e9fa;
    --vk-violet-tint-e7dbfb: #e7dbfb;
    --vk-violet-tint-f0e9fb: #f0e9fb;
    --vk-violet-tint-f1ebfb: #f1ebfb;
    --vk-violet-tint-f3f0fb: #f3f0fb;
    --vk-violet-tint-f4f0fb: #f4f0fb;
    --vk-violet-tint-faf7fe: #faf7fe;
    /* Status: error, ok, warning - and the tints that sit behind their text */
    --vk-err: #b3261e;
    --vk-err-8a1b14: #8a1b14;
    --vk-err-b23c17: #b23c17;
    --vk-err-tint: #fdecea;
    --vk-err-tint-fdeceb: #fdeceb;
    --vk-err-tint-fdeeee: #fdeeee;
    --vk-err-tint-fdf3f2: #fdf3f2;
    --vk-err-tint-fef4f3: #fef4f3;
    --vk-err-tint-fef8f7: #fef8f7;
    --vk-err-line: #f1c9c5;
    --vk-ok: #1d7a3e;
    --vk-ok-14532d: #14532d;
    --vk-ok-1f5132: #1f5132;
    --vk-ok-1f6b45: #1f6b45;
    --vk-ok-1f7a3a: #1f7a3a;
    --vk-ok-1f7a3f: #1f7a3f;
    --vk-ok-1f9d55: #1f9d55;
    --vk-ok-tint: #e6f4ea;
    --vk-ok-tint-e3f3e8: #e3f3e8;
    --vk-ok-tint-e5f7ee: #e5f7ee;
    --vk-ok-tint-eaf6ec: #eaf6ec;
    --vk-ok-tint-f3faf5: #f3faf5;
    --vk-ok-tint-f6fbf7: #f6fbf7;
    --vk-ok-line: #cfe8d6;
    --vk-warn: #9a6100;
    --vk-warn-3d2d00: #3d2d00;
    --vk-warn-4a3200: #4a3200;
    --vk-warn-5a3a00: #5a3a00;
    --vk-warn-5a4300: #5a4300;
    --vk-warn-5b3b00: #5b3b00;
    --vk-warn-6f5200: #6f5200;
    --vk-warn-7a4d00: #7a4d00;
    --vk-warn-7a5a00: #7a5a00;
    --vk-warn-8a3b00: #8a3b00;
    --vk-warn-8a5a00: #8a5a00;
    --vk-warn-8a6a1a: #8a6a1a;
    --vk-warn-a86400: #a86400;
    --vk-warn-e09a1a: #e09a1a;
    --vk-warn-tint: #fff6e5;
    --vk-warn-tint-fdf0e3: #fdf0e3;
    --vk-warn-tint-fff0cf: #fff0cf;
    --vk-warn-tint-fff4d6: #fff4d6;
    --vk-warn-tint-fff6e0: #fff6e0;
    --vk-warn-tint-fff8e6: #fff8e6;
    --vk-warn-tint-fffaf0: #fffaf0;
    --vk-warn-line: #f1d9a6;
    --vk-warn-line-f0d9a3: #f0d9a3;
    --vk-accent-tint: #e3eaff;
    --vk-accent-tint-e9efff: #e9efff;
    --vk-accent-tint-eef1ff: #eef1ff;
    --vk-accent-tint-f6f8ff: #f6f8ff;
    --vk-accent-line: #c9d6ff;
    --vk-accent-line-9db8ff: #9db8ff;
    /* The dark pills, toasts, the dock and the black buttons */
    --vk-inv: #16161a;
    --vk-invh: #2c2b33;
    --vk-invh-2d2d33: #2d2d33;
    --vk-invh-3a3a46: #3a3a46;
    --vk-invh-3b3b44: #3b3b44;
    /* the channels, for translucent forms */
    --vk-surface-rgb: 255, 255, 255;
    --vk-ink-rgb: 22, 22, 26;
    --vk-link-rgb: 15, 82, 255;
    --vk-violet-rgb: 110, 31, 209;
}

html[data-theme="dark"]{
    color-scheme: dark;
    /* The page and its surfaces */
    --vk-page: #17171c;
    --vk-surface: #1e1e24;
    --vk-raised: #24242c;
    --vk-raised-faf9fc: var(--vk-raised);
    --vk-raised-fbfbfd: var(--vk-raised);
    --vk-raised-fcfcfe: var(--vk-raised);
    --vk-raised-fdfbff: var(--vk-raised);
    --vk-field: #30303a;
    --vk-field-eeedf3: var(--vk-field);
    --vk-field-f0eff5: var(--vk-field);
    --vk-field-f1f0f5: var(--vk-field);
    --vk-field-f1f1f4: var(--vk-field);
    --vk-field-f3f2f6: var(--vk-field);
    --vk-field-f4f3f7: var(--vk-field);
    --vk-field-f4f3f8: var(--vk-field);
    --vk-field-f6f5f9: var(--vk-field);
    --vk-field-f6f5fa: var(--vk-field);
    --vk-field-f7f6fa: var(--vk-field);
    --vk-field-f7f7fa: var(--vk-field);
    --vk-fieldh: #3b3b47;
    --vk-fieldh-e4e2ea: var(--vk-fieldh);
    --vk-fieldh-e4e3ea: var(--vk-fieldh);
    --vk-fieldh-e7e5ee: var(--vk-fieldh);
    --vk-fieldh-e7e7ee: var(--vk-fieldh);
    --vk-fieldh-e8e6ee: var(--vk-fieldh);
    --vk-fieldh-e9e8ef: var(--vk-fieldh);
    --vk-fieldh-eae8f0: var(--vk-fieldh);
    --vk-fieldh-eaeaea: var(--vk-fieldh);
    --vk-fieldh-ffffff: var(--vk-fieldh);
    /* Lines */
    --vk-line-soft: #30303a;
    --vk-line-soft-ecebf2: var(--vk-line-soft);
    --vk-line-soft-f3f2f6: var(--vk-line-soft);
    --vk-line: #3d3d4a;
    --vk-line-d9d8e2: var(--vk-line);
    --vk-line-d9d9e3: var(--vk-line);
    --vk-line-dddce5: var(--vk-line);
    --vk-line-e4e3ec: var(--vk-line);
    --vk-line-strong: #4d4d5c;
    --vk-line-strong-c9c8d2: var(--vk-line-strong);
    --vk-line-strong-cfcde0: var(--vk-line-strong);
    --vk-line-strong-cfcfd8: var(--vk-line-strong);
    --vk-line-strong-d6d4e0: var(--vk-line-strong);
    --vk-line-strong-d9d8e0: var(--vk-line-strong);
    /* Text */
    --vk-text: #f1f0f5;
    --vk-text-2c2b33: var(--vk-text);
    --vk-soft: #b5b4c0;
    --vk-soft-3b3a46: var(--vk-soft);
    --vk-soft-3c3b46: var(--vk-soft);
    --vk-soft-4d4c58: var(--vk-soft);
    --vk-soft-55555f: var(--vk-soft);
    --vk-soft-5b5a66: var(--vk-soft);
    --vk-soft-5b6472: var(--vk-soft);
    --vk-soft-6b6a75: var(--vk-soft);
    --vk-soft-6b6a76: var(--vk-soft);
    --vk-soft-85848f: var(--vk-soft);
    --vk-soft-8a8994: var(--vk-soft);
    --vk-soft-8a8995: var(--vk-soft);
    --vk-soft-8a8a94: var(--vk-soft);
    --vk-soft-8d8c98: var(--vk-soft);
    --vk-faint: #a3a2b0;
    --vk-faint-9d9ca8: var(--vk-faint);
    --vk-faint-a3a2ae: var(--vk-faint);
    --vk-faint-a4a3ae: var(--vk-faint);
    --vk-faint-b8b7c2: var(--vk-faint);
    --vk-faint-c9c8d2: var(--vk-faint);
    --vk-faint-cfcde0: var(--vk-faint);
    /* Links, and the app's violet (small accent text, thin lines, rings) */
    --vk-link: #86abff;
    --vk-link-23308a: var(--vk-link);
    --vk-violet: #ba93f5;
    --vk-violet-4f1697: var(--vk-violet);
    --vk-violet-line: #715d9d;
    --vk-violet-line-b9a2e6: var(--vk-violet-line);
    --vk-violet-line-d9c8f5: var(--vk-violet-line);
    --vk-violet-tint: #362b51;
    --vk-violet-tint-e7dbfb: var(--vk-violet-tint);
    --vk-violet-tint-f0e9fb: var(--vk-violet-tint);
    --vk-violet-tint-f1ebfb: var(--vk-violet-tint);
    --vk-violet-tint-f3f0fb: var(--vk-violet-tint);
    --vk-violet-tint-f4f0fb: var(--vk-violet-tint);
    --vk-violet-tint-faf7fe: var(--vk-violet-tint);
    /* Status: error, ok, warning - and the tints that sit behind their text */
    --vk-err: #f57d72;
    --vk-err-8a1b14: var(--vk-err);
    --vk-err-b23c17: var(--vk-err);
    --vk-err-tint: #4a2424;
    --vk-err-tint-fdeceb: var(--vk-err-tint);
    --vk-err-tint-fdeeee: var(--vk-err-tint);
    --vk-err-tint-fdf3f2: var(--vk-err-tint);
    --vk-err-tint-fef4f3: var(--vk-err-tint);
    --vk-err-tint-fef8f7: var(--vk-err-tint);
    --vk-err-line: #723a3a;
    --vk-ok: #5fd2a1;
    --vk-ok-14532d: var(--vk-ok);
    --vk-ok-1f5132: var(--vk-ok);
    --vk-ok-1f6b45: var(--vk-ok);
    --vk-ok-1f7a3a: var(--vk-ok);
    --vk-ok-1f7a3f: var(--vk-ok);
    --vk-ok-1f9d55: var(--vk-ok);
    --vk-ok-tint: #244131;
    --vk-ok-tint-e3f3e8: var(--vk-ok-tint);
    --vk-ok-tint-e5f7ee: var(--vk-ok-tint);
    --vk-ok-tint-eaf6ec: var(--vk-ok-tint);
    --vk-ok-tint-f3faf5: var(--vk-ok-tint);
    --vk-ok-tint-f6fbf7: var(--vk-ok-tint);
    --vk-ok-line: #387051;
    --vk-warn: #f4c25e;
    --vk-warn-3d2d00: var(--vk-warn);
    --vk-warn-4a3200: var(--vk-warn);
    --vk-warn-5a3a00: var(--vk-warn);
    --vk-warn-5a4300: var(--vk-warn);
    --vk-warn-5b3b00: var(--vk-warn);
    --vk-warn-6f5200: var(--vk-warn);
    --vk-warn-7a4d00: var(--vk-warn);
    --vk-warn-7a5a00: var(--vk-warn);
    --vk-warn-8a3b00: var(--vk-warn);
    --vk-warn-8a5a00: var(--vk-warn);
    --vk-warn-8a6a1a: var(--vk-warn);
    --vk-warn-a86400: var(--vk-warn);
    --vk-warn-e09a1a: var(--vk-warn);
    --vk-warn-tint: #4a3c22;
    --vk-warn-tint-fdf0e3: var(--vk-warn-tint);
    --vk-warn-tint-fff0cf: var(--vk-warn-tint);
    --vk-warn-tint-fff4d6: var(--vk-warn-tint);
    --vk-warn-tint-fff6e0: var(--vk-warn-tint);
    --vk-warn-tint-fff8e6: var(--vk-warn-tint);
    --vk-warn-tint-fffaf0: var(--vk-warn-tint);
    --vk-warn-line: #705d2c;
    --vk-warn-line-f0d9a3: var(--vk-warn-line);
    --vk-accent-tint: #27305a;
    --vk-accent-tint-e9efff: var(--vk-accent-tint);
    --vk-accent-tint-eef1ff: var(--vk-accent-tint);
    --vk-accent-tint-f6f8ff: var(--vk-accent-tint);
    --vk-accent-line: #3a4a8a;
    --vk-accent-line-9db8ff: var(--vk-accent-line);
    /* The dark pills, toasts, the dock and the black buttons */
    --vk-inv: #30303a;
    --vk-invh: #3d3d4a;
    --vk-invh-2d2d33: var(--vk-invh);
    --vk-invh-3a3a46: var(--vk-invh);
    --vk-invh-3b3b44: var(--vk-invh);
    /* the channels */
    --vk-surface-rgb: 30, 30, 36;
    --vk-ink-rgb: 241, 240, 245;
    --vk-link-rgb: 134, 171, 255;
    --vk-violet-rgb: 186, 147, 245;
}

/* A PERSON'S BAR KEEPS THE SWITCH'S PLACE, EMPTY (2026-10-08). A person with a link has no switch any more (inc/sidebarblock.php); his words: "has eliminado boton entero del
   selector de modo de la app, esta bien, pero deja solamente el espacio sin el icono, porque sino el icono de cerrar sesion se ve demasiado pegado" - the same 48 px the switch took */
.sidebarblock > .vkThemeSpace{ display: block; float: left; width: 100%; height: 48px; pointer-events: none; }