:root {
  /* root layer */
  --base-bg-0: var(--surface-container-lowest);
  --base-fg-0: var(--on-surface);
  /* menu section */
  --menu-base-bg-0: var(--primary);
  --menu-base-fg-0: var(--on-primary);
  /* dropdown menu */
  --in-dropdown-menu-primary-bg-0: var(--primary);
  --in-dropdown-menu-primary-fg-0: var(--on-primary);
  --in-dropdown-menu-base-bg-0: var(--surface-container-low);
  /* >>> no text, so no color: --in-dropdown-menu-base-fg-0 */

  /* slide-in menu */
  --in-slidein-menu-base-bg-0: var(--surface-container-low);
  --in-slidein-menu-base-fg-0: var(--on-surface);
  --in-slidein-menu-base-bg-1: var(--surface-container);
  --in-slidein-menu-base-fg-1: var(--on-surface);
  --in-slidein-menu-base-bg-2: var(--surface-container-high);
  --in-slidein-menu-base-fg-2: var(--on-surface);
  --in-slidein-menu-base-bg-3: var(--surface-container-highest);
  --in-slidein-menu-base-fg-3: var(--on-surface);
  --in-slidein-menu-input-bg-0: var(--base-background);
  --in-slidein-menu-input-fg-0: var(--base-foreground);
  /* input section */
  --in-input-primary-bg-0: var(--primary);
  --in-input-primary-fg-0: var(--on-primary);
  --in-input-base-bg-0: var(--surface-container-low);
  --in-input-base-fg-0: var(--on-surface);
  --in-input-base-bg-1: var(--surface-container);
  --in-input-base-fg-1: var(--on-surface);
  --in-input-base-bg-2: var(--surface-container-high);
  --in-input-base-fg-2: var(--on-surface);
  --in-input-input-bg-0: var(--base-background);
  --in-input-input-fg-0: var(--base-foreground);
  /* output section */
  --in-output-primary-bg-0: var(--primary);
  --in-output-primary-fg-0: var(--on-primary);
  --in-output-base-bg-0: var(--surface-container-low);
  --in-output-base-fg-0: var(--on-surface);
  --in-output-base-bg-1: var(--surface-container);
  --in-output-base-fg-1: var(--on-surface);
  --in-output-base-bg-2: var(--surface-container-high);
  --in-output-base-fg-2: var(--on-surface);

  --in-output-secondary-bg-0: var(--secondary);
  --in-output-secondary-fg-0: var(--on-secondary);

  --shadow-0: -2px 2px 5px 0px rgb(0 0 0 / 12%);
  --shadow-1: -4px 3px 10px 5px rgb(0 0 0 / 20%);
/* -------------------------------------------------
 */

  /* Root layer */
  --root-base-emphasis-filter: hue-rotate(-5deg) brightness(1.05);/* for .choice-option:hover */

  /* Primary (buttons, toggles) */
  --root-primary-emphasis-filter: brightness(1.1) saturate(1.1);/* for some buttons with :hover */

  /* Input/Output panels */
  --panel-primary-emphasis-filter: brightness(1.1);/* for .tab:hover */
  --panel-outline: 1px solid rgba(255, 155, 175, 0.5);/* for .card { & > input[type='text'], & > textarea } */

  /* Samples */
  --sample-outline: 1px solid rgba(255, 175, 190, 0.4);/* for sample blocks */

  /* Emphasis and feedback */
  --error-background: rgb(236 0 0);/* TODO adjust colours for error background/foreground/outline(or shadow) */
  --error-foreground: aliceblue;
  --error-outline: rgb(236 0 0);
  --focus-outline: 2px solid #ff7faa;/* for input/textarea with :focus */
  --focus-filter: brightness(1.08);/* for input/textarea with :focus */
}

:root /* light-standard */ {
　　color-scheme: light;

  --base-background: #ffffff;
  --base-foreground: #1a1a1a;

  --primary: #2d78b5;
  --on-primary: #ffffff;
  --secondary: #21319c;
  --on-secondary: #ffffff;

  --surface-container-lowest : #ffffff;
  --surface-container-low    : #f9f9f9;
  --surface-container        : #f2f2f2;
  --surface-container-high   : #eaeaea;
  --surface-container-highest: #e0e0e0;

  --on-surface: #1a1a1a;

  --input-background: var(--base-background);
  --input-foreground: var(--base-foreground);
}

@media (prefers-color-scheme: dark) {
  :root {
  　　color-scheme: dark;

    --base-background: #1e1e1e;
    --base-foreground: #e6e6e6;

    --primary: #0a84ff;
    --on-primary: #ffffff;
    --secondary: #4f4f4f;
    --on-secondary: #ffffff;

    --surface-container-lowest : #121212;
    --surface-container-low    : #181818;
    --surface-container        : #202020;
    --surface-container-high   : #2a2a2a;
    --surface-container-highest: #333333;

    --on-surface: #f5f5f5;

    --input-background: var(--base-background);
    --input-foreground: var(--base-foreground);
  }
}

[data-theme='light-standard'] {
　　color-scheme: light;

  --base-background: #ffffff;
  --base-foreground: #1a1a1a;

  --primary: #2d78b5;
  --on-primary: #ffffff;
  --secondary: #21319c;
  --on-secondary: #ffffff;

  --surface-container-lowest : #ffffff;
  --surface-container-low    : #f9f9f9;
  --surface-container        : #f2f2f2;
  --surface-container-high   : #eaeaea;
  --surface-container-highest: #e0e0e0;

  --on-surface: #1a1a1a;

  --input-background: var(--base-background);
  --input-foreground: var(--base-foreground);
}

[data-theme='light-0'] {
　　color-scheme: light;

  --base-background: #dcfffc;
  --base-foreground: #4c2b3b;

  --primary: #ff5900;
  --on-primary: white;
  --secondary: #39aaa4;
  --on-secondary: white;

  --surface-container-lowest : #f5fffe;
  --surface-container-low    : #f0fffe;
  --surface-container        : #eafffd;
  --surface-container-high   : #e5fffd;
  --surface-container-highest: #dffffc;

  --on-surface: black;

  --input-background: var(--base-background);
  --input-foreground: var(--base-foreground);
}

[data-theme='light-1'] {
　　color-scheme: light;

  --base-background: #f1d3ec;
  --base-foreground: black;

  --primary: #409B96;
  --on-primary: white;
  --secondary: #706841;
  --on-secondary: white;

  --surface-container-lowest : #fff5fe;
  --surface-container-low    : #fdf1fc;
  --surface-container        : #fbeaf8;
  --surface-container-high   : #f7e2f4;
  --surface-container-highest: #f3d7ee;

  --on-surface: black;

  --input-background: var(--base-background);
  --input-foreground: var(--base-foreground);
}

[data-theme='light-2'] {
　　color-scheme: light;

  --base-background: #ffeed2;
  --base-foreground: black;

  --primary: #03a0ff;
  --on-primary: #ffffff;
  --secondary: #0403ff;
  --on-secondary: #ffffff;

  --surface-container-lowest : #fffbf3;
  --surface-container-low    : #fffaf0;
  --surface-container        : #fff8eb;
  --surface-container-high   : #fff5e4;
  --surface-container-highest: #fff1d9;

  --on-surface: #1a1c16;

  --input-background: var(--base-background);
  --input-foreground: var(--base-foreground);
}

[data-theme='light-3'] {
　　color-scheme: light;

  --base-background: #f1f966;
  --base-foreground: #1a1c16;

  --primary: #1d3b2a;
  --on-primary: #ffffff;
  --secondary: #379453;
  --on-secondary: #ffffff;

  --surface-container-lowest : #ffffff;
  --surface-container-low    : #f3f4e9;
  --surface-container        : #eeefe3;
  --surface-container-high   : #e8e9de;
  --surface-container-highest: #e2e3d8;

  --on-surface: #1a1c16;

  --input-background: var(--base-background);
  --input-foreground: var(--base-foreground);
}

[data-theme='dark-standard'] {
　　color-scheme: dark;

  --base-background: #1e1e1e;
  --base-foreground: #e6e6e6;

  --primary: #0a84ff;
  --on-primary: #ffffff;
  --secondary: #4f4f4f;
  --on-secondary: #ffffff;

  --surface-container-lowest : #121212;
  --surface-container-low    : #181818;
  --surface-container        : #202020;
  --surface-container-high   : #2a2a2a;
  --surface-container-highest: #333333;

  --on-surface: #f5f5f5;

  --input-background: var(--base-background);
  --input-foreground: var(--base-foreground);
}

[data-theme='dark-0'] {
　　color-scheme: dark;

  --base-background: #45114e;
  --base-foreground: white;

  --primary: #ffbe00;
  --on-primary: #1d1e1e;
  --secondary: #405761;
  --on-secondary: white;

  --surface-container-lowest : #301035;
  --surface-container-low    : #34103a;
  --surface-container        : #391040;
  --surface-container-high   : #3b1143;
  --surface-container-highest: #401148;

  --on-surface: white;

  --input-background: var(--base-background);
  --input-foreground: var(--base-foreground);
}

[data-theme='dark-1'] {
　　color-scheme: dark;

  --base-background: #02007c;
  --base-foreground: white;

  --primary: #9ba100;
  --on-primary: white;
  --secondary: #6e4d00;
  --on-secondary: white;

  --surface-container-lowest : #01002d;
  --surface-container-low    : #01003b;
  --surface-container        : #01004b;
  --surface-container-high   : #02005b;
  --surface-container-highest: #02006b;

  --on-surface: white;

  --input-background: var(--base-background);
  --input-foreground: var(--base-foreground);
}

[data-theme='dark-2'] {
　　color-scheme: dark;

  --base-background: #712500;
  --base-foreground: white;

  --primary: #007696;
  --on-primary: white;
  --secondary: #004728;
  --on-secondary: white;

  --surface-container-lowest : #471700;
  --surface-container-low    : #4f1a00;
  --surface-container        : #571c00;
  --surface-container-high   : #601f00;
  --surface-container-highest: #682200;

  --on-surface: white;

  --input-background: var(--base-background);
  --input-foreground: var(--base-foreground);
}

[data-theme='dark-3'] {
　　color-scheme: dark;

  --base-background: #353535;
  --base-foreground: white;

  --primary: #476e44;
  --on-primary: white;
  --secondary: #5e4d44;
  --on-secondary: white;

  --surface-container-lowest : #040404;
  --surface-container-low    : #0e0e0e;
  --surface-container        : #1a1a1a;
  --surface-container-high   : #202020;
  --surface-container-highest: #272727;

  --on-surface: white;

  --input-background: var(--base-background);
  --input-foreground: var(--base-foreground);
}