ui.css

@layer theme.ui.base {
  :root {
    /*******************************
      Site Settings
    *******************************/

    /*-------------------
      Fonts
    --------------------*/
    --font-name: -apple-system, BlinkMacSystemFont, Segoe UI, 'Lato';
    --font-smoothing: antialiased;

    --header-font:
      var(--font-name), 'Helvetica Neue', Arial, Helvetica, sans-serif, Apple Color Emoji,
      Segoe UI Emoji, Segoe UI Symbol;
    --page-font:
      var(--font-name), 'Helvetica Neue', Arial, Helvetica, sans-serif, Apple Color Emoji,
      Segoe UI Emoji, Segoe UI Symbol;

    /*-------------------
      Border Radius
    --------------------*/

    --default-corner-shape: squircle;
    --default-squircle-radius: var(--15px);
    --large-squircle-radius: var(--24px);

    /*-------------------
      Brand Colors
    --------------------*/

    --primary-color: light-dark(var(--color-blue-500), hsl(var(--hsl-blue-400) / 80%));
    --secondary-color: light-dark(var(--color-zinc-900), hsl(var(--hsl-zinc-400) / 80%));

    --light-primary-color: light-dark(var(--color-blue-400), hsl(var(--hsl-blue-300) / 80%));
    --light-secondary-color: var(--color-neutral-700);

    /*--------------
      Page Heading
    ---------------*/

    --header-font-weight: 600;
    --header-line-height: 1.28571429em;

    --h1: 2em;
    --h2: 1.5em;
    --h3: 1.25em;
    --h4: 1em;
    --h5: 0.875em;
    --h6: 0.85em;

    /*--------------
      Form Input
    ---------------*/

    /* This adjusts the default form input across all elements */
    --input-background: light-dark(var(--white), var(--color-neutral-900));
    --input-vertical-padding: var(--relative11px);
    --input-horizontal-padding: var(--relative14px);
    --input-padding: var(--input-vertical-padding) var(--input-horizontal-padding);

    /* Input Text Color */
    --input-color: light-dark(var(--text-color), hsl(var(--hsl-neutral-50) / 85%));
    --input-placeholder-color: light-dark(
      rgba(191, 191, 191, 0.87),
      hsl(var(--hsl-neutral-200) / 25%)
    );
    --input-placeholder-focus-color: light-dark(
      rgba(115, 115, 115, 0.87),
      hsl(var(--hsl-neutral-300) / 35%)
    );
    --input-error-placeholder-color: light-dark(#e7bdbc, var(--negative-text-color));
    --input-error-placeholder-focus-color: light-dark(#da9796, hsl(var(--hsl-red-200) / 90%));

    /* Line Height Default For Inputs in Browser */
    --input-line-height: 1.21428571em;

    /*-------------------
      Focused Input
    --------------------*/

    /* Used on inputs, textarea etc */
    --focused-form-border-color: light-dark(#85b7d9, hsl(var(--hsl-sky-300) / 60%));

    /* Used on dropdowns, other larger blocks */
    --focused-form-muted-border-color: light-dark(#96c8da, hsl(var(--hsl-sky-300) / 40%));

    --unfocused-outline-color: transparent;
    --unfocused-outline-offset: 0.4rem;
    --focused-outline-style: solid;
    --focused-outline-width: var(--2px);
    --focused-outline-color: light-dark(
      color-mix(in srgb, var(--focused-form-muted-border-color), transparent 30%),
      hsl(var(--hsl-sky-300) / 30%)
    );
    --focused-outline-offset: 0rem;

    /*-------------------
      Page
    --------------------*/

    --page-background: light-dark(var(--color-white), var(--color-neutral-950));
    --page-overflow-x: hidden;

    --line-height: 1.4285em;
    --text-color: light-dark(hsl(var(--hsl-black) / 87%), hsl(var(--hsl-neutral-50) / 87%));

    /*-------------------
      Paragraph
    --------------------*/

    --paragraph-margin: 0em 0em 1em;
    --paragraph-line-height: var(--line-height);

    /*-------------------
      Links
    --------------------*/

    --link-color: var(--color-blue-500);
    --link-underline: none;
    --link-hover-color: light-dark(var(--color-blue-600), var(--color-blue-400));
    --link-hover-underline: var(--link-underline);

    /*-------------------
      Highlighted Text
    --------------------*/

    --highlight-background: light-dark(var(--color-blue-200), var(--color-sky-600));
    --highlight-color: light-dark(var(--text-color), var(--color-white));

    --input-highlight-background: light-dark(
      hsl(var(--hsl-neutral-600) / 40%),
      hsl(var(--hsl-neutral-400) / 40%)
    );
    --input-highlight-color: var(--text-color);

    /*-------------------
      Loader
    --------------------*/

    --loader-size: var(--relative-big);
    --loader-speed: 0.6s;
    --loader-line-width: 0.2em;
    --loader-fill-color: rgba(0, 0, 0, 0.1);
    --loader-line-color: light-dark(var(--grey), #767676);

    --inverted-loader-fill-color: rgba(255, 255, 255, 0.15);
    --inverted-loader-line-color: light-dark(var(--white), #ffffff);

    /*-------------------
      Site Colors
    --------------------*/

    /*---  Colors  ---*/
    --red: var(--color-red-500);
    --orange: var(--color-orange-500);
    --yellow: var(--color-yellow-500);
    --olive: var(--color-lime-500);
    --green: var(--color-green-500);
    --teal: var(--color-teal-500);
    --blue: var(--color-blue-500);
    --violet: var(--color-violet-500);
    --purple: var(--color-purple-500);
    --pink: var(--color-pink-500);
    --brown: var(--color-yellow-800);
    --grey: var(--color-neutral-500);
    --black: var(--color-neutral-900);

    /*---  Light Colors  ---*/
    --light-red: var(--color-red-400);
    --light-orange: var(--color-orange-400);
    --light-yellow: var(--color-yellow-400);
    --light-olive: var(--color-lime-400);
    --light-green: var(--color-green-400);
    --light-teal: var(--color-teal-400);
    --light-blue: var(--color-blue-400);
    --light-violet: var(--color-violet-400);
    --light-purple: var(--color-purple-400);
    --light-pink: var(--color-pink-400);
    --light-brown: var(--color-yellow-700);
    --light-grey: var(--color-neutral-300);
    --light-black: var(--color-neutral-700);

    /*---   Neutrals  ---*/
    --full-black: var(--color-black);
    --off-white: var(--color-gray-50);
    --dark-white: var(--color-gray-100);
    --mid-white: var(--color-gray-200);
    --white: var(--color-white);

    /*--- Colored Backgrounds ---*/
    --red-background: light-dark(var(--color-red-100), var(--color-red-900));
    --orange-background: light-dark(var(--color-orange-100), var(--color-orange-900));
    --yellow-background: light-dark(var(--color-yellow-100), var(--color-yellow-900));
    --olive-background: light-dark(var(--color-lime-100), var(--color-lime-900));
    --green-background: light-dark(var(--color-green-100), var(--color-green-900));
    --teal-background: light-dark(var(--color-teal-100), var(--color-teal-900));
    --blue-background: light-dark(var(--color-blue-100), var(--color-blue-900));
    --violet-background: light-dark(var(--color-violet-100), var(--color-violet-900));
    --purple-background: light-dark(var(--color-purple-100), var(--color-purple-900));
    --pink-background: light-dark(var(--color-pink-100), var(--color-pink-900));
    --brown-background: light-dark(var(--color-orange-100), var(--color-orange-900));

    /*--- Colored Headers ---*/
    --red-header-color: light-dark(var(--color-red-600), var(--color-red-400));
    --orange-header-color: light-dark(var(--color-orange-600), var(--color-orange-400));
    --yellow-header-color: light-dark(var(--color-yellow-800), var(--color-yellow-300));
    --olive-header-color: light-dark(var(--color-lime-700), var(--color-lime-400));
    --green-header-color: light-dark(var(--color-green-700), var(--color-green-400));
    --teal-header-color: light-dark(var(--color-teal-700), var(--color-teal-400));
    --blue-header-color: light-dark(var(--color-blue-600), var(--color-blue-400));
    --violet-header-color: light-dark(var(--color-violet-600), var(--color-violet-400));
    --purple-header-color: light-dark(var(--color-purple-600), var(--color-purple-400));
    --pink-header-color: light-dark(var(--color-pink-600), var(--color-pink-400));
    --brown-header-color: light-dark(var(--color-yellow-900), var(--color-yellow-500));

    /*--- Colored Text ---*/
    --red-text-color: light-dark(var(--color-red-500), var(--color-red-400));
    --orange-text-color: light-dark(var(--color-orange-500), var(--color-orange-400));
    --yellow-text-color: light-dark(var(--color-yellow-700), var(--color-yellow-400));
    --olive-text-color: light-dark(var(--color-lime-600), var(--color-lime-400));
    --green-text-color: light-dark(var(--color-green-600), var(--color-green-400));
    --teal-text-color: light-dark(var(--color-teal-600), var(--color-teal-400));
    --blue-text-color: light-dark(var(--color-blue-500), var(--color-blue-400));
    --violet-text-color: light-dark(var(--color-violet-500), var(--color-violet-400));
    --purple-text-color: light-dark(var(--color-purple-500), var(--color-purple-400));
    --pink-text-color: light-dark(var(--color-pink-500), var(--color-pink-400));
    --brown-text-color: light-dark(var(--color-yellow-800), var(--color-yellow-500));

    /*--- Colored Border ---*/
    --red-border-color: var(--red-text-color);
    --orange-border-color: var(--orange-text-color);
    --yellow-border-color: var(--yellow-text-color);
    --olive-border-color: var(--olive-text-color);
    --green-border-color: var(--green-text-color);
    --teal-border-color: var(--teal-text-color);
    --blue-border-color: var(--blue-text-color);
    --violet-border-color: var(--violet-text-color);
    --purple-border-color: var(--purple-text-color);
    --pink-border-color: var(--pink-text-color);
    --brown-border-color: var(--brown-text-color);

    /*-------------------
      Alpha Colors
    --------------------*/

    --subtle-transparent-black: light-dark(rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.06));
    --transparent-black: light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.1));
    --strong-transparent-black: light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
    --very-strong-transparent-black: light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.3));

    --subtle-transparent-white: rgba(255, 255, 255, 0.02);
    --transparent-white: rgba(255, 255, 255, 0.08);
    --strong-transparent-white: rgba(255, 255, 255, 0.15);

    /*-------------------
      Accents
    --------------------*/

    /* Differentiating Neutrals */
    --subtle-gradient: linear-gradient(
      transparent,
      light-dark(var(--transparent-black), rgba(0, 0, 0, 0.05))
    );

    /* Differentiating Layers */
    --subtle-shadow: 0px 1px 2px 0 light-dark(var(--border-color), var(--black));
    --floating-shadow:
      0px 2px 4px 0px light-dark(rgba(34, 36, 38, 0.12), hsl(var(--hsl-black) / 20%)),
      0px 2px 10px 0px light-dark(rgba(34, 36, 38, 0.15), hsl(var(--hsl-black) / 30%));
    --raised-shadow:
      0 1.5px 3px -2px hsl(var(--hsl-black) / 0.4), 0 4px 6px hsl(var(--hsl-black) / 0.2),
      0 8px 12px -1px hsl(var(--hsl-black) / 0.1);

    /*-------------------
      Emotive Colors
    --------------------*/

    /* Positive */
    --positive-color: light-dark(hsl(var(--hsl-green-500)), var(--color-green-500));
    --positive-background-color: light-dark(
      hsl(var(--hsl-green-500) / 10%),
      hsl(var(--hsl-green-200) / 20%)
    );
    --positive-border-color: light-dark(
      hsl(var(--hsl-green-600) / 50%),
      hsl(var(--hsl-green-300) / 70%)
    );
    --positive-header-color: light-dark(
      hsl(var(--hsl-green-800) / 90%),
      hsl(var(--hsl-green-300) / 90%)
    );
    --positive-text-color: light-dark(
      hsl(var(--hsl-green-900) / 90%),
      hsl(var(--hsl-green-100) / 90%)
    );

    /* Negative */
    --negative-color: light-dark(hsl(var(--hsl-red-500)), var(--color-red-500));
    --negative-background-color: light-dark(
      hsl(var(--hsl-red-500) / 10%),
      hsl(var(--hsl-red-200) / 20%)
    );
    --negative-border-color: light-dark(
      hsl(var(--hsl-red-500) / 50%),
      hsl(var(--hsl-red-300) / 70%)
    );
    --negative-header-color: light-dark(
      hsl(var(--hsl-red-800) / 90%),
      hsl(var(--hsl-red-300) / 90%)
    );
    --negative-text-color: light-dark(hsl(var(--hsl-red-800) / 90%), hsl(var(--hsl-red-100) / 90%));

    /* Info */
    --info-color: light-dark(hsl(var(--hsl-sky-500)), var(--color-cyan-400));
    --info-background-color: light-dark(
      hsl(var(--hsl-sky-500) / 10%),
      hsl(var(--hsl-sky-200) / 20%)
    );
    --info-border-color: light-dark(hsl(var(--hsl-sky-500) / 70%), hsl(var(--hsl-sky-300) / 70%));
    --info-header-color: light-dark(hsl(var(--hsl-sky-800) / 90%), hsl(var(--hsl-sky-300) / 90%));
    --info-text-color: light-dark(hsl(var(--hsl-sky-800) / 90%), hsl(var(--hsl-sky-100) / 90%));

    /* Warning */
    --warning-color: light-dark(hsl(var(--hsl-amber-400)), var(--color-amber-400));
    --warning-background-color: light-dark(
      hsl(var(--hsl-yellow-500) / 10%),
      hsl(var(--hsl-amber-200) / 20%)
    );
    --warning-border-color: light-dark(
      hsl(var(--hsl-amber-600) / 70%),
      hsl(var(--hsl-yellow-600) / 70%)
    );
    --warning-header-color: light-dark(
      hsl(var(--hsl-yellow-800) / 90%),
      hsl(var(--hsl-amber-300) / 90%)
    );
    --warning-text-color: light-dark(
      hsl(var(--hsl-amber-900) / 90%),
      hsl(var(--hsl-amber-100) / 90%)
    );

    /*-------------------
      Icons
    --------------------*/

    /* Maximum Glyph Width of Icon */
    --icon-width: 1.18em;

    /*-------------------
      Neutral Text
    --------------------*/

    --dark-text-color: light-dark(hsl(var(--hsl-black) / 85%), hsl(var(--hsl-neutral-50) / 40%));
    --muted-text-color: light-dark(hsl(var(--hsl-black) / 60%), hsl(var(--hsl-neutral-50) / 60%));
    --light-text-color: light-dark(hsl(var(--hsl-black) / 40%), hsl(var(--hsl-neutral-50) / 85%));

    --unselected-text-color: light-dark(
      hsl(var(--hsl-black) / 40%),
      hsl(var(--hsl-neutral-50) / 40%)
    );
    --hovered-text-color: light-dark(hsl(var(--hsl-black) / 80%), hsl(var(--hsl-neutral-50) / 80%));
    --pressed-text-color: light-dark(hsl(var(--hsl-black) / 90%), hsl(var(--hsl-neutral-50) / 90%));
    --selected-text-color: light-dark(
      hsl(var(--hsl-black) / 95%),
      hsl(var(--hsl-neutral-50) / 95%)
    );
    --disabled-text-color: hsl(var(--hsl-black) / 20%);

    --inverted-text-color: light-dark(
      hsl(var(--hsl-white) / 90%),
      hsl(var(--hsl-neutral-950) / 90%)
    );
    --inverted-muted-text-color: light-dark(
      hsl(var(--hsl-white) / 80%),
      hsl(var(--hsl-neutral-950) / 80%)
    );
    --inverted-light-text-color: light-dark(
      hsl(var(--hsl-white) / 70%),
      hsl(var(--hsl-neutral-950) / 70%)
    );
    --inverted-unselected-text-color: light-dark(
      hsl(var(--hsl-white) / 50%),
      hsl(var(--hsl-neutral-950) / 50%)
    );
    --inverted-hovered-text-color: light-dark(
      hsl(var(--hsl-white) / 100%),
      hsl(var(--hsl-neutral-950) / 100%)
    );
    --inverted-pressed-text-color: light-dark(
      hsl(var(--hsl-white) / 100%),
      hsl(var(--hsl-neutral-950) / 100%)
    );
    --inverted-selected-text-color: light-dark(
      hsl(var(--hsl-white) / 100%),
      hsl(var(--hsl-neutral-950) / 100%)
    );
    --inverted-disabled-text-color: hsl(var(--hsl-white) / 20%);

    /*-------------------
      Borders
    --------------------*/

    --border-color: light-dark(
      hsl(var(--hsl-neutral-900) / 15%),
      hsl(var(--hsl-neutral-100) / 10%)
    );
    --strong-border-color: light-dark(
      hsl(var(--hsl-neutral-900) / 22%),
      hsl(var(--hsl-neutral-100) / 22%)
    );
    --internal-border-color: light-dark(
      hsl(var(--hsl-neutral-900) / 10%),
      hsl(var(--hsl-neutral-100) / 10%)
    );
    --selected-border-color: light-dark(
      hsl(var(--hsl-neutral-900) / 35%),
      hsl(var(--hsl-neutral-100) / 35%)
    );
    --strong-selected-border-color: light-dark(
      hsl(var(--hsl-neutral-900) / 50%),
      hsl(var(--hsl-neutral-100) / 50%)
    );
    --disabled-border-color: light-dark(
      hsl(var(--hsl-neutral-900) / 50%),
      hsl(var(--hsl-neutral-100) / 50%)
    );

    --solid-internal-border-color: light-dark(var(--color-neutral-50), var(--color-neutral-800));
    --solid-border-color: light-dark(var(--color-zinc-300), var(--color-zinc-700));
    --solid-selected-border-color: light-dark(var(--color-neutral-400), var(--color-neutral-600));

    --white-border-color: hsl(var(--hsl-white) / 10%);
    --selected-white-border-color: hsl(var(--hsl-white) / 80%);

    --solid-white-border-color: var(--color-neutral-400);
    --selected-solid-white-border-color: var(--color-neutral-300);

    /*-------------------
      Derived Values
    --------------------*/

    /* Loaders Position Offset */
    --loader-offset: -0.64285714em;
    --loader-margin: var(--loader-offset) 0em 0em var(--loader-offset);

    /* Maximum Single Character Glyph Width, aka Capital "W" */
    --glyph-width: 1.1em;

    /* Used to match floats with text */
    --line-height-offset: 0.21425em;
    --header-line-height-offset: 0.14285714em;

    /* Header Spacing */
    --header-top-margin: calc(2rem - var(--header-line-height-offset));
    --header-bottom-margin: 1rem;
    --header-margin: var(--header-top-margin) 0em var(--header-bottom-margin);

    /* Minimum Mobile Width */
    --page-min-width: 320px;

    /* Positive / Negative Dupes */
    --success-background-color: var(--positive-background-color);
    --success-color: var(--positive-color);
    --success-border-color: var(--positive-border-color);
    --success-header-color: var(--positive-header-color);
    --success-text-color: var(--positive-text-color);

    --error-background-color: var(--negative-background-color);
    --error-color: var(--negative-color);
    --error-border-color: var(--negative-border-color);
    --error-header-color: var(--negative-header-color);
    --error-text-color: var(--negative-text-color);

    /*******************************
      States
    *******************************/

    /*-------------------
      Disabled
    --------------------*/

    --disabled-opacity: 0.45;
    --disabled-text-color: light-dark(
      hsl(var(--hsl-neutral-800) / 30%),
      hsl(var(--hsl-neutral-50) / 30%)
    );
    --inverted-disabled-text-color: light-dark(
      hsl(var(--hsl-white) / 30%),
      hsl(var(--hsl-neutral-950) / 20%)
    );

    /*-------------------
      Hover
    --------------------*/

    /*---  Shadows  ---*/
    --floating-shadow-hover:
      0px 2px 4px 0px rgba(34, 36, 38, 0.15), 0px 2px 10px 0px rgba(34, 36, 38, 0.25);

    /*---  Colors  ---*/
    --primary-color-hover: var(--color-blue-600);
    --secondary-color-hover: var(--color-zinc-800);

    --red-hover: var(--color-red-600);
    --orange-hover: var(--color-orange-600);
    --yellow-hover: var(--color-yellow-600);
    --olive-hover: var(--color-lime-600);
    --green-hover: var(--color-green-600);
    --teal-hover: var(--color-teal-600);
    --blue-hover: var(--color-blue-600);
    --violet-hover: var(--color-violet-600);
    --purple-hover: var(--color-purple-600);
    --pink-hover: var(--color-pink-600);
    --brown-hover: var(--color-yellow-900);

    --light-red-hover: var(--color-red-500);
    --light-orange-hover: var(--color-orange-500);
    --light-yellow-hover: var(--color-yellow-500);
    --light-olive-hover: var(--color-lime-500);
    --light-green-hover: var(--color-green-500);
    --light-teal-hover: var(--color-teal-500);
    --light-blue-hover: var(--color-blue-500);
    --light-violet-hover: var(--color-violet-500);
    --light-purple-hover: var(--color-purple-500);
    --light-pink-hover: var(--color-pink-500);
    --light-brown-hover: var(--color-yellow-800);
    --light-grey-hover: var(--color-neutral-400);
    --light-black-hover: var(--color-neutral-800);

    /*---  Emotive  ---*/
    --positive-color-hover: var(--color-green-600);
    --negative-color-hover: var(--color-red-600);

    /*---  Dark Tones  ---*/
    --full-black-hover: var(--color-neutral-950);
    --black-hover: var(--color-neutral-800);
    --grey-hover: var(--color-neutral-400);

    /*---  Light Tones  ---*/
    --white-hover: var(--color-gray-50);
    --off-white-hover: var(--color-gray-100);
    --dark-white-hover: var(--color-gray-200);

    /*-------------------
      Focus
    --------------------*/

    /*---  Colors  ---*/
    --primary-color-focus: var(--color-blue-600);
    --secondary-color-focus: var(--color-zinc-800);

    --red-focus: var(--color-red-600);
    --orange-focus: var(--color-orange-600);
    --yellow-focus: var(--color-yellow-600);
    --olive-focus: var(--color-lime-600);
    --green-focus: var(--color-green-600);
    --teal-focus: var(--color-teal-600);
    --blue-focus: var(--color-blue-600);
    --violet-focus: var(--color-violet-600);
    --purple-focus: var(--color-purple-600);
    --pink-focus: var(--color-pink-600);
    --brown-focus: var(--color-yellow-900);

    --light-red-focus: var(--color-red-500);
    --light-orange-focus: var(--color-orange-500);
    --light-yellow-focus: var(--color-yellow-500);
    --light-olive-focus: var(--color-lime-500);
    --light-green-focus: var(--color-green-500);
    --light-teal-focus: var(--color-teal-500);
    --light-blue-focus: var(--color-blue-500);
    --light-violet-focus: var(--color-violet-500);
    --light-purple-focus: var(--color-purple-500);
    --light-pink-focus: var(--color-pink-500);
    --light-brown-focus: var(--color-yellow-800);
    --light-grey-focus: var(--color-neutral-400);
    --light-black-focus: var(--color-neutral-800);

    /*---  Emotive  ---*/
    --positive-color-focus: var(--color-green-600);
    --negative-color-focus: var(--color-red-600);

    /*---  Dark Tones  ---*/
    --full-black-focus: var(--color-neutral-900);
    --black-focus: var(--color-neutral-700);
    --grey-focus: var(--color-neutral-300);

    /*---  Light Tones  ---*/
    --white-focus: var(--color-gray-100);
    --off-white-focus: var(--color-gray-200);
    --dark-white-focus: var(--color-gray-300);

    /*-------------------
      Down (:active)
    --------------------*/

    /*---  Colors  ---*/
    --primary-color-down: var(--color-blue-700);
    --secondary-color-down: var(--color-zinc-700);

    --red-down: var(--color-red-700);
    --orange-down: var(--color-orange-700);
    --yellow-down: var(--color-yellow-700);
    --olive-down: var(--color-lime-700);
    --green-down: var(--color-green-700);
    --teal-down: var(--color-teal-700);
    --blue-down: var(--color-blue-700);
    --violet-down: var(--color-violet-700);
    --purple-down: var(--color-purple-700);
    --pink-down: var(--color-pink-700);
    --brown-down: var(--color-yellow-950);

    --light-red-down: var(--color-red-600);
    --light-orange-down: var(--color-orange-600);
    --light-yellow-down: var(--color-yellow-600);
    --light-olive-down: var(--color-lime-600);
    --light-green-down: var(--color-green-600);
    --light-teal-down: var(--color-teal-600);
    --light-blue-down: var(--color-blue-600);
    --light-violet-down: var(--color-violet-600);
    --light-purple-down: var(--color-purple-600);
    --light-pink-down: var(--color-pink-600);
    --light-brown-down: var(--color-yellow-900);
    --light-grey-down: var(--color-neutral-500);
    --light-black-down: var(--color-neutral-900);

    /*---  Emotive  ---*/
    --positive-color-down: var(--color-green-700);
    --negative-color-down: var(--color-red-700);

    /*---  Dark Tones  ---*/
    --full-black-down: var(--color-neutral-800);
    --black-down: var(--color-neutral-600);
    --grey-down: var(--color-neutral-200);

    /*---  Light Tones  ---*/
    --white-down: var(--color-gray-200);
    --off-white-down: var(--color-gray-300);
    --dark-white-down: var(--color-gray-400);

    /*-------------------
      Active
    --------------------*/

    /*---  Colors  ---*/
    --primary-color-active: var(--color-blue-700);
    --secondary-color-active: var(--color-zinc-700);

    --red-active: var(--color-red-700);
    --orange-active: var(--color-orange-700);
    --yellow-active: var(--color-yellow-700);
    --olive-active: var(--color-lime-700);
    --green-active: var(--color-green-700);
    --teal-active: var(--color-teal-700);
    --blue-active: var(--color-blue-700);
    --violet-active: var(--color-violet-700);
    --purple-active: var(--color-purple-700);
    --pink-active: var(--color-pink-700);
    --brown-active: var(--color-yellow-950);

    --light-red-active: var(--color-red-600);
    --light-orange-active: var(--color-orange-600);
    --light-yellow-active: var(--color-yellow-600);
    --light-olive-active: var(--color-lime-600);
    --light-green-active: var(--color-green-600);
    --light-teal-active: var(--color-teal-600);
    --light-blue-active: var(--color-blue-600);
    --light-violet-active: var(--color-violet-600);
    --light-purple-active: var(--color-purple-600);
    --light-pink-active: var(--color-pink-600);
    --light-brown-active: var(--color-yellow-900);
    --light-grey-active: var(--color-neutral-500);
    --light-black-active: var(--color-neutral-900);

    /*---  Emotive  ---*/
    --positive-color-active: var(--color-green-700);
    --negative-color-active: var(--color-red-700);

    /*---  Dark Tones  ---*/
    --full-black-active: var(--color-neutral-800);
    --black-active: var(--color-neutral-600);
    --grey-active: var(--color-neutral-200);

    /*---  Light Tones  ---*/
    --white-active: var(--color-gray-200);
    --off-white-active: var(--color-gray-300);
    --dark-white-active: var(--color-gray-400);

    /*******************************
      Components
    *******************************/

    /*-------------------
      Button
    --------------------*/
    --button-background: light-dark(var(--color-gray-200), hsl(var(--hsl-neutral-800) / 70%)) none;
    --button-text-color: light-dark(hsl(var(--hsl-black) / 60%), hsl(var(--hsl-neutral-50) / 60%));
    --button-border: none;
    /* --button-border: 1px solid */
    /*   light-dark(var(--strong-transparent-black), var(--strong-transparent-white)); */
    --button-margin: 0em 0.25em 0em 0em;
    --button-padding: var(--input-vertical-padding) var(--input-horizontal-padding);
    --button-text-shadow: none;
    --button-box-shadow: 0px 0px 0px 1px
      light-dark(var(--strong-transparent-black), var(--strong-transparent-white)) inset;
    --button-font-weight: 600;
    --button-line-height: 1em;
    --button-border-radius: var(--default-squircle-radius);
    --button-corner-shape: var(--default-corner-shape);

    /* Hovered */
    --button-hover-background-color: light-dark(
      var(--color-gray-300),
      hsl(var(--hsl-neutral-700) / 70%)
    );
    --button-hover-background-image: none;
    --button-hover-box-shadow: var(--button-box-shadow);
    --button-hover-color: var(--hovered-text-color);
    --button-hover-icon-opacity: 0.85;

    /* Focused */
    --button-focus-background-color: var(--button-hover-background-color);
    --button-focus-background-image: '';
    --button-focus-box-shadow: '';
    --button-focus-color: var(--hovered-text-color);
    --button-icon-focus-opacity: 0.85;

    /* Disabled */
    --button-disabled-background-image: none;
    --button-disabled-box-shadow: none;

    /* Pressed Down */
    --button-down-background-color: light-dark(
      var(--color-gray-400),
      hsl(var(--hsl-neutral-800) / 80%)
    );
    --button-down-background-image: '';
    --button-down-pressed-shadow: none;
    --button-down-box-shadow: var(--button-box-shadow);
    --button-down-color: var(--pressed-text-color);

    /* Active */
    --button-active-background-color: light-dark(
      var(--color-gray-400),
      hsl(var(--hsl-neutral-700) / 70%)
    );
    --button-active-background-image: none;
    --button-active-color: var(--selected-text-color);
    --button-active-box-shadow: var(--button-box-shadow);

    /* Active + Hovered */
    --button-active-hover-background-color: var(--button-active-background-color);
    --button-active-hover-background-image: none;
    --button-active-hover-color: var(--button-active-color);
    --button-active-hover-box-shadow: var(--button-active-box-shadow);

    /* Loading */
    --button-loading-opacity: 1;
    --button-loading-pointer-events: auto;
    --button-loading-transition:
      all 0s linear, opacity var(--default-duration) var(--default-easing);

    /* Icon Only */
    --button-icon-only-opacity: 0.9;
    --icon-button-font-size: 1.28571429rem;

    /* Basic style */
    --basic-button-background: transparent none;
    --basic-button-text-color: var(--text-color);
    --basic-button-font-weight: normal;
    --basic-button-border-radius: var(--default-squircle-radius);
    --basic-button-box-shadow: 0px 0px 0px 1px var(--border-color) inset;

    --basic-button-hover-background: light-dark(
      var(--color-white),
      hsl(var(--hsl-neutral-800) / 50%)
    );
    --basic-button-hover-text-color: var(--hovered-text-color);
    --basic-button-hover-box-shadow: 0px 0px 0px 1px var(--selected-border-color) inset;

    --basic-button-focus-background: var(--basic-button-hover-background);
    --basic-button-focus-text-color: var(--basic-button-hover-text-color);
    --basic-button-focus-box-shadow: var(--basic-button-hover-box-shadow);

    --basic-button-down-background: light-dark(
      var(--color-gray-50),
      hsl(var(--hsl-neutral-700) / 50%)
    );
    --basic-button-down-text-color: var(--pressed-text-color);
    --basic-button-down-box-shadow: 0px 0px 0px 1px var(--strong-selected-border-color) inset;

    --basic-button-active-background: var(--transparent-black);
    --basic-button-active-box-shadow: var(--basic-button-hover-box-shadow);
    --basic-button-active-text-color: var(--selected-text-color);

    /*--- Primary ----*/

    /* Standard */
    --primary-button-background-color: var(--primary-color);
    --primary-button-text-color: var(--inverted-text-color);
    --primary-button-text-shadow: var(--inverted-text-shadow, none);
    --primary-button-background-image: none;
    --primary-button-box-shadow: var(--colored-box-shadow, var(--subtle-shadow));

    --primary-button-hover-background-color: var(--primary-color-hover);
    --primary-button-focus-background-color: var(--primary-color-focus);
    --primary-button-down-background-color: var(--primary-color-down);
    --primary-button-active-background-color: var(--primary-color-active);

    /* Basic */
    --basic-primary-button-box-shadow: 0px 0px 0px 1px var(--primary-color) inset;
    --basic-primary-button-hover-box-shadow: 0px 0px 0px 1px var(--primary-color-hover) inset;
    --basic-primary-button-focus-box-shadow: 0px 0px 0px 1px var(--primary-color-focus) inset;
    --basic-primary-button-active-box-shadow: 0px 0px 0px 1px var(--primary-color-active) inset;
    --basic-primary-button-down-box-shadow: 0px 0px 0px 1px var(--primary-color-down) inset;

    /*--- Secondary ----*/

    /* Standard */
    --secondary-button-background-color: var(--secondary-color);
    --secondary-button-text-color: var(--inverted-text-color);
    --secondary-button-text-shadow: none;
    --secondary-button-background-image: none;
    --secondary-button-box-shadow: var(--subtle-shadow);

    --secondary-button-hover-background-color: var(--secondary-color-hover);
    --secondary-button-focus-background-color: var(--secondary-color-focus);
    --secondary-button-down-background-color: var(--secondary-color-down);
    --secondary-button-active-background-color: var(--secondary-color-active);

    /* Basic */
    --basic-secondary-button-box-shadow: 0px 0px 0px 1px var(--secondary-color) inset;
    --basic-secondary-button-hover-box-shadow: 0px 0px 0px 1px var(--secondary-color-hover) inset;
    --basic-secondary-button-focus-box-shadow: 0px 0px 0px 1px var(--secondary-color-focus) inset;
    --basic-secondary-button-down-box-shadow: 0px 0px 0px 1px var(--secondary-color-down) inset;
    --basic-secondary-button-active-box-shadow: 0px 0px 0px 1px var(--secondary-color-active) inset;

    /*--- Positive ---*/

    /* Standard */
    --positive-button-background-color: var(--positive-color);
    --positive-button-text-color: var(--inverted-text-color);
    --positive-button-text-shadow: none;
    --positive-button-background-image: none;
    --positive-button-box-shadow: var(--subtle-shadow);

    --positive-button-hover-background-color: var(--positive-color-hover);
    --positive-button-focus-background-color: var(--positive-color-focus);
    --positive-button-down-background-color: var(--positive-color-down);
    --positive-button-active-background-color: var(--positive-color-active);

    /* Basic */
    --basic-positive-button-box-shadow: 0px 0px 0px 1px var(--positive-color) inset;
    --basic-positive-button-hover-box-shadow: 0px 0px 0px 1px var(--positive-color-hover) inset;
    --basic-positive-button-focus-box-shadow: 0px 0px 0px 1px var(--positive-color-focus) inset;
    --basic-positive-button-down-box-shadow: 0px 0px 0px 1px var(--positive-color-down) inset;
    --basic-positive-button-active-box-shadow: 0px 0px 0px 1px var(--positive-color-active) inset;

    /*--- Negative ---*/

    /* Standard */
    --negative-button-background-color: var(--negative-color);
    --negative-button-text-color: var(--inverted-text-color);
    --negative-button-text-shadow: none;
    --negative-button-background-image: none;
    --negative-button-box-shadow: var(--subtle-shadow);

    --negative-button-hover-background-color: var(--negative-color-hover);
    --negative-button-focus-background-color: var(--negative-color-focus);
    --negative-button-down-background-color: var(--negative-color-down);
    --negative-button-active-background-color: var(--negative-color-active);

    /* Basic */
    --basic-negative-button-box-shadow: 0px 0px 0px 1px var(--negative-color) inset;
    --basic-negative-button-hover-box-shadow: 0px 0px 0px 1px var(--negative-color-hover) inset;
    --basic-negative-button-focus-box-shadow: 0px 0px 0px 1px var(--negative-color-focus) inset;
    --basic-negative-button-down-box-shadow: 0px 0px 0px 1px var(--negative-color-down) inset;
    --basic-negative-button-active-box-shadow: 0px 0px 0px 1px var(--negative-color-active) inset;

    /*-------------------
      Divider
    --------------------*/

    --divider-text-color: var(--dark-text-color);
    --divider-border-shadow-width: 1px;
    --divider-border-shadow-color: var(--border-color);
    --divider-border-highlight-width: 1px;
    --divider-border-highlight-color: var(--white-border-color);

    /*-------------------
      Elements
    --------------------*/
    --mark-border-width: 1px;
    --mark-border-color: hsl(var(--hsl-yellow-400) / 40%);
    --mark-background-color: hsl(var(--hsl-yellow-400) / 20%);
    --mark-color: light-dark(var(--color-gray-950), var(--color-gray-50));
    --mark-font-weight: var(--font-weights-bold);
    --kbd-color: var(--muted-text-color);
    --kbd-background: light-dark(var(--off-white), var(--subtle-transparent-white));
    --kbd-border-color: var(--border-color);

    /*-------------------
      Header
    --------------------*/

    --header-text-color: var(--text-color);
    --header-vertical-padding: 0em;
    --header-horizontal-padding: 0em;
    --header-text-transform: none;
    --sub-header-text-color: var(--muted-text-color);

    --sub-header-margin: 0em;
    --sub-header-font-size: var(--medium-size);
    --sub-header-line-height: 1.2em;
    --sub-header-text-color: var(--muted-text-color);

    --h1-sub-header-font-size: var(--large-size);
    --h2-sub-header-font-size: var(--large-size);
    --h3-sub-header-font-size: var(--medium-size);
    --h4-sub-header-font-size: var(--medium-size);
    --h5-sub-header-font-size: var(--small-size);

    --huge-header-font-size: var(--h1);
    --large-header-font-size: var(--h2);
    --medium-header-font-size: var(--h3);
    --small-header-font-size: var(--h4);
    --tiny-header-font-size: var(--h5);

    --huge-sub-header-font-size: var(--h1-sub-header-font-size);
    --large-sub-header-font-size: var(--h2-sub-header-font-size);
    --sub-header-font-size: var(--h3-sub-header-font-size);
    --small-sub-header-font-size: var(--h4-sub-header-font-size);
    --tiny-sub-header-font-size: var(--h5-sub-header-font-size);

    /*-------------------
      Input
    --------------------*/

    --input-font-family: var(--page-font);
    --input-border-width: 1px;
    --input-border: var(--input-border-width) solid var(--border-color);
    --input-border-radius: var(--default-squircle-radius);
    --input-corner-shape: var(--default-corner-shape);
    --input-box-shadow: 0em 0em 0em 0em transparent inset;

    --input-down-border-color: rgba(0, 0, 0, 0.3);
    --input-down-background: var(--color-gray-50);
    --input-down-color: var(--text-color);
    --input-down-box-shadow: none;

    --input-focus-border-color: var(--focused-form-border-color);
    --input-focus-background: var(--input-background);
    --input-focus-color: var(--hovered-text-color);
    --input-focus-box-shadow: none;

    --input-error-background-color: var(--negative-background-color);
    --input-error-border-color: var(--negative-border-color);
    --input-error-color: var(--negative-text-color);
    --input-error-box-shadow: none;
    --input-placeholder-error-color: var(--color-red-300);
    --input-placeholder-error-focus-color: var(--color-red-400);

    --input-icon-width: calc(var(--input-vertical-padding) * 2 + var(--glyph-width));
    --input-icon-opacity: 0.5;
    --input-icon-focus-opacity: 1;
    --input-icon-offset: -0.5em;
    --input-icon-distance: 0em;
    --input-icon-margin: calc(var(--input-icon-width) + var(--input-icon-distance));
    --input-icon-transition: opacity 0.3s var(--default-easing);

    /*-------------------
      Label
    --------------------*/
    --label-background-image: none;
    --label-font-weight: var(--font-weights-medium);
    --label-border: 0px solid transparent;
    --label-border-radius: var(--absolute-border-radius);

    --label-hover-background-color: #e0e0e0;
    --label-hover-background-image: none;
    --label-hover-text-color: var(--hovered-text-color);

    --label-active-hover-background-color: #c8c8c8;
    --label-active-hover-background-image: none;
    --label-active-hover-text-color: var(--selected-text-color);

    --label-basic-background: none light-dark(var(--white), hsl(var(--hsl-neutral-50) / 5%));
    --label-basic-border-width: 1px;
    --label-basic-border-color: var(--border-color);
    --label-basic-border: var(--label-basic-border-width) solid var(--label-basic-border-color);
    --label-basic-text-color: var(--text-color);
    --label-basic-box-shadow: none;
    --label-basic-hover-background: var(--label-basic-background);
    --label-basic-hover-color: var(--link-hover-color);
    --label-basic-hover-border: var(--label-basic-border);
    --label-basic-hover-box-shadow: var(--label-basic-box-shadow);

    /*-------------------
      List
    --------------------*/
    --selection-list-item-border-radius: 0.5em;
    --selection-list-hover-background: light-dark(
      var(--subtle-transparent-black),
      var(--subtle-transparent-white)
    );
    --selection-list-hover-color: var(--hovered-text-color);
    --selection-list-down-background: light-dark(
      var(--transparent-black),
      var(--transparent-white)
    );
    --selection-list-down-color: var(--pressed-text-color);
    --selection-list-active-background: light-dark(
      var(--transparent-black),
      var(--transparent-white)
    );
    --selection-list-active-color: var(--selected-text-color);

    /*-------------------
      Loader
    --------------------*/
    --loader-shape-border-color: var(--loader-line-color) transparent transparent;
    --loader-text-color: var(--text-color);

    /*-------------------
      Segment
    --------------------*/
    --segment-background: light-dark(var(--white), var(--color-neutral-900));
    --segment-border: 1px solid var(--border-color);
    --segment-box-shadow: var(--subtle-shadow);
    --segment-corner-shape: var(--default-corner-shape);
    --segment-border-radius: var(--default-squircle-radius);
    --secondary-segment-background: light-dark(
      var(--dark-white),
      hsl(var(--hsl-neutral-700) / 50%)
    );
    --secondary-segment-color: var(--muted-text-color);
    --grouped-segment-box-shadow: none;
    --grouped-segment-border: none;
    --grouped-segment-divider: 1px solid var(--border-color);
    /* --grouped-segment-group-border: 1px solid var(--border-color); */
    --grouped-segment-group-border: none;
    --grouped-segment-group-segment-box-shadow:
      0 0 0 1px light-dark(hsl(var(--hsl-neutral-900) / 0.1), hsl(var(--hsl-neutral-100) / 10%)),
      0 1px 1px hsl(var(--hsl-neutral-900) / 0.1),
      0 1.5px 3px -2px hsl(var(--hsl-neutral-900) / 0.3),
      0 4px 6px hsl(var(--hsl-neutral-900) / 0.04),
      0 8px 12px -1px hsl(var(--hsl-neutral-900) / 0.03);
    --grouped-segment-group-border-radius: var(--default-squircle-radius);
    --grouped-segment-hover-background: light-dark(
      var(--off-white),
      hsl(var(--hsl-neutral-800) / 80%)
    );
    --piled-segments-border: 1px solid var(--border-color);
    --piled-segments-background: light-dark(
      var(--subtle-transparent-black),
      var(--color-neutral-900)
    );
    --stacked-segment-page-background: var(--subtle-transparent-black);

    /*-------------------
      Form
    --------------------*/
    --form-input-font: var(--page-font);
    --form-input-font-size: 1em;
    --form-label-color: var(--text-color);
    --form-label-font-size: var(--relative-small);
    --form-label-font-weight: var(--font-weights-bold);
    --form-textarea-line-height: 1.2857;
    --form-select-background: light-dark(var(--white), var(--color-neutral-900));
    --form-select-border: var(--input-border);
    --form-select-corner-shape: var(--default-corner-shape);
    --form-select-border-radius: var(--input-border-radius);
    --form-select-box-shadow: var(--input-box-shadow);
    --form-select-color: var(--input-color);
    --form-prompt-background: light-dark(var(--white), var(--color-neutral-800));
    --form-prompt-border-color: var(--negative-border-color);
    --form-prompt-border: 1px solid var(--form-prompt-border-color);
    --form-prompt-text-color: var(--negative-text-color);
    --form-input-corner-shape: var(--default-corner-shape);
    --form-input-border-radius: var(--input-border-radius);
    --form-input-focus-color: var(--selected-text-color);
    --form-input-focus-border-color: var(--focused-form-border-color);
    --form-input-focus-border-radius: var(--form-input-border-radius);
    --form-input-focus-background: var(--input-background);
    --form-input-focus-box-shadow: 0px 0em 0em 0em var(--selected-border-color) inset;
    --form-textarea-focus-color: var(--selected-text-color);
    --form-textarea-focus-border-color: var(--focused-form-border-color);
    --form-textarea-focus-border-radius: var(--form-input-border-radius);
    --form-textarea-focus-background: var(--input-background);
    --form-textarea-focus-box-shadow: 0px 0em 0em 0em var(--selected-border-color) inset;

    --form-error-color: var(--negative-text-color);
    --form-error-border-color: var(--negative-border-color);
    --form-error-border-radius: var(--default-border-radius);
    --form-error-background: var(--negative-background-color);
    --form-error-box-shadow: none;
    --form-error-focus-color: var(--negative-text-color);
    --form-error-focus-border-color: var(--negative-border-color);
    --form-error-focus-background: var(--negative-background-color);
    --form-error-focus-box-shadow: none;

    --form-loader-dimmer-color: transparent;
    --form-loader-dimmer-z-index: 100;
    --form-inline-label-color: var(--text-color);
    --form-inline-label-font-size: var(--relative-small);
    --form-inline-label-font-weight: var(--font-weights-bold);
    --form-inline-input-size: var(--relative-medium);

    /*-------------------
      Menu
    --------------------*/
    --menu-background: light-dark(var(--white), var(--color-neutral-900));
    --menu-font-weight: normal;
    --menu-font-family: var(--page-font);
    --menu-border: 1px solid var(--border-color);
    --menu-shadow: var(--subtle-shadow);
    --menu-border-radius: var(--default-squircle-radius);
    --menu-corner-shape: var(--default-corner-shape);
    --menu-item-background: none;
    --menu-item-text-color: var(--text-color);
    --menu-item-font-weight: normal;
    --menu-divider-background: var(--internal-border-color);
    --menu-hover-item-background: light-dark(
      var(--subtle-transparent-black),
      var(--subtle-transparent-white)
    );
    --menu-hover-item-text-color: var(--selected-text-color);
    --menu-pressed-item-background: light-dark(
      var(--subtle-transparent-black),
      var(--subtle-transparent-white)
    );
    --menu-pressed-item-text-color: var(--selected-text-color);
    --menu-active-item-background: var(--transparent-black);
    --menu-active-item-text-color: var(--selected-text-color);
    --menu-active-item-font-weight: normal;
    --menu-active-item-box-shadow: none;
    --menu-active-hover-item-background: light-dark(
      var(--transparent-black),
      var(--transparent-white)
    );
    --menu-active-hover-item-color: var(--selected-text-color);
    --vertical-menu-background: light-dark(
      hsl(var(--hsl-white) / 70%),
      hsl(var(--hsl-neutral-900) / 70%)
    );
    --vertical-menu-box-shadow: var(--subtle-shadow);
    --vertical-menu-item-background: none;
    --vertical-menu-item-active-background: light-dark(
      var(--transparent-black),
      var(--transparent-white)
    );
    --vertical-divider-background: var(--internal-border-color);
    --tabular-menu-background: none transparent;
    --tabular-menu-border-width: 1px;
    --tabular-menu-border-color: var(--solid-border-color);
    --tabular-menu-text-color: var(--menu-item-text-color);
    --tabular-menu-hovered-text-color: var(--hovered-text-color);
    --tabular-menu-active-background: none light-dark(var(--white), hsl(var(--hsl-neutral-800)));
    --tabular-menu-active-color: var(--selected-text-color);
    --tabular-menu-active-box-shadow: none;
    --tabular-menu-border-radius: var(--default-border-radius);
    --secondary-menu-background: none;
    --secondary-menu-item-background: none;
    --secondary-menu-item-border-radius: var(--default-border-radius);
    --secondary-menu-header-border: none;
    --secondary-menu-header-background: none transparent;
    --secondary-menu-hover-item-background: var(--transparent-black);
    --secondary-menu-hover-item-color: var(--selected-text-color);
    --secondary-menu-active-item-background: var(--transparent-black);
    --secondary-menu-active-item-color: var(--selected-text-color);
    --secondary-menu-active-hover-item-background: var(--transparent-black);
    --secondary-menu-active-hover-item-color: var(--selected-text-color);
    --secondary-vertical-pointing-menu-border-right-color: var(--border-color);
    --secondary-vertical-menu-item-border-radius: var(--default-border-radius);
    --secondary-pointing-menu-hover-text-color: light-dark(
      var(--text-color),
      var(--highlight-color)
    );
    --secondary-pointing-menu-active-item-color: var(--selected-text-color);
    --secondary-pointing-menu-active-hover-item-color: var(--selected-text-color);

    /*-------------------
      Message
    --------------------*/
    --message-background: light-dark(hsl(var(--hsl-zinc-400) / 10%), hsl(var(--hsl-zinc-50) / 15%));
    --message-shadow-shadow: 0px 0px 0px 0px
      light-dark(rgba(0, 0, 0, 0), hsl(var(--hsl-white) / 20%));
    --message-box-shadow:
      0px 0px 0px 1px var(--strong-border-color) inset, var(--message-shadow-shadow);
    --message-header-font-weight: var(--font-weights-bold);
    --message-header-font-size: var(--relative-large);
    --message-text-opacity: 0.85;
    --message-list-opacity: 0.85;
    --positive-box-shadow:
      0px 0px 0px 1px var(--positive-border-color) inset, var(--message-shadow-shadow);
    --negative-box-shadow:
      0px 0px 0px 1px var(--negative-border-color) inset, var(--message-shadow-shadow);
    --info-box-shadow: 0px 0px 0px 1px var(--info-border-color) inset, var(--message-shadow-shadow);
    --warning-box-shadow:
      0px 0px 0px 1px var(--warning-border-color) inset, var(--message-shadow-shadow);
    --error-box-shadow:
      0px 0px 0px 1px var(--error-border-color) inset, var(--message-shadow-shadow);
    --success-box-shadow:
      0px 0px 0px 1px var(--success-border-color) inset, var(--message-shadow-shadow);

    /*-------------------
      Popup
    --------------------*/
    --popup-z-index: 10;
    --popup-border-width: 1px;
    --popup-border-color: var(--solid-border-color);
    --popup-border: var(--popup-border-width) solid var(--solid-border-color);
    --popup-background: light-dark(var(--white), var(--color-neutral-900));
    --popup-color: var(--text-color);
    --popup-box-shadow: var(--floating-shadow);
    --popup-vertical-padding: 0.833em;
    --popup-horizontal-padding: 1em;
    --popup-font-weight: normal;
    --popup-font-style: normal;
    --popup-border-radius: var(--default-squircle-radius);

    --popup-header-font-size: var(--relative-large);
    --popup-header-font-weight: bold;
    --popup-header-line-height: 1.2;
    --popup-header-distance: var(--relative7px);

    --popup-arrow-background: var(--popup-background);
    --popup-arrow-top-background: var(--popup-arrow-background);
    --popup-arrow-center-background: var(--popup-arrow-background);
    --popup-arrow-bottom-background: var(--popup-arrow-background);
    --popup-arrow-box-shadow: var(--popup-border-width) var(--popup-border-width) 0px 0px
      var(--popup-border-color);
    --popup-left-arrow-box-shadow: var(--popup-border-width) calc(var(--popup-border-width) * -1)
      0px 0px var(--popup-border-color);
    --popup-right-arrow-box-shadow: calc(var(--popup-border-width) * -1) var(--popup-border-width)
      0px 0px var(--popup-border-color);
    --popup-bottom-arrow-box-shadow: calc(var(--popup-border-width) * -1)
      calc(var(--popup-border-width) * -1) 0px 0px var(--popup-border-color);

    --tooltip-z-index: 20;
    --tooltip-background: var(--popup-background);
    --tooltip-color: var(--muted-text-color);
    --tooltip-border-width: 1px;
    --tooltip-border: var(--popup-border);
    --tooltip-box-shadow: var(--popup-box-shadow);
    --tooltip-border-radius: var(--popup-border-radius);
    --tooltip-border-color: var(--solid-border-color);
    --tooltip-vertical-padding: 0.6em;
    --tooltip-horizontal-padding: 0.8em;
    --tooltip-padding: var(--popup-vertical-padding) var(--popup-horizontal-padding);
    --tooltip-font-size: var(--mini);
    --tooltip-font-weight: var(--popup-font-weight);
    --tooltip-font-style: var(--popup-font-style);
    --tooltip-line-height: var(--line-height);
    --tooltip-arrow-background: var(--tooltip-background);
    --tooltip-arrow-box-shadow: var(--tooltip-border-width) var(--tooltip-border-width) 0px 0px
      var(--tooltip-border-color);
    --tooltip-arrow-top-background: var(--tooltip-arrow-background);
    --tooltip-arrow-bottom-background: var(--tooltip-arrow-background);
    --tooltip-bottom-arrow-box-shadow: calc(var(--tooltip-border-width) * -1)
      calc(var(--tooltip-border-width) * -1) 0px 0px var(--tooltip-border-color);
    --tooltip-left-arrow-box-shadow: var(--tooltip-border-width)
      calc(var(--tooltip-border-width) * -1) 0px 0px var(--tooltip-border-color);
    --tooltip-right-arrow-box-shadow: calc(var(--tooltip-border-width) * -1)
      var(--tooltip-border-width) 0px 0px var(--tooltip-border-color);

    /*-------------------
      Table
    --------------------*/
    --table-background: light-dark(hsl(var(--hsl-white) / 20%), hsl(var(--hsl-neutral-800) / 20%));
    --table-border-width: 1px;
    --table-border: var(--table-border-width) solid var(--border-color);
    --table-box-shadow: noone;
    --table-header-background: light-dark(
      hsl(var(--hsl-gray-200) / 30%),
      hsl(var(--hsl-neutral-700) / 30%)
    );
    --table-header-color: var(--text-color);
    --table-header-font-style: none;
    --table-header-font-weight: var(--font-weights-bold);
    --table-header-border: 1px solid var(--internal-border-color);
    --table-header-divider: none;
    --table-row-border: 1px solid var(--internal-border-color);

    /*-------------------
      Checkbox
    --------------------*/
    --checkbox-color: var(--text-color);
    --checkbox-background: light-dark(var(--white), var(--color-neutral-800));
    --checkbox-corner-shape: var(--default-corner-shape);
    --checkbox-border-radius: var(--8px);
    --checkbox-border: 1px solid var(--solid-border-color);
    --checkbox-label-color: var(--text-color);
    --checkbox-hover-background: var(--checkbox-background);
    --checkbox-hover-border-color: var(--selected-border-color);
    --checkbox-label-hover-color: var(--hovered-text-color);
    --checkbox-pressed-background: light-dark(var(--off-white), var(--color-neutral-900));
    --checkbox-pressed-border-color: var(--selected-border-color);
    --checkbox-pressed-color: var(--selected-text-color);
    --checkbox-pressed-label-color: var(--selected-text-color);
    --checkbox-focus-background: light-dark(var(--white), var(--color-neutral-700));
    --checkbox-focus-border-color: var(--focused-form-muted-border-color);
    --checkbox-focus-check-color: var(--selected-text-color);
    --checkbox-focus-label-color: var(--selected-text-color);
    --checkbox-active-background: var(--primary-color);
    --checkbox-active-border-color: var(--primary-color);
    --checkbox-active-check-opacity: 0.9;
    --checkbox-active-check-color: var(--inverted-text-color);
    --checkbox-intermediate-background: var(--checkbox-active-background);
    --checkbox-intermediate-border-color: var(--checkbox-active-border-color);
    --checkbox-intermediate-check-opacity: 1;
    --checkbox-intermediate-check-color: var(--checkbox-active-check-color);
    --checkbox-active-focus-background: var(--checkbox-active-background);
    --checkbox-active-focus-border-color: var(--checkbox-active-border-color);
    --checkbox-active-focus-check-color: var(--checkbox-active-check-color);
    --checkbox-disabled-opacity: 0.5;
    --checkbox-disabled-label-color: light-dark(rgba(0, 0, 0, 1), #000000);
    --radio-bullet-color: var(--text-color);
    --radio-focus-background: var(--checkbox-focus-background);
    --radio-focus-bullet-color: var(--checkbox-focus-check-color);
    --radio-active-background: var(--checkbox-active-background);
    --radio-active-bullet-color: var(--checkbox-active-check-color);
    --radio-active-focus-background: var(--checkbox-active-focus-background);
    --radio-active-focus-bullet-color: var(--checkbox-active-focus-check-color);
    --toggle-off-label-color: var(--checkbox-color);
    --toggle-lane-background: light-dark(var(--transparent-black), var(--transparent-white));
    --toggle-lane-box-shadow: none;
    --toggle-handle-radius: var(--circular-radius);
    --toggle-handle-background: light-dark(var(--white), var(--color-neutral-100))
      var(--subtle-gradient);
    --toggle-handle-box-shadow: var(--subtle-shadow), 0px 0px 0px 1px var(--border-color) inset;
    --toggle-focus-color: light-dark(
      var(--very-strong-transparent-black),
      var(--transparent-white)
    );
    --toggle-hover-color: var(--toggle-focus-color);
    --toggle-on-label-color: var(--selected-text-color);
    --toggle-on-lane-color: var(--primary-color);
    --toggle-on-handle-box-shadow: var(--toggle-handle-box-shadow);
    --toggle-on-focus-label-color: var(--toggle-on-label-color);
    --toggle-on-focus-lane-color: var(--primary-color-focus);

    /*-------------------
      Dropdown
    --------------------*/

    --dropdown-menu-background: light-dark(var(--white), var(--color-neutral-900));
    --dropdown-menu-box-shadow: var(--raised-shadow);
    --dropdown-menu-border-width: 1px;
    --dropdown-menu-border-color: var(--border-color);
    --dropdown-menu-border: var(--dropdown-menu-border-width) solid
      var(--dropdown-menu-border-color);
    --dropdown-menu-border-radius: var(--default-squircle-radius);
    --dropdown-menu-corner-shape: var(--default-corner-shape);
    --dropdown-selection-corner-shape: var(--default-corner-shape);
    --dropdown-selection-border-radius: var(--default-squircle-radius);
    --dropdown-selection-menu-border-radius: 0em 0em var(--default-squircle-radius)
      var(--default-squircle-radius);
    --dropdown-menu-item-border: none;
    --dropdown-menu-item-divider: none;
    --dropdown-menu-item-color: var(--text-color);
    --dropdown-menu-item-font-weight: var(--font-weights-normal);
    --dropdown-menu-header-color: var(--dark-text-color);
    --dropdown-menu-divider-border: 1px solid var(--internal-border-color);
    --dropdown-menu-item-description-color: var(--light-text-color);
    --dropdown-menu-message-color: var(--unselected-text-color);
    --inline-dropdown-menu-background: light-dark(
      hsl(var(--hsl-white) / 70%),
      hsl(var(--hsl-neutral-900) / 70%)
    );
    --inline-dropdown-text-font-weight: var(--font-weights-bold);
    --dropdown-active-item-background: transparent;
    --dropdown-active-item-font-weight: var(--font-weights-bold);
    --dropdown-active-item-color: var(--selected-text-color);
    --dropdown-hovered-item-background: light-dark(
      var(--transparent-black),
      var(--transparent-white)
    );
    --dropdown-hovered-item-color: var(--selected-text-color);
    --dropdown-default-text-color: var(--input-placeholder-color);
    --dropdown-default-text-focus-color: var(--input-placeholder-focus-color);
    --dropdown-selected-background: light-dark(
      var(--subtle-transparent-black),
      var(--transparent-white)
    );
    --dropdown-selected-color: var(--selected-text-color);
    --dropdown-error-item-hover-background: #fff2f2;
    --dropdown-error-item-active-background: #fdcfcf;

    /*-------------------
      Modal
    --------------------*/
    --modal-border: none;
    --modal-border-radius: var(--large-squircle-radius);
    --modal-corner-shape: var(--default-corner-shape);
    --modal-box-shadow:
      0 2.8px 2.2px rgba(0, 0, 0, 0.067), 0 6.7px 5.3px rgba(0, 0, 0, 0.097),
      0 12.5px 10px rgba(0, 0, 0, 0.12), 0 22.3px 17.9px rgba(0, 0, 0, 0.143),
      0 41.8px 33.4px rgba(0, 0, 0, 0.173), 0 100px 80px rgba(0, 0, 0, 0.24);
    --modal-box-close-opacity: 0.8;
    --modal-box-close-size: 1.25em;
    --modal-box-close-color: light-dark(var(--white), var(--text-color));
    --modal-box-header-background: light-dark(var(--white), var(--color-neutral-900));
    --modal-box-header-color: light-dark(var(--dark-text-color), var(--light-text-color));
    --modal-box-header-border: 1px solid var(--border-color);
    --modal-box-header-font-size: 1rem;
    --modal-box-header-font-weight: var(--font-weights-bold);
    --modal-box-content-font-size: 1em;
    --modal-box-content-background: light-dark(var(--white), var(--color-neutral-900));
    --modal-box-actions-background: light-dark(var(--off-white), var(--color-neutral-800));
    --modal-box-actions-border: 1px solid var(--border-color);

    /*-------------------
      Side Bar
    --------------------*/
    --sidebar-background: light-dark(var(--color-gray-100), var(--color-neutral-900));
    --sidebar-border-right: 1px solid light-dark(var(--border-color), hsl(var(--hsl-neutral-800)));
    --sidebar-menu-item-inactive-background: light-dark(
      hsl(var(--hsl-sky-800) / 20%),
      hsl(var(--hsl-blue-300) / 20%)
    );
    --sidebar-menu-item-active-background: light-dark(
      var(--primary-color),
      hsl(var(--hsl-blue-300) / 30%)
    );
    --sidebar-menu-section-color: var(--unselected-text-color);
    --sidebar-menu-section-separator-color: light-dark(
      var(--internal-border-color),
      rgba(255, 255, 255, 0.1)
    );
    --sidebar-menu-item-color: light-dark(var(--dark-text-color), var(--muted-text-color));
    --sidebar-menu-active-item-color: light-dark(var(--dark-text-color), var(--text-color));
    --sidebar-menu-action-color: light-dark(var(--light-text-color), var(--disabled-text-color));
    --sidebar-menu-action-hover-color: var(--light-text-color);
    --sidebar-sync-status-view-background: light-dark(
      var(--subtle-transparent-white),
      hsl(var(--hsl-neutral-800) / 50%)
    );
    --sidebar-sync-status-view-text-color: var(--muted-text-color);
    --sidebar-sync-status-view-detail-color: var(--unselected-text-color);
    --sidebar-sync-status-view-border-top: 1px solid var(--border-color);
    --sidebar-scrollbar-width: 6px;
    --sidebar-scrollbar-track-background: rgba(255, 255, 255, 0.02);
    --sidebar-scrollbar-thumb-background: rgba(255, 255, 255, 0.2);
    --sidebar-notification-view-background: var(--warning-color);
    --sidebar-notification-view-color: light-dark(
      var(--warning-text-color),
      hsl(var(--hsl-amber-900) / 90%)
    );

    /*-------------------
      Scroll Bar
    --------------------*/
    --scrollbar-width: 6px;
    --scrollbar-track-background: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.02));
    --scrollbar-thumb-background: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));

    /*-------------------
      Note List Bar
    --------------------*/
    --note-list-bar-background: light-dark(
      var(--color-stone-50),
      hsl(var(--hsl-neutral-900) / 50%)
    );
    --note-list-bar-border-right: 1px solid
      light-dark(var(--white-down), hsl(var(--hsl-neutral-800) / 75%));
    --note-list-bar-pinned-section-header-background: var(--color-neutral-200);
    --note-list-bar-pinned-section-header-border-bottom: none;
    --note-list-bar-pinned-section-footer-border-bottom: 4px solid #ccc;
    --note-list-view-item-header-color: var(--text-color);
    --note-list-view-item-color: var(--muted-text-color);
    --note-list-view-item-separator-border: 1px solid
      light-dark(var(--white-down), hsl(var(--hsl-neutral-800) / 75%));
    --note-list-view-item-date-color: var(--primary-color);
    --note-list-view-item-selected-background: light-dark(
      hsl(var(--hsl-sky-800) / 20%),
      hsl(var(--hsl-blue-300) / 20%)
    );
    --note-list-view-item-active-background: light-dark(
      var(--primary-color),
      hsl(var(--hsl-blue-300) / 40%)
    );
    --note-list-header-separator-border: none;
    --note-search-bar-background: transparent;
    --note-search-bar-input-border: 1px solid var(--internal-border-color);
    --note-search-bar-input-background: var(--input-background);

    /*-------------------
      Editor
    --------------------*/
    --editor-background: light-dark(var(--color-white), var(--color-neutral-950));
    --editor-header-title-input-background: transparent;
    --editor-floating-actions-background: light-dark(
      hsl(var(--hsl-white) / 60%),
      hsl(var(--hsl-neutral-800) / 60%)
    );
    --editor-drawer-background: light-dark(
      hsl(var(--hsl-white) / 70%),
      hsl(var(--hsl-neutral-900) / 70%)
    );
    --editor-drawer-border-left: 1px solid var(--border-color);
    --note-tags-bar-input-background: transparent;

    /*-------------------
      Header Note Menu
    --------------------*/
    --header-note-menu-background: transparent;
    --header-note-menu-color: var(--light-text-color);
    --header-note-menu-action-item-active-background: var(--info-background-color);
    --header-note-menu-action-item-active-border: 1px solid var(--info-border-color);
    --header-note-menu-action-item-separator-border: 1px solid var(--white-down);
    --header-note-menu-encrypt-button-color: var(--yellow-text-color);
    --header-note-menu-encrypt-button-background: var(--yellow-background);

    /*-------------------
      Notifications
    --------------------*/
    --notification-item-background: light-dark(
      hsl(var(--hsl-white) / 80%),
      hsl(var(--hsl-neutral-900) / 80%)
    );

    /*-------------------
      Preferences
    --------------------*/
    --preferences-sidebar-background: light-dark(var(--color-gray-100), var(--color-neutral-900));
    --preferences-sidebar-item-active-background: light-dark(
      hsl(var(--hsl-sky-800) / 20%),
      hsl(var(--hsl-blue-300) / 20%)
    );
    --preferences-view-background: light-dark(var(--color-white), var(--color-neutral-950));
  }

  /*-------------------------------
    Acrylic background window
  --------------------------------*/

  :root:has(body.acrylic-window) {
    --page-background: transparent;
    --sidebar-background: light-dark(var(--subtle-transparent-white), hsl(var(--hsl-black) / 10%));
    --note-list-bar-background: light-dark(
      hsl(var(--hsl-stone-100) / 80%),
      hsl(var(--hsl-neutral-900) / 50%)
    );
    --editor-background: light-dark(hsl(var(--hsl-white) / 70%), hsl(var(--hsl-neutral-950) / 60%));
    --editor-drawer-background: light-dark(hsl(var(--hsl-white)), hsl(var(--hsl-neutral-800)));
    --inline-dropdown-menu-background: light-dark(
      hsl(var(--hsl-white)),
      hsl(var(--hsl-neutral-900))
    );
    --vertical-menu-background: light-dark(hsl(var(--hsl-white)), hsl(var(--hsl-neutral-900)));
  }

  /*-------------------------------
    Windows with acrylic background on dark mode
  --------------------------------*/

  :root:has(body.acrylic-window[class*='dark-ui'].platform-win32),
  :root:has(body.dark-mode.acrylic-window.platform-win32) {
    --sidebar-background: hsl(var(--hsl-black) / 20%);
    --page-background: hsl(var(--hsl-black) / 40%);
  }
}