/* ==========================================================================
 Auto: follows the device. Matcha (theme-matcha.css, always loaded) by day;
 when the device is set dark, Hojicha's tokens, the same block as
 theme-hojicha.css. Change both together.
========================================================================== */

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

    /* Body & Navigation */
    --background-body: var(--gb-dark);
    --background-nav: var(--gb-dark1);
    --color-nav: var(--gb-light4);

    /* Backgrounds */
    --background-subnav: var(--gb-dark2);
    --background-subnav-tab-active: var(--gb-dark1);
    --background-control: var(--gb-dark1);
    --background-section: var(--gb-dark1);
    --background-light: var(--gb-dark-soft);

    /* Borders */
    --border-light: var(--gb-dark-soft);
    --border-medium: var(--gb-dark2);
    --border-dark: var(--gb-dark3);

    /* Typography */
    --color-primary: var(--gb-light4);
    --color-secondary: var(--gb-light3);
    --color-muted: var(--gb-light4);
    --color-faint: var(--gb-gray);
    --color-strong: var(--gb-light);

    /* Links */
    --link: var(--gb-bright-aqua);
    --link-hover: var(--gb-aqua);

    /* Buttons: the primary action gruvbox's faded green folded into the
       card's gray, the secondary one in the page's dark, and a destructive
       one the faded red with the bright red for its text */
    --button-primary-background: color-mix(in oklab, var(--gb-faded-green) 35%, var(--gb-dark1));
    --button-primary-color: var(--gb-light);
    --button-primary-border: var(--gb-faded-green);
    --button-secondary-background: var(--gb-dark);
    --button-danger-background: color-mix(in oklab, var(--gb-faded-red) 35%, var(--gb-dark1));
    --button-danger-color: var(--gb-bright-red);
    --button-danger-border: var(--gb-faded-red);

    /* Forms & Inputs */
    --input-border: var(--gb-dark3);
    --input-border-focus: var(--gb-bright-aqua);
    --input-background: var(--gb-dark);
    --input-placeholder: var(--gb-gray);
    --input-disabled-background: var(--gb-dark1);
    --input-disabled-color: var(--gb-gray);
    --checkbox-checked: var(--gb-bright-purple);

    /* Shadows */
    --shadow-color: rgb(0 0 0 / 30%);
    --shadow-color-heavy: rgb(0 0 0 / 40%);

    /* Selection */
    --selected-background: var(--background-control);
    --switch-on: var(--selected-background);
    --switch-on-border: var(--selected-border);
    --selected-color: var(--gb-bright-purple);
    --selected-border: var(--gb-purple);

    /* Accent */
    --color-accent: var(--gb-bright-purple);
    --color-accent-strong: var(--gb-bright-purple);

    /* Status */
    --color-danger: var(--gb-bright-red);
    --color-success: var(--gb-bright-green);
    --urgent: var(--gb-bright-orange);
    --warning: var(--gb-orange);
    --success: var(--gb-bright-green);
    --success-hover: var(--gb-green);
    --error: var(--gb-bright-orange);
    --error-background: var(--orange-950);
    --info: var(--gb-bright-blue);

    /* Alerts */
    --alert-success-bg: var(--green-950);
    --alert-success-border: var(--green-900);
    --alert-success-color: var(--gb-bright-green);
    --alert-danger-bg: var(--red-950);
    --alert-danger-border: var(--red-900);
    --alert-danger-color: var(--gb-bright-red);

    /* Financial */
    --credit: var(--gb-bright-green);

    /* Labels: gruvbox's faded hues folded into the card's gray */
    --label-blue: color-mix(in oklab, var(--gb-faded-blue) 45%, var(--gb-dark1));
    --label-gray: var(--gb-dark2);
    --label-green: color-mix(in oklab, var(--gb-faded-green) 45%, var(--gb-dark1));
    --label-orange: color-mix(in oklab, var(--gb-faded-orange) 45%, var(--gb-dark1));
    --label-purple: color-mix(in oklab, var(--gb-faded-purple) 45%, var(--gb-dark1));
    --label-red: color-mix(in oklab, var(--gb-faded-red) 45%, var(--gb-dark1));
    --label-yellow: color-mix(in oklab, var(--gb-faded-yellow) 45%, var(--gb-dark1));

    /* Badges: outlined, the hue in the line and the text, no fill; the
       bright hue folded toward the secondary text's gray so it doesn't glow */
    --badge-fill: 0%;
    --label-blue-line: color-mix(in oklab, var(--gb-bright-blue) 55%, var(--gb-light3));
    --label-gray-line: var(--border-dark);
    --label-green-line: color-mix(in oklab, var(--gb-bright-green) 55%, var(--gb-light3));
    --label-orange-line: color-mix(in oklab, var(--gb-bright-orange) 55%, var(--gb-light3));
    --label-purple-line: color-mix(in oklab, var(--gb-bright-purple) 55%, var(--gb-light3));
    --label-red-line: color-mix(in oklab, var(--gb-bright-red) 55%, var(--gb-light3));
    --label-yellow-line: color-mix(in oklab, var(--gb-bright-yellow) 55%, var(--gb-light3));
    --label-blue-ink: color-mix(in oklab, var(--gb-bright-blue) 55%, var(--gb-light3));
    --label-gray-ink: var(--color-strong);
    --label-green-ink: color-mix(in oklab, var(--gb-bright-green) 55%, var(--gb-light3));
    --label-orange-ink: color-mix(in oklab, var(--gb-bright-orange) 55%, var(--gb-light3));
    --label-purple-ink: color-mix(in oklab, var(--gb-bright-purple) 55%, var(--gb-light3));
    --label-red-ink: color-mix(in oklab, var(--gb-bright-red) 55%, var(--gb-light3));
    --label-yellow-ink: color-mix(in oklab, var(--gb-bright-yellow) 55%, var(--gb-light3));

    /* Icons */
    --icon-violet: var(--gb-bright-purple);
    --icon-yellow: var(--gb-bright-yellow);

    /* Highlights */
    --hl-blue: var(--blue-950);
    --hl-gray: var(--gb-dark2);
    --hl-green: var(--lime-950);
    --hl-orange: var(--orange-950);
    --hl-purple: var(--purple-950);
    --hl-red: var(--red-950);
    --hl-slate: var(--gb-dark1);
    --hl-yellow: var(--yellow-950);

    /* Marks */
    --mark-yellow: var(--yellow-950);

    /* Focus */
    --focus-ring: var(--gb-bright-aqua);

    /* Tables */
    --background-table-header: var(--hl-gray);
  }
}