/* GENERATED by tools/extract-tokens.mjs from the firmware sources - do not edit.
 * TouchGFX/gui/include/gui/common/Layout.hpp
 * TouchGFX/gui/include/gui/common/Palette.hpp
 * docs/tokens.md lists every token with its meaning and the line it comes from. */

:root {
  --screen-w: 800px;
  --screen-h: 480px;
  --header-x: 80px;
  --header-w: 720px;
  --header-h: 64px;
  --content-left: 99px;
  --content-right: 759px;
  --content-w: 660px;
  --content-mid: 429px;
  --split-x: 439px;
  --content-top: 84px;
  --page-bottom: 470px;
  --footer-h: 56px;
  --footer-margin: 40px;
  --footer-y: 384px;
  --list-top: 84px;
  --list-bottom: 372px;
  --back-w: 200px;
  --save-w: 220px;
  --gap-xs: 4px;
  --gap-s: 8px;
  --gap-m: 12px;
  --pad: 20px;
  --pad-tile: 14px;
  --radius: 16px;
  --tile-radius: 17px;
  --border: 1px;
  --button-h: 48px;
  --row-h: 56px;
  --control-h: 44px;
  --icon-s: 24px;
  --icon-m: 30px;
  --icon-l: 48px;
  --heading-h: 22px;
  --heading-w: 400px;
  --heading-step: 30px;
  --block-gap: 22px;
  --tile: 124px;
  --tile-gap: 10px;
  --tile-step: 134px;
  --tile-columns: 5;
  --level-alpha: 70;
}

:root, [data-theme="light"] {
  --color-ink: #080C0F;
  --color-muted: #50565A;
  --color-page: #F5F9FC;
  --color-surface: #FFFFFF;
  --color-chrome: #EFF4F7;
  --color-chrome-border: #E0E5EA;
  --color-divider: #D0D8E0;
  --color-recess: #E2E8EE;
  --color-inactive: #B0BAC3;
  --color-vial: #E8EDF1;
  --color-gauge-well: #FFFFFF;
  --color-confirm: #2EAF50;
  --color-neutral: #D6DEE5;
  --color-on-neutral: #080C0F;
  --color-scrim: #080C0F;
  --color-scrim-deep: #000000;
  --color-qr-plate: #F5F9FC;
  --color-tile-rest-fill: #F0F4F8;
  --color-tile-rest-border: #D0D8E0;
  --color-tile-on-fill: #C0D4F8;
  --color-tile-on-border: #789CF8;
  --color-tile-off-fill: #DCE3EA;
  --color-tile-off-border: #C6CED6;
  --color-tile-muted-fill: #FAFAFA;
  --color-tile-muted-border: #B0B4B8;
  --hue-tint-ground: 242;
  --hue-edge-ground: 80;
  --color-alarm: #D64545;
  --color-alarm-ground: #C62828;
  --color-on-alarm-ground: #FFFFFF;
  --color-battery-full: #2EAF50;
  --color-battery-mid: #8CB03C;
  --color-battery-low: #E8A33D;
  --color-power-fill: #C4E8D0;
  --color-power-border: #4CAF72;
  --color-temp-fill: #FBE4D0;
  --color-temp-border: #D9873B;
  --color-water-fill: #CFE3F8;
  --color-water-border: #2E7FC8;
  --color-waste-fill: #DCCDB4;
  --color-waste-border: #9C7B43;
  --color-tilt-fill: #D9DCEA;
  --color-tilt-border: #6A74A8;
  --color-light-fill: #F4EDC2;
  --color-light-border: #B59A16;
  --color-thermometer: #007159;
  --color-bluetooth: #0082FC;
  --color-heater-flame: #D1422F;
  --color-lamp-lit: #E0A11B;
  --color-on-grid: #1E9E57;
  --color-water-level: #A2C7EA;
  --color-waste-level: #CAB694;
  --color-light-level: #E2D692;
}

[data-theme="dark"] {
  --color-ink: #E6EDF3;
  --color-muted: #9AA5AF;
  --color-page: #12161B;
  --color-surface: #1C232B;
  --color-chrome: #0D1015;
  --color-chrome-border: #2B333C;
  --color-divider: #39434E;
  --color-recess: #2A323B;
  --color-inactive: #6E7A85;
  --color-vial: #222A33;
  --color-gauge-well: #0D1015;
  --color-confirm: #3CC466;
  --color-neutral: #2F3842;
  --color-on-neutral: #E6EDF3;
  --color-scrim: #04070A;
  --color-scrim-deep: #000000;
  --color-qr-plate: #FFFFFF;
  --color-tile-rest-fill: #1E252D;
  --color-tile-rest-border: #333D47;
  --color-tile-on-fill: #1F3556;
  --color-tile-on-border: #5C86E8;
  --color-tile-off-fill: #272F38;
  --color-tile-off-border: #3D4751;
  --color-tile-muted-fill: #2C3038;
  --color-tile-muted-border: #555C63;
  --hue-tint-ground: 34;
  --hue-edge-ground: 200;
  --color-alarm: #E86A6A;
  --color-alarm-ground: #C62828;
  --color-on-alarm-ground: #FFFFFF;
  --color-battery-full: #3CC466;
  --color-battery-mid: #A7CC55;
  --color-battery-low: #F0B455;
  --color-power-fill: #1F3B2B;
  --color-power-border: #4FBF7E;
  --color-temp-fill: #3A2A1A;
  --color-temp-border: #E09B4F;
  --color-water-fill: #14314C;
  --color-water-border: #4FA6EA;
  --color-waste-fill: #3A3124;
  --color-waste-border: #C8A867;
  --color-tilt-fill: #23273A;
  --color-tilt-border: #8E98D4;
  --color-light-fill: #37331A;
  --color-light-border: #D8C24E;
  --color-thermometer: #FFFFFF;
  --color-bluetooth: #3D9BFF;
  --color-heater-flame: #F2664F;
  --color-lamp-lit: #F5C445;
  --color-on-grid: #4CCB7F;
  --color-water-level: #245177;
  --color-waste-level: #605136;
  --color-light-level: #635A28;
}

/* accent 0: teal */
[data-theme="light"][data-accent="0"] { --color-accent: #0096BE; --color-on-accent: #FFFFFF; --color-menu-active: #3060F0; }
[data-theme="dark"][data-accent="0"] { --color-accent: #1E9CC4; --color-on-accent: #FFFFFF; --color-menu-active: #3060F0; }
/* accent 1: blue */
[data-theme="light"][data-accent="1"] { --color-accent: #2F6FE0; --color-on-accent: #FFFFFF; --color-menu-active: #2F6FE0; }
[data-theme="dark"][data-accent="1"] { --color-accent: #5C93F0; --color-on-accent: #FFFFFF; --color-menu-active: #2F6FE0; }
/* accent 2: violet */
[data-theme="light"][data-accent="2"] { --color-accent: #7A4FD0; --color-on-accent: #FFFFFF; --color-menu-active: #7A4FD0; }
[data-theme="dark"][data-accent="2"] { --color-accent: #9B79EA; --color-on-accent: #FFFFFF; --color-menu-active: #7A4FD0; }
/* accent 3: magenta */
[data-theme="light"][data-accent="3"] { --color-accent: #C0468F; --color-on-accent: #FFFFFF; --color-menu-active: #C0468F; }
[data-theme="dark"][data-accent="3"] { --color-accent: #DC74B4; --color-on-accent: #E6EDF3; --color-menu-active: #C0468F; }
/* accent 4: amber */
[data-theme="light"][data-accent="4"] { --color-accent: #C87A18; --color-on-accent: #FFFFFF; --color-menu-active: #C87A18; }
[data-theme="dark"][data-accent="4"] { --color-accent: #E0A040; --color-on-accent: #E6EDF3; --color-menu-active: #C87A18; }
/* accent 5: graphite */
[data-theme="light"][data-accent="5"] { --color-accent: #4A5560; --color-on-accent: #FFFFFF; --color-menu-active: #4A5560; }
[data-theme="dark"][data-accent="5"] { --color-accent: #7C8794; --color-on-accent: #FFFFFF; --color-menu-active: #4A5560; }

[data-theme="light"] { --color-accent-0: #0096BE; }
[data-theme="dark"] { --color-accent-0: #1E9CC4; }
[data-theme="light"] { --color-accent-1: #2F6FE0; }
[data-theme="dark"] { --color-accent-1: #5C93F0; }
[data-theme="light"] { --color-accent-2: #7A4FD0; }
[data-theme="dark"] { --color-accent-2: #9B79EA; }
[data-theme="light"] { --color-accent-3: #C0468F; }
[data-theme="dark"] { --color-accent-3: #DC74B4; }
[data-theme="light"] { --color-accent-4: #C87A18; }
[data-theme="dark"] { --color-accent-4: #E0A040; }
[data-theme="light"] { --color-accent-5: #4A5560; }
[data-theme="dark"] { --color-accent-5: #7C8794; }