/* 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;
}