:where(html) {
    /* Animation Props */
    --animation-fade-in: fade-in 0.5s var(--ease-3);
    --animation-fade-in-bloom: fade-in-bloom 2s var(--ease-3);
    --animation-fade-out: fade-out 0.5s var(--ease-3);
    --animation-fade-out-bloom: fade-out-bloom 2s var(--ease-3);
    --animation-scale-up: scale-up 0.5s var(--ease-3);
    --animation-scale-down: scale-down 0.5s var(--ease-3);
    --animation-slide-out-up: slide-out-up 0.5s var(--ease-3);
    --animation-slide-out-down: slide-out-down 0.5s var(--ease-3);
    --animation-slide-out-right: slide-out-right 0.5s var(--ease-3);
    --animation-slide-out-left: slide-out-left 0.5s var(--ease-3);
    --animation-slide-in-up: slide-in-up 0.5s var(--ease-3);
    --animation-slide-in-down: slide-in-down 0.5s var(--ease-3);
    --animation-slide-in-right: slide-in-right 0.5s var(--ease-3);
    --animation-slide-in-left: slide-in-left 0.5s var(--ease-3);
    --animation-shake-x: shake-x 0.75s var(--ease-out-5);
    --animation-shake-y: shake-y 0.75s var(--ease-out-5);
    --animation-shake-z: shake-z 1s var(--ease-in-out-3);
    --animation-spin: spin 2s linear infinite;
    --animation-ping: ping 5s var(--ease-out-3) infinite;
    --animation-blink: blink 1s var(--ease-out-3) infinite;
    --animation-float: float 3s var(--ease-in-out-3) infinite;
    --animation-bounce: bounce 2s var(--ease-squish-2) infinite;
    --animation-pulse: pulse 2s var(--ease-out-3) infinite;
    --dev: rgb(128 0 0 / 0.2);

    /* Aspect Ratios */
    --ratio-square: 1;
    --ratio-landscape: 4/3;
    --ratio-portrait: 3/4;
    --ratio-widescreen: 16/9;
    --ratio-ultrawide: 18/5;
    --ratio-golden: 1.618/1;

    /* Border Props */
    --border-size-1: 1px;
    --border-size-2: 2px;
    --border-size-3: 5px;
    --border-size-4: 10px;
    --border-size-5: 25px;

    /* Border Radius - Updated to match Expressive design */
    --radius-none: 0px; /* 0dp */
    --radius-x-small: 4px; /* 4dp */
    --radius-small: 8px; /* 8dp */
    --radius-medium: 12px; /* 12dp */
    --radius-large: 16px; /* 16dp */
    --radius-large-increased: 20px; /* 20dp */
    --radius-x-large: 28px; /* 28dp */
    --radius-x-large-increased: 32px; /* 32dp */
    --radius-xx-large: 48px; /* 48dp */
    --radius-full: 1e5px; /* fully rounded corners */

    /* Time/Duration Props */
    --minute: 60s;
    --hour: calc(60 * var(--minute));
    --day: calc(24 * var(--hour));
    --week: calc(7 * var(--day));
    --month: calc(30 * var(--day));
    --year: calc(365 * var(--day));

    /* Easing Props */
    --ease-1: cubic-bezier(0.25, 0, 0.5, 1);
    --ease-2: cubic-bezier(0.25, 0, 0.4, 1);
    --ease-3: cubic-bezier(0.25, 0, 0.3, 1);
    --ease-4: cubic-bezier(0.25, 0, 0.2, 1);
    --ease-5: cubic-bezier(0.25, 0, 0.1, 1);
    --ease-in-1: cubic-bezier(0.25, 0, 1, 1);
    --ease-in-2: cubic-bezier(0.5, 0, 1, 1);
    --ease-in-3: cubic-bezier(0.7, 0, 1, 1);
    --ease-in-4: cubic-bezier(0.9, 0, 1, 1);
    --ease-in-5: cubic-bezier(1, 0, 1, 1);
    --ease-out-1: cubic-bezier(0, 0, 0.75, 1);
    --ease-out-2: cubic-bezier(0, 0, 0.5, 1);
    --ease-out-3: cubic-bezier(0, 0, 0.3, 1);
    --ease-out-4: cubic-bezier(0, 0, 0.1, 1);
    --ease-out-5: cubic-bezier(0, 0, 0, 1);
    --ease-in-out-1: cubic-bezier(0.1, 0, 0.9, 1);
    --ease-in-out-2: cubic-bezier(0.3, 0, 0.7, 1);
    --ease-in-out-3: cubic-bezier(0.5, 0, 0.5, 1);
    --ease-in-out-4: cubic-bezier(0.7, 0, 0.3, 1);
    --ease-in-out-5: cubic-bezier(0.9, 0, 0.1, 1);
    --ease-elastic-1: var(--ease-elastic-out-1);
    --ease-elastic-2: var(--ease-elastic-out-2);
    --ease-elastic-3: var(--ease-elastic-out-3);
    --ease-elastic-4: var(--ease-elastic-out-4);
    --ease-elastic-5: var(--ease-elastic-out-5);

    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
    --ease-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
    --ease-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);

    /* Font Props */

    --font-system-ui: "Noto Sans", system-ui, sans-serif;
    --font-sans: var(--font-system-ui);
    --font-serif: "Noto Serif", ui-serif, serif;
    --font-mono: "Noto Sans Mono", ui-monospace, monospace;
    --font-display: var(--font-system-ui);
    
    --font-weight-1: 100;
    --font-weight-2: 200;
    --font-weight-3: 300;
    --font-weight-4: 400;
    --font-weight-5: 500;
    --font-weight-6: 600;
    --font-weight-7: 700;
    --font-weight-8: 800;
    --font-weight-9: 900;

    --font-lineheight-00: 0.95;
    --font-lineheight-0: 1.1;
    --font-lineheight-1: 1.25;
    --font-lineheight-2: 1.375;
    --font-lineheight-3: 1.5;
    --font-lineheight-4: 1.75;
    --font-lineheight-5: 2;

    --font-letterspacing-0: -0.05em;
    --font-letterspacing-1: 0.025em;
    --font-letterspacing-2: 0.05em;
    --font-letterspacing-3: 0.075em;
    --font-letterspacing-4: 0.15em;
    --font-letterspacing-5: 0.25em;
    --font-letterspacing-6: 0.5em;
    --font-letterspacing-7: 1em;
 
    --font-size-00: 0.5rem;
    --font-size-0: 0.75rem;
    --font-size-1: 1rem;
    --font-size-2: 1.1rem;
    --font-size-3: 1.25rem;
    --font-size-4: 1.5rem;
    --font-size-5: 2rem;
    --font-size-6: 2.5rem;
    --font-size-7: 3rem;
    --font-size-8: 3.5rem;

    --font-size-fluid-0: clamp(0.75rem, 2vw, 1rem);
    --font-size-fluid-1: clamp(1rem, 4vw, 1.5rem);
    --font-size-fluid-2: clamp(1.5rem, 6vw, 2.5rem);
    --font-size-fluid-3: clamp(2rem, 9vw, 3.5rem);

    --font-size-small: var(--font-size-0);
    --font-size-medium: var(--font-size-1);
    --font-size-large: var(--font-size-4);
    --font-size-x-large: var(--font-size-6);
    --font-size-xx-large: var(--font-size-8);
    --font-size-fluid-small: var(--font-size-fluid-0);
    --font-size-fluid-medium: var(--font-size-fluid-1);
    --font-size-fluid-large: var(--font-size-fluid-2);
    --font-size-fluid-x-large: var(--font-size-fluid-3);

    /* Layer Props */
    --layer-1: 1;
    --layer-2: 2;
    --layer-3: 3;
    --layer-4: 4;
    --layer-5: 5;
    /* --layer-scrim: 99; */
    /* --layer-modal: 100; */
    --layer-important: 2147483647;

    --layer-bottom: 1;
    --layer-coverall: 9;
    --layer-middle: 10;
    --layer-top: 100;
    --layer-tippy-top: 110;
    --layer-scrim: 999;
    --layer-modal: 1000;
    --layer-toast: 1100;

    --inner-shadow-1: inset 0px 1px 2px rgba(0, 0, 0, 0.3),
        inset 0px 1px 3px 1px rgba(0, 0, 0, 0.15);

    --inner-shadow-2: inset 0px 2px 4px rgba(0, 0, 0, 0.3),
        inset 0px 2px 6px 2px rgba(0, 0, 0, 0.15);

    --inner-shadow-3: inset 0px 3px 6px rgba(0, 0, 0, 0.3),
        inset 0px 4px 8px 3px rgba(0, 0, 0, 0.15);

    --inner-shadow-4: inset 0px 4px 8px rgba(0, 0, 0, 0.3),
        inset 0px 6px 10px 4px rgba(0, 0, 0, 0.15);

    --inner-shadow-5: inset 0px 5px 10px rgba(0, 0, 0, 0.3),
        inset 0px 8px 12px 6px rgba(0, 0, 0, 0.15);

    --elevation-1: 0px 1px 3px 1px rgba(0, 0, 0, 0.15),
        0px 1px 2px rgba(0, 0, 0, 0.3);

    --elevation-2: 0px 2px 6px 2px rgba(0, 0, 0, 0.15),
        0px 1px 2px rgba(0, 0, 0, 0.3);

    --elevation-3: 0px 4px 8px 3px rgba(0, 0, 0, 0.15),
        0px 1px 3px rgba(0, 0, 0, 0.3);

    --elevation-4: 0px 6px 10px 4px rgba(0, 0, 0, 0.15),
        0px 2px 3px rgba(0, 0, 0, 0.3);

    --elevation-5: 0px 8px 12px 6px rgba(0, 0, 0, 0.15),
        0px 4px 4px rgba(0, 0, 0, 0.3);

    /* Size Props */
    --size-000: -0.5rem;
    --size-00: -0.25rem;
    --size-1: 0.25rem;
    --size-2: 0.5rem;
    --size-3: 1rem;
    --size-4: 1.25rem;
    --size-5: 1.5rem;
    --size-6: 1.75rem;
    --size-7: 2rem;
    --size-8: 3rem;
    --size-9: 4rem;
    --size-10: 5rem;
    --size-11: 7.5rem;
    --size-12: 10rem;
    --size-13: 15rem;
    --size-14: 20rem;
    --size-15: 30rem;

    --size-relative-000: -0.5ch;
    --size-relative-00: -0.25ch;
    --size-relative-1: 0.25ch;
    --size-relative-2: 0.5ch;
    --size-relative-3: 1ch;
    --size-relative-4: 1.25ch;
    --size-relative-5: 1.5ch;
    --size-relative-6: 1.75ch;
    --size-relative-7: 2ch;
    --size-relative-8: 3ch;
    --size-relative-9: 4ch;
    --size-relative-10: 5ch;
    --size-relative-11: 7.5ch;
    --size-relative-12: 10ch;
    --size-relative-13: 15ch;
    --size-relative-14: 20ch;
    --size-relative-15: 30ch;

    --size-content-1: 20ch;
    --size-content-2: 45ch;
    --size-content-3: 65ch;
    --size-content-4: 85ch;
    --size-content-5: 120ch;
    --size-content-6: 160ch;
    --size-content-7: 200ch;

    --size-xxs: 240px;
    --size-xs: 360px;
    --size-sm: 480px;
    --size-md: 768px;
    --size-lg: 1024px;
    --size-xl: 1440px;
    --size-xxl: 1920px;

    --inline-space: var(--size-relative-3);
    --inline-space-half: var(--size-relative-2);
    --inline-space-double: var(--size-relative-7);

    --block-space: var(--size-3);
    --block-space-half: var(--size-2);
    --block-space-double: var(--size-7);

    --prose-width: var(--size-content-4);
    --column-gap: var(--size-relative-3);
    --row-gap: var(--size-3);
    --font-size-display-large: 3.5rem; /* 57px */
    --font-size-display-medium: 2.8rem; /* 45px */
    --font-size-display-small: 2.25rem; /* 36px */
    --font-size-headline-large: 2rem; /* 32px */
    --font-size-headline-medium: 1.75rem; /* 28px */
    --font-size-headline-small: 1.5rem; /* 24px */
    --font-size-title-large: 1.375rem; /* 22px */
    --font-size-title-medium: 1rem; /* 16px */
    --font-size-title-small: 0.875rem; /* 14px */
    --font-size-body-large: 1.2rem; /* 16px */
    --font-size-body-medium: 1.0rem; /* 14px */
    --font-size-body-small: 0.75rem; /* 12px */
}
/* ==========================================================================
   Display & Layout
   ========================================================================== */

/* Debug */
.dev {
    background: rgb(128 0 0 / 0.2);
}
.dev-blue {
    background: rgb(0 0 128 / 0.2);
}
.dev-green {
    background: rgb(0 128 0 / 0.2);
}
.overflow-y-auto {
    overflow-y: auto;
}

/* Display */
.block {
    display: block;
}
.flex {
    display: flex;
}
@media (min-width: 40em) {
    .desktop\:flex {
        display: flex;
    }
}
.flex-inline {
    display: inline-flex;
}
.flex-wrap {
    flex-wrap: wrap;
}
.grid {
    display: grid;
}
.hidden {
    display: none;
}
.visible-if-only-child {
    display: none;
    &:only-child {
        display: block;
    }
}
.hidden-if-only-child {
    display: block;
    &:only-child {
        display: none;
    }
}
.row {
    display: flex;
    flex-direction: row;
    align-items: center;
}


/* Position */
.position-relative {
    position: relative;
}
.position-sticky {
    position: sticky;
}
.position-fixed {
    position: fixed;
}
.position-absolute {
    position: absolute;
}

.txt-align-center {
    text-align: center;
}

.txt-align-start {
    text-align: start;
}

.txt-align-end {
    text-align: end;
}

.coverall {
    position: absolute;
    inset: 0;
    z-index: calc(--layer-coverall);
}
.coverall * {
    pointer-events: auto;
  }
hr {
    border: none;
    border-top: 1px solid var(--outline-variant);
    margin-block: 0;
}
.top-0 {
    top: 0;
}
.top-4 {
    top: 2.5rem;
}
.top-100 {
    top: 100%;
}
.bottom-0 {
    bottom: 0;
}
.bottom-100 {
    bottom: 100%;
}
.left-0 {
    left: 0;
}
.right-0 {
    right: 0;
}
.right-50 {
    transform: translateX(-50%);
    left: 50%;
}

.z-bottom {
    z-index: var(--layer-bottom);
}
.z-middle {
    z-index: var(--layer-middle);
}
.z-top {
    z-index: var(--layer-top);
}
.z-modal {
    z-index: var(--layer-modal);
}
.z-toast {
    z-index: var(--layer-toast);
}
.z-important {
    z-index: var(--layer-important);
}

/* ==========================================================================
   Flexbox
   ========================================================================== */

.flex-column {
    display: flex;
    flex-direction: column;
}

/* Flex Properties */
.flex-wrap {
    flex-wrap: wrap;
}
.flex-1 {
    flex: 1;
}
.flex-2 {
    flex: 2;
}
.flex-none {
    flex: 0 0 auto;
}
.flex-item-grow {
    flex-grow: 1;
}
.flex-item-shrink {
    flex-shrink: 1;
}
.flex-item-no-shrink {
    flex-shrink: 0;
}

/* Alignment */
.justify-end {
    justify-content: flex-end;
}
.justify-start {
    justify-content: start;
}
.justify-center {
    justify-content: center;
}
.justify-space-around {
    justify-content: space-around;
}
.justify-space-between {
    justify-content: space-between;
}

.align-center {
    align-items: center;
}
.align-start {
    align-items: start;
}
.align-end {
    align-items: end;
}
.align-content-center {
    align-content: center;
}
.align-self-start {
    align-self: start;
}

/* ==========================================================================
   Grid
   ========================================================================== */

@media (min-width: 48em) {
    .grid-container {
        display: grid;
        gap: var(--column-gap, var(--size-3));
    }

    .grid-container:has(:nth-child(2):last-child) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: 0 auto;
    }

    .grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.ratio-widescreen {
    aspect-ratio: var(--ratio-widescreen);
}
.ratio-landscape {
    aspect-ratio: var(--ratio-landscape);
}
.ratio-square {
    aspect-ratio: 1;
}
.ratio-portrait {
    aspect-ratio: var(--ratio-portrait);
}
.ratio-ultrawide {
    aspect-ratio: var(--ratio-ultrawide);
}
.ratio-golden {
    aspect-ratio: var(--ratio-golden);
}

/* ==========================================================================
   Spacing
   ========================================================================== */

/* Gap */
.gap {
    column-gap: var(--size-3);
    row-gap: var(--size-3);
}
.gap-wide {
    column-gap: var(--size-6);
    row-gap: var(--size-6);
}
.gap-row {
    row-gap: var(--size-3);
}
.gap-half, .gap-narrow {
    column-gap: var(--size-2);
    row-gap: var(--size-2);
}

/* Padding */
.pad {
    padding: var(--size-3);
}
.pad-half {
    padding: var(--size-2);
}
.pad-double {
    padding: var(--size-6);
}
.pad-block-double {
    padding-block: var(--size-6);
}
.pad-block-double-start {
    padding-block-start: var(--size-6);
}
.pad-block {
    padding-block: var(--size-3);
}
.pad-inline {
    padding-inline: var(--size-3);
}
.unpad {
    padding: 0;
}

/* Margins */
.margin {
    margin: var(--size-3);
}
.margin-block {
    margin-block: var(--size-3);
}
.margin-block-start {
    margin-block-start: var(--size-3);
}
.margin-block-end {
    margin-block-end: var(--size-3);
}
.margin-half-block-end {
    margin-block-end: var(--size-1);
}
.-margin-block-double-start {
    margin-block-start: calc(var(--size-6) * -1);
}
.-margin-block-triple-start {
    margin-block-start: calc(var(--size-8) * -1);
}
.margin-block-double {
    margin-block: var(--size-6);
}
.margin-block-triple-start {
    margin-block: var(--size-9);
}
.margin-inline {
    margin-inline: var(--size-3);
}
.margin-none {
    margin: 0;
}
.center {
    margin-inline: auto;
}

/* ==========================================================================
   Typography
   ========================================================================== */

.txt-small { font-size: var(--font-size-small); }
.txt-medium { font-size: var(--font-size-medium); }
.txt-large { font-size: var(--font-size-large); }
.txt-x-large { font-size: var(--font-size-x-large); }
.txt-fluid-small { font-size: var(--font-size-fluid-small); }
.txt-fluid-medium { font-size: var(--font-size-fluid-medium); }
.txt-fluid-large { font-size: var(--font-size-fluid-large); }
.txt-fluid-x-large { font-size: var(--font-size-fluid-x-large); }

/* Text Scale */
.display-large {
    font-size: var(--font-size-headline-large);
}
.display-medium {
    font-size: var(--font-size-headline-medium);
}
.display-small {
    font-size: var(--font-size-headline-small);
}
.headline-large {
    font-size: var(--font-size-headline-large);
    text-wrap-style: balance;
}
.headline-medium {
    font-size: var(--font-size-headline-medium);
    text-wrap-style: balance;
}
.headline-small {
    font-size: var(--font-size-headline-small);
    text-wrap-style: balance;
}
.title-large {
    font-size: var(--font-size-title-large);
}
.title-medium {
    font-size: var(--font-size-title-medium);
}
.title-small {
    font-size: var(--font-size-title-small);
}
.body-x-large {
    /* font-size: var(--font-size-body-large); */
    font-size: clamp(1rem, 4vw, 1.7rem);
}
.body-large {
    font-size: var(--font-size-body-large);
    /* font-size: clamp(1rem, 4vw, 1.7rem); */
}
.body-medium {
    font-size: var(--font-size-body-medium);
    /* font-size: clamp(1rem, 4vw, 1.5rem); */
}
.body-small {
    /* font-size: var(--font-size-body-small); */
    font-size: clamp(1rem, 4vw, 1.7rem)
}

/* Text Alignment */
.txt-align-center {
    text-align: center;
}
.txt-align-start {
    text-align: start;
}
.txt-align-end {
    text-align: end;
}

/* Text Properties */
.txt-undecorated {
    text-decoration: none;
}
.txt-nowrap {
    white-space: nowrap;
}
.txt-uppercase {
    text-transform: uppercase;
}
.txt-spread {
    letter-spacing: var(--font-letterspacing-5);
}
.txt-subtle {
    color: var(--outline);
}
.txt-truncate {    
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.txt-ellipse {
    text-overflow: ellipsis;
}
.no-link {
    text-decoration: none;
    color: var(--color-ink);
}

/* Line Height */
.line-height-comfortable {
    line-height: 1.618;
}
.line-height-standard {
    line-height: 1.3;
}

/* Font Families */
.font-mono,
.font-code {
    font-family: var(--font-mono);
}
.font-serif {
    font-family: var(--font-serif);
}
.font-bold {
    font-weight: var(--font-weight-7);
}
.font-italic {
    font-style: italic;
}

/* Headings */
:where(.h1, .h2, .h3, .h4, .h5, .h6) {
    font-weight: 800;
    hyphens: auto;
    letter-spacing: -0.02ch;
    line-height: 1.1;
    margin-block: 0.65em;
    overflow-wrap: break-word;
}

:where(h1, h2, h3, h4, h5, h6) {
    display: block;
}
:where(h1, h2) {
    /* text-wrap: balance; */
}

/* Updated heading sizes to match MD3 type scale */
:is(.h1),
:is(.headline) {
    font-size: var(--font-size-fluid-x-large);
    font-weight: var(--font-weight-7);
    line-height: 1.2;
    margin-bottom: var(--size-4);
    font-family: var(--font-display);
    @media (max-width: 40em) {
        /* display: none; */
    }
    /* text-wrap-style: balance; */
}

:is(.h2) {
    font-size: var(--font-size-headline-medium);
    font-family: var(--font-display);
}
:is(.h3) {
    font-size: var(--font-size-headline-small);
    font-family: var(--font-display);
}
:is(.h4) {
    font-size: var(--font-size-body-large);
}
:is(.h5) {
    font-size: var(--font-size-headline-medium);
}
:is(.h6) {
    font-size: var(--font-size-headline-small);
}

/* Text Content */
:is(p, ul, ol, dl, blockquote, pre, figure, table, hr) {
    margin-block: 0.65lh;
    overflow-wrap: break-word;
    text-wrap: pretty;
}
figcaption {
    font-size: var(--font-size-small);
    color: var(--on-layer-background-variant);
}

/* ==========================================================================
   Sizing
   ========================================================================== */

/* Square Sizes */
.size-1 {
    width: var(--size-1);
    height: var(--size-1);
}
.size-2 {
    width: var(--size-2);
    height: var(--size-2);
}
.size-3 {
    width: var(--size-3);
    height: var(--size-3);
}
.size-4 {
    width: var(--size-4);
    height: var(--size-4);
}
.size-5 {
    width: var(--size-5);
    height: var(--size-5);
}
.size-6 {
    width: var(--size-6);
    height: var(--size-6);
}
.size-7 {
    width: var(--size-7);
    height: var(--size-7);
}

/* Content Width */
.size-content-1 {
    width: min(95%, var(--size-content-1));
    margin-inline: auto;
}
.size-content-2 {
    width: min(95%, var(--size-content-2));
    margin-inline: auto;
}
.size-content-3 {
    width: min(95%, var(--size-content-3));
    margin-inline: auto;
}
.size-content-4 {
    width: min(95%, var(--size-content-4));
    margin-inline: auto;
}
.size-content-5 {
    width: min(95%, var(--size-content-5));
    margin-inline: auto;
}
.size-content-6 {
    width: min(95%, var(--size-content-6));
    margin-inline: auto;
}
.size-content-7 {
    width: min(95%, var(--size-content-7));
    margin-inline: auto;
}
.prose-width {
  --prose-width: var(--size-content-3);
  width: min(100%, var(--prose-width));
  margin-inline: auto;
}

/* Container */
.container {
    --container-width: var(--size-content-5);
    --container-padding-inline: 2lh;
    --container-padding-block: var(--size-relative-11);
    padding: var(--container-padding-inline) var(--container-padding-block);
    inline-size: min(100%, var(--container-width));
    margin: 0 auto;
}

/* Dimension Utilities */
.full-height {
    min-height: 100%;
    height: 100%;
}
.full-width {
    inline-size: 100%;
}
.half-height {
    block-size: 50%;
}
.half-width {
    inline-size: 50%;
}
.quarter-width {
    inline-size: 25%;
}

/* ==========================================================================
   Borders & Radius - Updated to MD3
   ========================================================================== */

/* Border Radius Utility Classes */
.radius-none {
  border-radius: var(--radius-none);
}

.radius-xs {
  border-radius: var(--radius-x-small);
}

.radius-sm {
  border-radius: var(--radius-small);
}

.radius-md, .rounded {
  border-radius: var(--radius-medium);
}

.radius-lg {
  border-radius: var(--radius-large);
}

.radius-lg-increased {
  border-radius: var(--radius-large-increased);
}

.radius-xl {
  border-radius: var(--radius-x-large);
}

.radius-xl-increased {
  border-radius: var(--radius-x-large-increased);
}

.radius-xxl {
  border-radius: var(--radius-xx-large);
}

.radius-full {
  border-radius: var(--radius-full);
}

/* Directional border radius utilities */
.radius-top-md {
  border-top-left-radius: var(--radius-medium);
  border-top-right-radius: var(--radius-medium);
}

.radius-bottom-md {
  border-bottom-left-radius: var(--radius-medium);
  border-bottom-right-radius: var(--radius-medium);
}

.radius-left-md {
  border-top-left-radius: var(--radius-medium);
  border-bottom-left-radius: var(--radius-medium);
}

.radius-right-md {
  border-top-right-radius: var(--radius-medium);
  border-bottom-right-radius: var(--radius-medium);
}

/* ==========================================================================
   Overflow & Aspect Ratio
   ========================================================================== */

.overflow-x {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}
.no-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.overflow-y {
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}
.overflow-clip {
    text-overflow: clip;
    white-space: nowrap;
    overflow: hidden;
}
.overflow-ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.aspect-4-3 {
    aspect-ratio: 16 / 9;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.sr-only {
    block-size: 1px;
    clip-path: inset(50%);
    inline-size: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 767px) {
    .grid-container,
    .container {
        display: block;
        padding: 1rem;
    }

    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4,
    .grid-cols-5,
    .grid-cols-6 {
        display: block;
        margin: 0;
    }

    .desktop-only {
        display: none !important;
    }

.scroll-container, .scrollable {
    flex: 1;
    overflow-y: auto;
    padding: var(--size-3);
    padding-block-start: 0;
}
    
}
@media (min-width: 40em) {
    .mobile-only {
        display: none !important;
    }
}

.fixed-content {
    padding: var(--size-2);
    background: var(--layer-widget);
    color: var(--on-layer-background);
    border-top: 1px solid var(--outline-variant);
    flex-shrink: 0;
}
.overflow-line-clamp {
    -webkit-line-clamp: var(--lines, 2);
    -webkit-box-orient: vertical;
    line-clamp: var(--lines, 2);
    display: -webkit-box;
    overflow: hidden;
    text-overflow: clip;
    white-space: normal;
}
.outlined {
    border: 1px solid var(--outline);
}

.outline-variant {
    border: 1px solid var(--outline-variant);
}

.outlined-block-start {
    border-block-start: 1px solid var(--outline);
}
.outlined-block-end {
    border-block-end: 1px solid var(--outline-variant);
}

.outline-variant-block-start {
    border-block-start: 1px solid var(--outline-variant);
}

.link {
text-decoration: underline;
color: var(--primary);

&:visited {
    color: var(--primary-variant);
}
}

.no-link {
text-decoration: none;
color: var(--on-layer-background);
&:hover {
    text-decoration: underline;
}
}
/* Typography */
.font-family-noto-sans {
  font-family: "Noto Sans", var(--font-sans);
}

.font-family-atkinson {
  font-family: "Atkinson Hyperlegible", var(--font-sans);
}
.font-handwriting {
  font-family: "Patrick Hand", "Caveat", var(--font-sans);
}
.icon {
    &.large {
        font-size: var(--font-size-large);
    }
}


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

  :root:not([data-color-scheme="light"]) trix-toolbar .trix-dialog.trix-active.trix-dialog--link .link_to_embed::before,
  trix-toolbar .trix-dialog.trix-active.trix-dialog--link :root:not([data-color-scheme="light"]) .link_to_embed::before,
  :root:not([data-color-scheme="light"]) trix-toolbar .trix-button--icon::before,
  trix-toolbar :root:not([data-color-scheme="light"]) .trix-button--icon::before {
    filter: invert(99%) saturate(310%) hue-rotate(0deg) brightness(103%) contrast(85%)
  }
}

.short-textarea trix-editor {
  width: 100%;
  max-height: 3rem;
  overflow-y: scroll;
}

trix-editor {
  /* background-color: red; */
  width: 100%;
  border-radius: 3px;
  margin: 0;
  padding: 0.4em 0.6em;
  min-height: 5rem;
  outline: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

trix-toolbar {
  border-top: 1px solid rgb(128 128 128 / 0.5);
  border-bottom: 1px solid rgb(128 128 128 / 0.5);
  display: flex;
  place-items: center;
}

trix-editor:empty:not(:focus)::before {
  content: attr(placeholder);
  color: var(--color-text-subtle);
  cursor: text;
}

trix-toolbar * {
  box-sizing: border-box;
}

trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  overflow-x: auto;
  margin: 0;
}

trix-toolbar .trix-button-group {
  display: flex;
}

@media (max-device-width: 768px) {
  trix-toolbar .trix-button-group:not(:first-child) {
    margin-left: 0;
  }
}

trix-toolbar .trix-button-group-spacer {
  flex-grow: 1;
}

@media (max-device-width: 768px) {
  trix-toolbar .trix-button-group-spacer {
    display: none;
  }
}

trix-toolbar .trix-button {
  position: relative;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 0.5em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent;
}

trix-toolbar .trix-button.trix-active {
  background: #cbeefa;
  color: black;
}

trix-toolbar .trix-button:not(:disabled) {
  cursor: pointer;
}

trix-toolbar .trix-button:disabled {
  color: rgba(0, 0, 0, 0.125);
}

@media (max-device-width: 768px) {
  trix-toolbar .trix-button {
    letter-spacing: -0.01em;
    padding: 0 0.3em;
  }
}

trix-toolbar .trix-button--icon {
  font-size: inherit;
  width: clamp(2.0rem, 3vw, 3.5rem);
  height: clamp(2.0rem, 3vw, 3.5rem);
  text-indent: -9999px;
}

trix-toolbar .trix-button--icon::before {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.6;
  content: "";
  background-position: center;
  background-repeat: no-repeat;
}

@media (max-device-width: 768px) {
  trix-toolbar .trix-button--icon::before {
    right: 6%;
    left: 6%;
  }
}

trix-toolbar .trix-button--icon.trix-active::before {
  opacity: 1;
}

trix-toolbar .trix-button--icon:disabled::before {
  opacity: 0.125;
}

trix-toolbar .trix-button--icon.trix-active {
  background-color: var(--color-bg--blue)
}

trix-toolbar .trix-button--icon-bold::before {
  background-image: url(/assets/trix_bold-7ccfc3ec4e15523fefc5a5a4e14028488dc70ac79c333199044b605182a61d89.svg)
}

trix-toolbar .trix-button--icon-italic::before {
  background-image: url(/assets/trix_italic-b024c72a3c8081f2cef86d5ac267ec7a6cb2d9904d0da289d17893fb609ac954.svg)
}

trix-toolbar .trix-button--icon-link::before {
  background-image: url(/assets/trix_link-738796a0f5943a1720d4a96631cec32876f51ad1bf746036d3ac24134b4f5536.svg)
}

trix-toolbar .trix-button--icon-strike::before {
  background-image: url(/assets/trix_strike-3d5bf0096b4ffda22ffa7c777e045c3663e5702e37c1eda73d966cc4d2355356.svg)
}

trix-toolbar .trix-button--icon-color::before {
  background-image: url(/trix_color.svg)
}

trix-toolbar .trix-button--icon-heading-1::before {
  background-image: url(/assets/trix_heading_1-28588e8ed63ddba61f326df3969a629bc1b2220727d381a7fdde86102639f024.svg)
}

trix-toolbar .trix-button--icon-quote::before {
  background-image: url(/assets/trix_quote-30aa0612f7fd4953dde176aab2a53ee02397d643118a2558ad43fad1eef6f683.svg)
}

trix-toolbar .trix-button--icon-horizontal-rule::before {
  background-image: url(/trix_horizontal_rule.svg)
}

trix-toolbar .trix-button--icon-code::before {
  background-image: url(/assets/trix_code-92028da9ec1c7c3f3b6678d075c686e3ffeb653089292aab386f9f3e4b8b323f.svg)
}

trix-toolbar .trix-button--icon-bullet-list::before {
  background-image: url(/assets/trix_bullets-1bc3c7fd2f21bc710c7cc8a848f343c7f3c1accef80e2948e5e81080947c982e.svg)
}

trix-toolbar .trix-button--icon-number-list::before {
  background-image: url(/assets/trix_numbers-f0fe21ffc00d53f75a6b29b401a70363ac4b26449dc09e635867bdfdb3d7bb2a.svg)
}

trix-toolbar .trix-button--icon-attach::before {
  background-image: url(/assets/trix_attach-ab3d85e8be2487093f1727764db4b9acfbb2c38757d88c4deb8c78520db87331.svg)
}

trix-toolbar .trix-button--icon-undo::before {
  background-image: url(/assets/trix_undo-9c8850c989cd1190265774ff1ec6e5cdee12f24225dacd637ba585ee9a8990a7.svg)
}

trix-toolbar .trix-button--icon-redo::before {
  background-image: url(/assets/trix_redo-e2983ccd2798b9c90560d20ab34e07b193a462cf8e3c1e4f66b96b2e61e00787.svg)
}

trix-toolbar .trix-dialogs {
  position: relative;
}

trix-toolbar .trix-dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 0.75em;
  padding: 15px 10px;
  background: #fff;
  box-shadow: 0 0.3em 1em #ccc;
  border-top: 2px solid #888;
  border-radius: 5px;
  z-index: 5;
}

trix-toolbar .trix-input--dialog {
  font-size: inherit;
  font-weight: normal;
  padding: 0.5em 0.8em;
  margin: 0 10px 0 0;
  border-radius: 3px;
  border: 1px solid #bbb;
  background-color: #fff;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

trix-toolbar .trix-input--dialog.validate:invalid {
  box-shadow: #F00 0px 0px 1.5px 1px;
}

trix-toolbar .trix-button--dialog {
  @apply btn btn-small btn-primary;
  font-size: inherit;
}

trix-toolbar .trix-dialog--link {
  max-width: 600px;
}

trix-toolbar .trix-dialog__link-fields {
  display: flex;
  align-items: baseline;
}

trix-toolbar .trix-dialog__link-fields .trix-input {
  flex: 1;
  width: 100%;
}

trix-toolbar .trix-dialog__link-fields .trix-button-group {
  flex: 0 0 content;
  margin: 0;

  .trix-button--dialog:last-of-type {
    @apply ml-1;
  }
}

@media (max-device-width: 768px) {
  trix-toolbar .trix-dialog__link-fields {
    display: block;

    .trix-button-group {
      @apply mt-2;
    }
  }
}

trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

trix-editor [data-trix-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection,
trix-editor [data-trix-mutable] ::-moz-selection {
  background: none;
}

trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection,
trix-editor [data-trix-mutable] ::selection {
  background: none;
}

trix-editor [data-trix-mutable].attachment__caption-editor:focus::-moz-selection {
  background: highlight;
}

trix-editor [data-trix-mutable].attachment__caption-editor:focus::selection {
  background: highlight;
}

trix-editor [data-trix-mutable].attachment.attachment--file {
  box-shadow: 0 0 0 2px highlight;
  border-color: transparent;
}

trix-editor [data-trix-mutable].attachment img {
  box-shadow: 0 0 0 2px highlight;
}

trix-editor .attachment {
  position: relative;
}

trix-editor .attachment:hover {
  cursor: default;
}

trix-editor .attachment--preview .attachment__caption:hover {
  cursor: text;
}

trix-editor .attachment__progress {
  position: absolute;
  z-index: 1;
  height: 20px;
  top: calc(50% - 10px);
  left: 5%;
  width: 90%;
  opacity: 0.9;
  transition: opacity 200ms ease-in;
}

trix-editor .attachment__progress[value="100"] {
  opacity: 0;
}

trix-editor .attachment__caption-editor {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  vertical-align: top;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

trix-editor .attachment__toolbar {
  position: absolute;
  z-index: 1;
  top: -0.9em;
  left: 0;
  width: 100%;
  text-align: center;
}

trix-editor .trix-button-group {
  display: inline-flex;
}

trix-editor .trix-button {
  position: relative;
  float: left;
  color: #666;
  white-space: nowrap;
  font-size: 80%;
  padding: 0 0.8em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent;
}

trix-editor .trix-button:not(:first-child) {
  border-left: 1px solid #ccc;
}

trix-editor .trix-button.trix-active {
  background: #cbeefa;
}

trix-editor .trix-button:not(:disabled) {
  cursor: pointer;
}

trix-editor .trix-button--remove {
  text-indent: -9999px;
  display: inline-block;
  padding: 0;
  outline: none;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid highlight;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25);
}

trix-editor .trix-button--remove::before {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.7;
  content: "";
  background-image: url(data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.4L17.6%205%2012%2010.6%206.4%205%205%206.4l5.6%205.6L5%2017.6%206.4%2019l5.6-5.6%205.6%205.6%201.4-1.4-5.6-5.6z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 90%;
}

trix-editor .trix-button--remove:hover {
  border-color: #333;
}

trix-editor .trix-button--remove:hover::before {
  opacity: 1;
}

trix-editor .attachment__metadata-container {
  position: relative;
}

trix-editor .attachment__metadata {
  position: absolute;
  left: 50%;
  top: 2em;
  transform: translate(-50%, 0);
  max-width: 90%;
  padding: 0.1em 0.6em;
  font-size: 0.8em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 3px;
}

trix-editor .attachment__metadata .attachment__name {
  display: inline-block;
  max-width: 100%;
  vertical-align: bottom;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

trix-editor .attachment__metadata .attachment__size {
  margin-left: 0.2em;
  white-space: nowrap;
}

.trix-content {
  line-height: 1.5;
}

.trix-content * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.trix-content h1 {
  font-size: 1.2em;
  line-height: 1.2;
  font-family: var(--font-sans);
}

.trix-content blockquote {
  border: 0 solid #ccc;
  border-left-width: 0.3em;
  margin-left: 0.3em;
  padding-left: 0.6em;
}

.trix-content [dir=rtl] blockquote,
.trix-content blockquote[dir=rtl] {
  border-width: 0;
  border-right-width: 0.3em;
  margin-right: 0.3em;
  padding-right: 0.6em;
}

.trix-content li {
  margin-left: 1em;
}

.trix-content [dir=rtl] li {
  margin-right: 1em;
}

.trix-content pre {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-family: monospace;
  padding: 0.5em;
  white-space: pre;
  background-color: rgb(128 128 128 / 0.2);
  overflow-x: auto;
  border-radius: var(--radius-small);
}

.trix-content img {
  max-width: 100%;
  height: auto;
}

.trix-content .attachment {
  display: inline-block;
  position: relative;
  max-width: 100%;
}

.trix-content .attachment a {
  color: inherit;
  text-decoration: none;
}

.trix-content .attachment a:hover,
.trix-content .attachment a:visited:hover {
  color: inherit;
}

.trix-content .attachment__caption {
  text-align: center;
}

.trix-content .attachment__caption .attachment__name+.attachment__size::before {
  content: ' · ';
}

.trix-content .attachment--preview {
  width: 100%;
  text-align: center;
}

.trix-content .attachment--preview .attachment__caption {
  color: #666;
  font-size: 0.9em;
  line-height: 1.2;
}

.trix-content .attachment--file {
  color: #333;
  line-height: 1;
  margin: 0 2px 2px 2px;
  padding: 0.4em 1em;
  border: 1px solid #bbb;
  border-radius: 5px;
}

.trix-content .attachment-gallery {
  display: flex;
  flex-wrap: wrap;
  position: relative;

}

.trix-content .attachment-gallery .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;

}

.trix-content .attachment-gallery.attachment-gallery--2 .attachment,
.trix-content .attachment-gallery.attachment-gallery--4 .attachment {
  flex-basis: 50%;
  max-width: 50%;
}
/*
 * Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
 * the trix-editor content (whether displayed or under editing). Feel free to incorporate this
 * inclusion directly in any other asset bundle and remove this file.
 *

*/

/*
 * We need to override trix.css’s image gallery styles to accommodate the
 * <action-text-attachment> element we wrap around attachments. Otherwise,
 * images in galleries will be squished by the max-width: 33%; rule.
*/
.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

.trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--2 > .attachment, .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

.trix-content action-text-attachment .attachment {
  padding: 0 !important;
  max-width: 100% !important;
}
.trix-content h1, .trix-content h2, .trix-content h3, .trix-content h4, .trix-content h5, .trix-content h6 {
  margin-top: 1em;
  margin-bottom: 0.5em;
  font-weight: bold;
}
/* ==========================================================================
   Activity Feed Styles - Linear List Layout
   ========================================================================== */

.activity {
  max-width: var(--size-content-4);
  margin-inline: auto;
  padding: var(--size-3);
}

/* Date Dividers */
.activity-date-divider {
  text-align: center;
  padding: var(--size-3) 0;
  margin: var(--size-4) 0 var(--size-3) 0;
}

.activity-date-divider__text {
  display: inline-block;
  background: var(--layer-widget);
  padding: var(--size-1) var(--size-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-6);
  color: var(--on-layer-background-variant);
  text-transform: uppercase;
  letter-spacing: var(--font-letterspacing-1);
  margin: 0;
}

/* Activity Blob Container */
.activity-blob {
  margin-bottom: var(--size-4);
}

/* Project Header */
.activity-project {
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-6);
  color: var(--on-layer-background-variant);
  margin-bottom: var(--size-2);
  padding-left: calc(40px + var(--size-3)); /* Align with content */
}

.activity-project a {
  color: var(--primary);
  text-decoration: none;
}

.activity-project a:hover {
  text-decoration: underline;
}

/* Activity Item */
.activity-item {
  position: relative;
  padding-bottom: var(--size-2);
}

/* Summary Section */
.activity-item__summary {
  display: flex;
  align-items: flex-start;
  gap: var(--size-3);
  margin-bottom: var(--size-2);
}

.activity-item__summary--hidden {
  display: none;
}

/* Avatar */
.activity-item__who {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

.activity-item__who img {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  object-fit: cover;
}

/* Content Area */
.activity-item__content {
  flex: 1;
  min-width: 0; /* Prevents flex item from overflowing */
}

.activity-item__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--size-2);
}

/* What happened */
.activity-item__what {
  flex: 1;
  min-width: 0;
  line-height: var(--font-lineheight-1);
}

.activity-item__what a {
  color: var(--primary);
  text-decoration: none;
}

.activity-item__what a:hover {
  text-decoration: underline;
}

/* Timestamp */
.activity-item__timestamp {
  flex-shrink: 0;
  font-size: var(--font-size-body-small);
  color: var(--on-layer-background-variant);
  font-weight: var(--font-weight-5);
  white-space: nowrap;
}

/* Excerpt/Content */
.activity-item__excerpt {
  color: var(--on-layer-background-variant);
  line-height: var(--font-lineheight-2);
  margin-top: var(--size-2);
  margin-left: calc(40px + var(--size-3)); /* Align with content */
}

/* Hidden link for keyboard navigation */
.activity-item__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
}

/* Hover effects */
.activity-item:hover {
  background: color-mix(in srgb, var(--on-layer-background) 4%, transparent);
  border-radius: var(--radius-small);
  margin: 0 calc(-1 * var(--size-1));
  padding: var(--size-1);
}

/* Mobile responsive adjustments */
@media (max-width: 767px) {
  .activity {
    padding: var(--size-2);
  }
  
  .activity-item__summary {
    gap: var(--size-2);
  }
  
  .activity-item__who {
    width: 36px;
    height: 36px;
  }
  
  .activity-item__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--size-1);
  }
  
  .activity-item__timestamp {
    font-size: var(--font-size-body-small);
    order: -1; /* Move timestamp above the heading on mobile */
  }
  
  .activity-project {
    padding-left: calc(36px + var(--size-2));
  }
  
  .activity-item__excerpt {
    margin-left: calc(36px + var(--size-2));
  }

}

/* Special content types */
.activity-item__excerpt img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-small);
  margin-top: var(--size-2);
}

.activity-item__excerpt ul,
.activity-item__excerpt ol {
  margin: var(--size-1) 0;
  padding-left: var(--size-3);
}

.activity-item__excerpt ul.todos {
  list-style: none;
  padding-left: 0;
}

.activity-item__excerpt .todo {
  display: flex;
  align-items: flex-start;
  gap: var(--size-2);
  padding: var(--size-1) 0;
}

.activity-item__excerpt .checkbox__button {
  width: 16px;
  height: 16px;
  border: 2px solid var(--outline);
  border-radius: var(--radius-x-small);
  flex-shrink: 0;
  margin-top: 2px;
}

.activity-item__excerpt .todo.completed .checkbox__button {
  background: var(--primary);
  border-color: var(--primary);
}

.activity-item__excerpt .todo.completed .checkbox__button::after {
  content: '✓';
  color: var(--on-primary);
  font-size: var(--font-size-body-small);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.authentication {
    margin-top: 50px;
    margin-bottom: 50px;
}
/* [How to Make Your Website Not Ugly: Basic UX for Programmers - Hilary Stohs-Krause](https://www.youtube.com/watch?v=Jf0cjocP8Wk)  */
html {
    font-family: var(--font-sans);
    color: var(--on-layer-background);
    background-color: var(--layer-background);
    height: 100%;
    font-size: 19px;
    line-height: var(--font-lineheight-2);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    max-height: 100%;
}
body {
    min-height: 100%;
    display: flex;
    font-size: var(--font-size-medium);
    flex-direction: column;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    
}
main {
    display: flex;
    flex-direction: column;
    position: relative;
    padding-bottom: 80px;
    flex: 1;
    overflow-y: auto;
    @media (max-width: 767px) {
        padding-top: 65px;
    }
}
.bio-headline {
    color: var(--on-layer-background);
    margin-inline: auto;
    margin-block-start: var(--size-10);
    max-width: var(--size-content-3);
    text-transform: uppercase;
    width: 100%;
    text-align: center;
}
.bio {
    color: var(--outline);
    margin-inline: auto;
    max-width: var(--size-content-3);
    width: 100%;
    text-align: center;
}
.book-cover--thumbnail {
  height: 18rem;
  width: 12rem;
  aspect-ratio: 2/3;
  border-radius: var(--inline-space);
  object-fit: cover;
}
.book-cover {
  height: clamp(360px, 40vh, 480px);
  width: clamp(240px, calc(40vh * 0.667), 320px); /* Maintain 2:3 aspect ratio */
  display: block;
  box-shadow: var(--elevation-3);
  object-fit: cover;
  position: relative;
  z-index: 1;
  margin-inline: auto;
}
.xbook-summary {
  margin: var(--block-space) 0;
  .cover {
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      aspect-ratio: 2/3;
      margin: 0 auto;
      max-height: 480px;
      height: 100%;
      box-shadow: var(--elevation-1);

      object-fit: cover;
      border-radius: var(--radius-small);
    }
  }
  @media (min-width: 100ch) {
    display: flex;
    gap: var(--block-space);
    padding: var(--block-space);
    .cover {
      width: 50%;
    }
  }
  
}
.xbook-link {
  
  padding: var(--inline-space) 0;
 
}
.xbook-link {
  padding: var(--inline-space) 0;

  border-top: 1px solid var(--outline-variant);
  border-bottom: 1px solid var(--outline-variant);
  margin: -1px;
}
.breadcrumb {
  --breadcrumb-width: calc(var(--size-content-5) * 0.9);
  align-items: center;
  background-color: var(--layer-widget);
  border-radius: var(--radius-x-small) var(--radius-x-small) 0 0;
  column-gap: var(--column-gap, var(--inline-space-half));
  display: flex;
  font-weight: 700;
  justify-content: center;
  list-style: none;
  margin-inline: auto;
  max-width: var(--breadcrumb-width);
  width: 100%;
  box-shadow: var(--elevation-1);
  min-width: 0;
  /* padding: var(--inline-space-half); */
  row-gap: var(--row-gap, var(--block-space));
  max-height: 2em;

  @media (min-width: 768px) {
    --panel-padding: 6em;

    /* box-shadow: var(--elevation-2); */
    border-bottom: none;
  }
  @media (width < 768px) {
    --breadcrumb-width: 90%;
    display: none;
  }
}

.breadcrumb a {
  color: var(--md-sys-color-on-surface-variant);
  text-decoration: underline;
}
:root {
    --calendar-graph-day-L0-bg: var(--outline-variant);
    --calendar-graph-day-L1-bg: #9AE6B4;
    --calendar-graph-day-L2-bg: #38A169;
    --calendar-graph-day-L3-bg: #2F855A;
    --calendar-graph-day-L4-bg: #276749;
}

[data-color-scheme='dark'] {
    --calendar-graph-day-L1-bg: #14532D;
    --calendar-graph-day-L2-bg: #15803D;
    --calendar-graph-day-L3-bg: #16A34A;
    --calendar-graph-day-L4-bg: #22C55E;
}

.calendar-graph-container {
    max-width: fit-content;
    table {
        border-spacing: 4px;
        width: max-content;
        margin: 0;

        .day-label {
            padding: 0 .5em 0 0;
            font-size: 12px;
            height: 12px;
            line-height: 12px;
            white-space: nowrap;
            overflow: hidden;
        }

        th[colspan] {
            font-size: 12px;
        }
    }

    .calendar-day {
        aspect-ratio: 1 / 1;
        border-radius: 3px;
        fill: var(--calendar-graph-day-bg);
        height: 12px;
        outline-offset: -1px;
        outline: 2px solid var(--calendar-graph-day-outline);
        padding: 0;
        shape-rendering: geometricPrecision;
        width: 12px;

        &[data-level="0"] {
            background-color: var(--calendar-graph-day-L0-bg);
        }

        &[data-level="1"] {
            background-color: var(--calendar-graph-day-L1-bg);
        }

        &[data-level="2"] {
            background-color: var(--calendar-graph-day-L2-bg);
        }

        &[data-level="3"] {
            background-color: var(--calendar-graph-day-L3-bg);
        }

        &[data-level="4"] {
            background-color: var(--calendar-graph-day-L4-bg);
        }
    }

    .calendar-legend {
        font-size: 11px;
        line-height: 1;
        margin-inline-start: auto;
        max-width: 120px;
        padding: 0;

        tr,
        td {
            padding: 0;
        }
        .day {
            height: 12px;
            width: 16px;
        }
    }
}
/* Pure CSS carousel with native scroll markers */
.carousel {
  anchor-name: --carousel;
  container-type: inline-size;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* background: var(--layer-surface); */
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 50%, transparent), color-mix(in srgb, var(--primary-container) 50%, transparent));
  color: var(--on-primary-container);
  display: flex;
  gap: var(--size-5);
  padding: 3.5rem;
  position: relative;
  margin-block-start: var(--block-space);
  margin-block-end: var(--block-space-double);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  scroll-marker-group: after;
  
  &:focus-visible {
    scrollbar-color: var(--primary) transparent;
    outline: none;
  }

  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }

  /* Hide webkit scrollbar */
  &::-webkit-scrollbar {
    display: none;
  }
}

/* Your original carousel item styling preserved */
.carousel-item {
  scroll-snap-align: center;
  flex-shrink: 0;
  text-align: center;
  
  a {
    color: inherit;
    text-decoration: none;
  }
}

/* Spacer items for padding */
.carousel-spacer {
  scroll-snap-align: none;
  flex-shrink: 0;
  width: 2rem;
}

/* Your original book wrapper 3D effect */
.book-wrapper {
  --book-thickness: 15px;
  --color-paper: #cbc8c2;
  --color-paper-hc: #f5f1e9;
  --color-paper-shadow: #1a161333;
  
  position: relative;
  display: inline-block;
  margin: 1rem;
  
  /* Top edge (pages) */
  &::after {
    content: "";
    width: 100%;
    height: var(--book-thickness);
    background: linear-gradient(90deg,var(--color-paper-shadow),transparent),repeating-linear-gradient(0deg,var(--color-paper),var(--color-paper-hc) 3px);
    position: absolute;
    top: calc(-1 * var(--book-thickness));
    left: calc(var(--book-thickness) / 2);
    transform: skew(-45deg);
  }
  
  /* Right edge (spine) */
  &::before {
    content: "";
    width: var(--book-thickness);
    height: 100%;
    background: linear-gradient(0deg,var(--color-paper-shadow),var(--color-paper-shadow)),repeating-linear-gradient(90deg,var(--color-paper),var(--color-paper-hc) 3px);
    position: absolute;
    top: calc(-1 * var(--book-thickness) / 2);
    right: calc(-1 * var(--book-thickness));
    transform: skew(0, -45deg);
  }
}

.carousel-image {
  height: clamp(360px, 40vh, 480px);
  width: clamp(240px, calc(40vh * 0.667), 320px);
  display: block;
  box-shadow: var(--elevation-3);
  object-fit: cover;
  position: relative;
  z-index: 1;
}

/* Native scroll markers - positioned below carousel */
.carousel--scroll-markers {
  &::xscroll-marker-group {
    position: absolute;
    position-anchor: --carousel;
    container: marker-group / inline-size;
    display: grid;
    gap: var(--size-2);
    place-content: safe center;
    box-sizing: border-box;
    border-radius: var(--radius-full);
    scrollbar-width: none;
    scroll-behavior: smooth;
    
    /* Horizontal positioning */
    inline-size: 100%;
    max-inline-size: min(90cqi, 210px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    padding: 5px 10px;
    scroll-padding-inline: 10px;
    mask: linear-gradient(to right, transparent 0, black 10px, black calc(100% - 10px), transparent 100%);
    top: anchor(bottom);
    left: calc(anchor(left) - 10%);
    right: calc(anchor(right) - 10%);
    margin-block: var(--size-3);
    grid-auto-columns: var(--size-3);
    grid-auto-flow: column;
    justify-self: center;
}

  .carousel-item {
    &::scroll-marker {
      content: "";
      width: var(--size-3);
      height: var(--size-3);
      border: 1px solid var(--outline);
      border-radius: var(--radius-full);
      cursor: pointer;
      background: var(--layer-background-4);
      opacity: 0.6;
      transition: all 0.3s var(--ease-standard);
      display: block;
    }

    &::scroll-marker:target-current {
      background: var(--primary);
      border-color: var(--primary);
      opacity: 1;
    }

    &::scroll-marker:hover {
      transform: scale(1.2);
      opacity: 1;
    }

    &::scroll-marker:focus {
      outline: 2px solid var(--primary);
      outline-offset: 2px;
    }
  }
}

/* Native scroll buttons */
.carousel--scroll-buttons {
  &::scroll-button(left),
  &::scroll-button(right) {
    position: absolute;
    position-anchor: --carousel;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: var(--layer-background-2);
    border: 1px solid var(--layer-background-3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--gray-0);
    transition: all 0.3s var(--ease-standard);
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
  }

  &::scroll-button(left) {
    content: "←";
    left: -60px;
  }

  &::scroll-button(right) {
    content: "→";
    right: -60px;
  }

  &::scroll-button(left):hover,
  &::scroll-button(right):hover {
    background: var(--layer-background-1);
    transform: translateY(-50%) scale(1.1);
  }

  &::scroll-button(left):focus,
  &::scroll-button(right):focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }
}

/* Container wrapper */
.carousel-container {
  position: relative;
  margin-bottom: 80px;
}

/* New carousel item variant with excerpt overlay */
/* Fixed carousel item variant with excerpt overlay */
.carousel-item--excerpt {
  scroll-snap-align: center;
  flex-shrink: 0;
  text-align: center;
  
  a {
    color: inherit;
    text-decoration: none;
  }
  
  /* Standard book wrapper - unchanged */
  .book-wrapper {
    --book-thickness: 15px;
    --color-paper: #cbc8c2;
    --color-paper-hc: #f5f1e9;
    --color-paper-shadow: #1a161333;
    
    position: relative;
    display: inline-block;
    margin: 1rem;
    
    /* Same 3D effects as original */
    &::after {
      content: "";
      width: 100%;
      height: var(--book-thickness);
      background: linear-gradient(90deg,var(--color-paper-shadow),transparent),repeating-linear-gradient(0deg,var(--color-paper),var(--color-paper-hc) 3px);
      position: absolute;
      top: calc(-1 * var(--book-thickness));
      left: calc(var(--book-thickness) / 2);
      transform: skew(-45deg);
      z-index: 3;
    }
    
    &::before {
      content: "";
      width: var(--book-thickness);
      height: 100%;
      background: linear-gradient(0deg,var(--color-paper-shadow),var(--color-paper-shadow)),repeating-linear-gradient(90deg,var(--color-paper),var(--color-paper-hc) 3px);
      position: absolute;
      top: calc(-1 * var(--book-thickness) / 2);
      right: calc(-1 * var(--book-thickness));
      transform: skew(0, -45deg);
      z-index: 3;
    }
  }
  
  /* Container for image and overlay - positioned outside book wrapper */
  .book-figure {
    position: relative;
    display: grid;
    place-items: end stretch;
    margin: 0;
    
    > * {
      grid-area: 1 / 1;
    }
  }
  
  /* Image styling - same as original */
  .carousel-image {
    height: clamp(360px, 40vh, 480px);
    width: clamp(240px, calc(40vh * 0.667), 320px);
    display: block;
    box-shadow: var(--elevation-3);
    object-fit: cover;
    position: relative;
    z-index: 1;
  }
  
  /* Excerpt overlay */
  .book-excerpt {
    /* max-inline-size: 100%; */
    max-inline-size: var(--size-content-3);
    display: grid;
    justify-items: start;
    gap: var(--size-2);
    background: linear-gradient(to top, #000, 75%, #0000);
    padding-inline: var(--size-2);
    padding-block: var(--size-7) var(--size-3);
    color: #FFF;
    text-shadow: 1px 1px 1px rgb(0, 0, 0, 1);
    z-index: var(--layer-top);
    transition: transform 0.3s var(--ease-3), opacity 0.3s var(--ease-3);
    border-bottom-left-radius: var(--radius-medium);
    border-bottom-right-radius: var(--radius-medium);
    
    &:focus-within {
      transform: translateY(0);
    }
    
    h3 {
      color: #FFF;
      margin: 0;
      font-size: var(--font-size-large);
      font-weight: var(--font-weight-7);
    }
    
    p {
      color: #CCC;
      margin: 0;
      line-height: 1.4;
      font-size: var(--font-size-body-small);
    }
    
    .button {
      margin-block-start: var(--size-2);
      margin-inline: auto;
    }
  }
  
  /* Hide the external title for excerpt variant */
  > a > h3 {
    display: none;
  }
}
/* Box sizing rules */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Prevent font size inflation */
html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    margin: 0;
    padding: 0;
  scroll-behavior: smooth !important;
}
body {
    margin: 0;
    padding: 0;
  scroll-behavior: smooth !important;
}

summary {
    list-style: none;
}

summary::-webkit-details-marker {
    display: none;
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
    margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
    list-style: none;
}

/* Set core body defaults */
body {
    min-height: 100vh;
    line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
    line-height: 1.1;
}

button {
    background-color: transparent;
    border-width: 0;
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    line-height: inherit;
    padding: 0;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
    font-size: 1rem;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
    text-decoration-skip-ink: auto;
    color: currentColor;
}

/* Make images easier to work with */
img,
picture {
    max-width: 100%;
    display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
    font: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
    min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
    scroll-margin-block: 5ex;
}
:where(html) {
  --gray-0: #f8f9fa;
  --gray-1: #f1f3f5;
  --gray-2: #e9ecef;
  --gray-3: #dee2e6;
  --gray-4: #ced4da;
  --gray-5: #adb5bd;
  --gray-6: #868e96;
  --gray-7: #495057;
  --gray-8: #343a40;
  --gray-9: #212529;
  --gray-10: #16191d;
  --gray-11: #0d0f12;
  --gray-12: #030507;
  --stone-0: #f8fafb;
  --stone-1: #f2f4f6;
  --stone-2: #ebedef;
  --stone-3: #e0e4e5;
  --stone-4: #d1d6d8;
  --stone-5: #b1b6b9;
  --stone-6: #979b9d;
  --stone-7: #7e8282;
  --stone-8: #666968;
  --stone-9: #50514f;
  --stone-10: #3a3a37;
  --stone-11: #252521;
  --stone-12: #121210;
  --red-0: #fff5f5;
  --red-1: #ffe3e3;
  --red-2: #ffc9c9;
  --red-3: #ffa8a8;
  --red-4: #ff8787;
  --red-5: #ff6b6b;
  --red-6: #fa5252;
  --red-7: #f03e3e;
  --red-8: #e03131;
  --red-9: #c92a2a;
  --red-10: #b02525;
  --red-11: #962020;
  --red-12: #7d1a1a;
  --pink-0: #fff0f6;
  --pink-1: #ffdeeb;
  --pink-2: #fcc2d7;
  --pink-3: #faa2c1;
  --pink-4: #f783ac;
  --pink-5: #f06595;
  --pink-6: #e64980;
  --pink-7: #d6336c;
  --pink-8: #c2255c;
  --pink-9: #a61e4d;
  --pink-10: #8c1941;
  --pink-11: #731536;
  --pink-12: #59102a;
  --purple-0: #f8f0fc;
  --purple-1: #f3d9fa;
  --purple-2: #eebefa;
  --purple-3: #e599f7;
  --purple-4: #da77f2;
  --purple-5: #cc5de8;
  --purple-6: #be4bdb;
  --purple-7: #ae3ec9;
  --purple-8: #9c36b5;
  --purple-9: #862e9c;
  --purple-10: #702682;
  --purple-11: #5a1e69;
  --purple-12: #44174f;
  --violet-0: #f3f0ff;
  --violet-1: #e5dbff;
  --violet-2: #d0bfff;
  --violet-3: #b197fc;
  --violet-4: #9775fa;
  --violet-5: #845ef7;
  --violet-6: #7950f2;
  --violet-7: #7048e8;
  --violet-8: #6741d9;
  --violet-9: #5f3dc4;
  --violet-10: #5235ab;
  --violet-11: #462d91;
  --violet-12: #3a2578;
  --indigo-0: #edf2ff;
  --indigo-1: #dbe4ff;
  --indigo-2: #bac8ff;
  --indigo-3: #91a7ff;
  --indigo-4: #748ffc;
  --indigo-5: #5c7cfa;
  --indigo-6: #4c6ef5;
  --indigo-7: #4263eb;
  --indigo-8: #3b5bdb;
  --indigo-9: #364fc7;
  --indigo-10: #2f44ad;
  --indigo-11: #283a94;
  --indigo-12: #21307a;
  --blue-0: #e7f5ff;
  --blue-1: #d0ebff;
  --blue-2: #a5d8ff;
  --blue-3: #74c0fc;
  --blue-4: #4dabf7;
  --blue-5: #339af0;
  --blue-6: #228be6;
  --blue-7: #1c7ed6;
  --blue-8: #1971c2;
  --blue-9: #1864ab;
  --blue-10: #145591;
  --blue-11: #114678;
  --blue-12: #0d375e;
  --cyan-0: #e3fafc;
  --cyan-1: #c5f6fa;
  --cyan-2: #99e9f2;
  --cyan-3: #66d9e8;
  --cyan-4: #3bc9db;
  --cyan-5: #22b8cf;
  --cyan-6: #15aabf;
  --cyan-7: #1098ad;
  --cyan-8: #0c8599;
  --cyan-9: #0b7285;
  --cyan-10: #095c6b;
  --cyan-11: #074652;
  --cyan-12: #053038;
  --teal-0: #e6fcf5;
  --teal-1: #c3fae8;
  --teal-2: #96f2d7;
  --teal-3: #63e6be;
  --teal-4: #38d9a9;
  --teal-5: #20c997;
  --teal-6: #12b886;
  --teal-7: #0ca678;
  --teal-8: #099268;
  --teal-9: #087f5b;
  --teal-10: #066649;
  --teal-11: #054d37;
  --teal-12: #033325;
  --green-0: #ebfbee;
  --green-1: #d3f9d8;
  --green-2: #b2f2bb;
  --green-3: #8ce99a;
  --green-4: #69db7c;
  --green-5: #51cf66;
  --green-6: #40c057;
  --green-7: #37b24d;
  --green-8: #2f9e44;
  --green-9: #2b8a3e;
  --green-10: #237032;
  --green-11: #1b5727;
  --green-12: #133d1b;
  --lime-0: #f4fce3;
  --lime-1: #e9fac8;
  --lime-2: #d8f5a2;
  --lime-3: #c0eb75;
  --lime-4: #a9e34b;
  --lime-5: #94d82d;
  --lime-6: #82c91e;
  --lime-7: #74b816;
  --lime-8: #66a80f;
  --lime-9: #5c940d;
  --lime-10: #4c7a0b;
  --lime-11: #3c6109;
  --lime-12: #2c4706;
  --yellow-0: #fff9db;
  --yellow-1: #fff3bf;
  --yellow-2: #ffec99;
  --yellow-3: #ffe066;
  --yellow-4: #ffd43b;
  --yellow-5: #fcc419;
  --yellow-6: #fab005;
  --yellow-7: #f59f00;
  --yellow-8: #f08c00;
  --yellow-9: #e67700;
  --yellow-10: #b35c00;
  --yellow-11: #804200;
  --yellow-12: #663500;
  --orange-0: #fff4e6;
  --orange-1: #ffe8cc;
  --orange-2: #ffd8a8;
  --orange-3: #ffc078;
  --orange-4: #ffa94d;
  --orange-5: #ff922b;
  --orange-6: #fd7e14;
  --orange-7: #f76707;
  --orange-8: #e8590c;
  --orange-9: #d9480f;
  --orange-10: #bf400d;
  --orange-11: #99330b;
  --orange-12: #802b09;
  --choco-0: #fff8dc;
  --choco-1: #fce1bc;
  --choco-2: #f7ca9e;
  --choco-3: #f1b280;
  --choco-4: #e99b62;
  --choco-5: #df8545;
  --choco-6: #d46e25;
  --choco-7: #bd5f1b;
  --choco-8: #a45117;
  --choco-9: #8a4513;
  --choco-10: #703a13;
  --choco-11: #572f12;
  --choco-12: #3d210d;
  --brown-0: #faf4eb;
  --brown-1: #ede0d1;
  --brown-2: #e0cab7;
  --brown-3: #d3b79e;
  --brown-4: #c5a285;
  --brown-5: #b78f6d;
  --brown-6: #a87c56;
  --brown-7: #956b47;
  --brown-8: #825b3a;
  --brown-9: #6f4b2d;
  --brown-10: #5e3a21;
  --brown-11: #4e2b15;
  --brown-12: #422412;
  --sand-0: #f8fafb;
  --sand-1: #e6e4dc;
  --sand-2: #d5cfbd;
  --sand-3: #c2b9a0;
  --sand-4: #aea58c;
  --sand-5: #9a9178;
  --sand-6: #867c65;
  --sand-7: #736a53;
  --sand-8: #5f5746;
  --sand-9: #4b4639;
  --sand-10: #38352d;
  --sand-11: #252521;
  --sand-12: #121210;
  --camo-0: #f9fbe7;
  --camo-1: #e8ed9c;
  --camo-2: #d2df4e;
  --camo-3: #c2ce34;
  --camo-4: #b5bb2e;
  --camo-5: #a7a827;
  --camo-6: #999621;
  --camo-7: #8c851c;
  --camo-8: #7e7416;
  --camo-9: #6d6414;
  --camo-10: #5d5411;
  --camo-11: #4d460e;
  --camo-12: #36300a;
  --jungle-0: #ecfeb0;
  --jungle-1: #def39a;
  --jungle-2: #d0e884;
  --jungle-3: #c2dd6e;
  --jungle-4: #b5d15b;
  --jungle-5: #a8c648;
  --jungle-6: #9bbb36;
  --jungle-7: #8fb024;
  --jungle-8: #84a513;
  --jungle-9: #7a9908;
  --jungle-10: #658006;
  --jungle-11: #516605;
  --jungle-12: #3d4d04;
}
[data-color-scheme='dark'] {
  :root {
    --blue-chip: var(--blue-8);
    --brown-chip: var(--brown-8);
    --camo-chip: var(--camo-8);
    --choco-chip: var(--choco-8);
    --cyan-chip: var(--cyan-8);
    --gray-chip: var(--gray-8);
    --green-chip: var(--green-8);
    --indigo-chip: var(--indigo-8);
    --jungle-chip: var(--jungle-8);
    --lime-chip: var(--lime-8);
    --orange-chip: var(--orange-8);
    --pink-chip: var(--pink-8);
    --purple-chip: var(--purple-8);
    --teal-chip: var(--teal-8);
    --violet-chip: var(--violet-8);
    --yellow-chip: var(--yellow-8);

    --on-surface: var(--gray-0);
  }
}

:root {
  --blue-chip: var(--blue-6);
  --brown-chip: var(--brown-6);
  --camo-chip: var(--camo-6);
  --choco-chip: var(--choco-6);
  --cyan-chip: var(--cyan-6);
  --gray-chip: var(--gray-6);
  --green-chip: var(--green-6);
  --indigo-chip: var(--indigo-6);
  --jungle-chip: var(--jungle-6);
  --lime-chip: var(--lime-6);
  --orange-chip: var(--orange-6);
  --pink-chip: var(--pink-6);
  --purple-chip: var(--purple-6);
  --teal-chip: var(--teal-6);
  --violet-chip: var(--violet-6);
  --yellow-chip: var(--yellow-6);
}

:root {
  --rust-red: 175 46 27;
  --on-rust-red: 255 255 255;
  
  --burnt-orange: 204 99 36;
  --on-burnt-orange: 255 255 255;
  
  --slate-blue: 59 75 89;
  --on-slate-blue: 255 255 255;
  
  --warm-taupe: 191 160 122;
  --on-warm-taupe: 0 0 0;
  
  --vivid-orange: 237 128 8;
  --on-vivid-orange: 0 0 0;
  
  --coral-red: 237 63 28;
  --on-coral-red: 255 255 255;
  
  --crimson: 191 27 27;
  --on-crimson: 255 255 255;
  
  --olive-drab: 115 107 30;
  --on-olive-drab: 255 255 255;
  
  --terra-cotta: 208 123 83;
  --on-terra-cotta: 0 0 0;
  
  --taupe: 115 99 86;
  --on-taupe: 255 255 255;
  
  --cardinal-red: 173 29 29;
  --on-cardinal-red: 255 255 255;
  
  --copper: 191 124 42;
  --on-copper: 255 255 255;
  
  --tan: 192 156 111;
  --on-tan: 0 0 0;
  
  --steel-blue: 105 143 156;
  --on-steel-blue: 0 0 0;
  
  --sage-green: 124 149 107;
  --on-sage-green: 0 0 0;
  
  --dusty-purple: 93 97 143;
  --on-dusty-purple: 255 255 255;
  
  --dark-umber: 59 54 51;
  --on-dark-umber: 255 255 255;
  
  --warm-gray: 103 105 94;
  --on-warm-gray: 255 255 255;
}

[data-color-scheme='dark'] {
  :root {
    --on-surface: var(--gray-12);
    --rust-red: 209 91 74;
    --on-rust-red: 0 0 0;
    
    --burnt-orange: 232 139 82;
    --on-burnt-orange: 0 0 0;
    
    --slate-blue: 90 112 131;
    --on-slate-blue: 255 255 255;
    
    --warm-taupe: 212 188 160;
    --on-warm-taupe: 0 0 0;
    
    --vivid-orange: 255 159 60;
    --on-vivid-orange: 0 0 0;
    
    --coral-red: 255 104 71;
    --on-coral-red: 0 0 0;
    
    --crimson: 227 67 67;
    --on-crimson: 0 0 0;
    
    --olive-drab: 153 142 41;
    --on-olive-drab: 0 0 0;
    
    --terra-cotta: 230 155 119;
    --on-terra-cotta: 0 0 0;
    
    --taupe: 153 133 121;
    --on-taupe: 0 0 0;
    
    --cardinal-red: 208 65 65;
    --on-cardinal-red: 0 0 0;
    
    --copper: 220 160 82;
    --on-copper: 0 0 0;
    
    --tan: 214 186 151;
    --on-tan: 0 0 0;
    
    --steel-blue: 137 179 193;
    --on-steel-blue: 0 0 0;
    
    --sage-green: 159 182 140;
    --on-sage-green: 0 0 0;
    
    --dusty-purple: 122 127 179;
    --on-dusty-purple: 0 0 0;
    
    --dark-umber: 92 86 82;
    --on-dark-umber: 255 255 255;
    
    --warm-gray: 136 138 125;
    --on-warm-gray: 0 0 0;
  }
}
.bg-primary {
  background-color: var(--primary);
  color: var(--on-primary);
}
.bg-secondary {
  background-color: var(--secondary);
  color: var(--on-secondary);
}
.bg-tertiary {
  background-color: var(--tertiary);
  color: var(--on-tertiary);
}
.bg-error {
  background-color: var(--error);
  color: var(--on-error);
}
.bg-on-primary {
  background-color: var(--on-primary);
  color: var(--primary);
}
.bg-on-secondary {
  background-color: var(--on-secondary);
  color: var(--secondary);
}
.bg-on-tertiary {
  background-color: var(--on-tertiary);
  color: var(--tertiary);
}
.bg-on-error {
  background-color: var(--on-error);
  color: var(--error);
}
.bg-primary-container {
  background-color: var(--primary-container);
  color: var(--on-primary-container);
}
.bg-secondary-container {
  background-color: var(--secondary-container);
  color: var(--on-secondary-container);
}
.bg-tertiary-container {
  background-color: var(--tertiary-container);
  color: var(--on-tertiary-container);
}
.bg-error-container {
  background-color: var(--error-container);
  color: var(--on-error-container);
}
.bg-on-primary-container {
  background-color: var(--on-primary-container);
  color: var(--primary-container);
}
.bg-on-secondary-container {
  background-color: var(--on-secondary-container);
  color: var(--secondary-container);
}
.bg-on-tertiary-container {
  background-color: var(--on-tertiary-container);
  color: var(--tertiary-container);
}
.bg-on-error-container {
  background-color: var(--on-error-container);
  color: var(--error-container);
}
.bg-layer-background {
  background-color: var(--layer-background);
  color: var(--on-layer-background);
}
.bg-inverse-layer-background {
  background-color: var(--inverse-layer-background);
  color: var(--on-inverse-layer-background);
}
.bg-layer-surface {
  background-color: var(--layer-surface);
  color: var(--on-layer-surface);
}
.bg-layer-container {
  background-color: var(--layer-container);
  color: var(--on-layer-container);
}
.bg-layer-widget {
  background-color: var(--layer-widget);
  color: var(--on-layer-widget);
}
.bg-inverse-primary {
  background-color: var(--inverse-primary);
  color: var(--on-inverse-primary);
}
.bg-on-layer-background {
  background-color: var(--on-layer-background);
  color: var(--on-layer-background);
}
.bg-on-layer-widget {
  background-color: var(--on-layer-widget);
  color: var(--on-layer-widget);
}
.bg-outline {
  background-color: var(--outline);
  color: var(--on-outline);
}
.bg-outline-variant {
  background-color: var(--outline-variant);
  color: var(--on-outline-variant);
}
.text-primary {
  color: var(--primary);
}
.text-secondary {
  color: var(--secondary);
}
.text-tertiary {
  color: var(--tertiary);
}
.text-error {
  color: var(--error);
}
.text-primary-container {
  color: var(--primary-container);
}
.text-secondary-container {
  color: var(--secondary-container);
}
.text-tertiary-container {
  color: var(--tertiary-container);
}
.text-error-container {
  color: var(--error-container);
}
.text-layer-background {
  color: var(--layer-background);
}
.text-layer-widget {
  color: var(--layer-widget);
}
.text-outline-variant {
  color: var(--outline-variant);
}
.text-outline {
  color: var(--outline);
}
.text-on-layer-background {
  color: var(--on-layer-background);
}
.fill-on-layer-background {
  fill: var(--on-layer-background);
}
.fill-primary {
  fill: var(--primary);
}
.text-outline {
  color: var(--outline);
}

.fill-transparent {
  background-color: transparent;
}
.translucent {
  opacity: var(--opacity, 0.5);
}
.text-subdued {
  opacity: 0.75;
}
.theme-gradient {
  background: linear-gradient(135deg, var(--primary), var(--tertiary-container));
  color: var(--on-primary-container)
}
.primary-gradient {
  background: linear-gradient(135deg, var(--primary), var(--primary-container));
  color: var(--on-primary-container)
}
.primary-secondary-gradient {
  background: linear-gradient(135deg, var(--primary), var(--secondary-container));
  color: var(--on-primary-container)
}
:root {
  --duet-color-primary: var(--primary);
  --duet-color-text: var(--on-layer-background);
  --duet-color-text-active: var(--on-primary);
  --duet-color-placeholder: var(--outline);
  --duet-color-button: var(--layer-container);
  --duet-color-layer-background: var(--layer-container);
  --duet-color-overlay: var(--scrim);
  --duet-color-border: var(--outline);
  --duet-font: var(--font-sans);
  --duet-font-normal: var(--font-weight-4);
  --duet-font-bold: var(--font-weight-6);
  --duet-radius: var(--radius-small);
  --duet-z-index: var(--layer-modal);
}
/* Primary */
.primary-100 { background-color: var(--primary-100); color: var(--on-layer-background); }
.primary-99 { background-color: var(--primary-99); color: var(--on-layer-background); }
.primary-95 { background-color: var(--primary-95); color: var(--on-layer-background); }
.primary-90 { background-color: var(--primary-90); color: var(--on-layer-background); }
.primary-80 { background-color: var(--primary-80); color: var(--on-layer-background); }
.primary-70 { background-color: var(--primary-70); color: var(--on-primary); }
.primary-60 { background-color: var(--primary-60); color: var(--on-primary); }
.primary-50 { background-color: var(--primary-50); color: var(--on-primary); }
.primary-40 { background-color: var(--primary-40); color: var(--on-primary); }
.primary-30 { background-color: var(--primary-30); color: var(--on-primary); }
.primary-20 { background-color: var(--primary-20); color: var(--on-primary); }
.primary-10 { background-color: var(--primary-10); color: var(--on-primary); }
.primary-5 { background-color: var(--primary-5); color: var(--on-primary); }
.primary-0 { background-color: var(--primary-0); color: var(--on-primary); }
.secondary-100 { background-color: var(--secondary-100); color: var(--on-layer-background); }
.secondary-99 { background-color: var(--secondary-99); color: var(--on-layer-background); }
.secondary-95 { background-color: var(--secondary-95); color: var(--on-layer-background); }
.secondary-90 { background-color: var(--secondary-90); color: var(--on-layer-background); }
.secondary-80 { background-color: var(--secondary-80); color: var(--on-layer-background); }
.secondary-70 { background-color: var(--secondary-70); color: var(--on-secondary); }
.secondary-60 { background-color: var(--secondary-60); color: var(--on-secondary); }
.secondary-50 { background-color: var(--secondary-50); color: var(--on-secondary); }
.secondary-40 { background-color: var(--secondary-40); color: var(--on-secondary); }
.secondary-30 { background-color: var(--secondary-30); color: var(--on-secondary); }
.secondary-20 { background-color: var(--secondary-20); color: var(--on-secondary); }
.secondary-10 { background-color: var(--secondary-10); color: var(--on-secondary); }
.secondary-5 { background-color: var(--secondary-5); color: var(--on-secondary); }
.secondary-0 { background-color: var(--secondary-0); color: var(--on-secondary); }
.tertiary-100 { background-color: var(--tertiary-100); color: var(--on-survace); }
.tertiary-99 { background-color: var(--tertiary-99); color: var(--on-survace); }
.tertiary-95 { background-color: var(--tertiary-95); color: var(--on-survace); }
.tertiary-90 { background-color: var(--tertiary-90); color: var(--on-survace); }
.tertiary-80 { background-color: var(--tertiary-80); color: var(--on-survace); }
.tertiary-70 { background-color: var(--tertiary-70); color: var(--on-tertiary); }
.tertiary-60 { background-color: var(--tertiary-60); color: var(--on-tertiary); }
.tertiary-50 { background-color: var(--tertiary-50); color: var(--on-tertiary); }
.tertiary-40 { background-color: var(--tertiary-40); color: var(--on-tertiary); }
.tertiary-30 { background-color: var(--tertiary-30); color: var(--on-tertiary); }
.tertiary-20 { background-color: var(--tertiary-20); color: var(--on-tertiary); }
.tertiary-10 { background-color: var(--tertiary-10); color: var(--on-tertiary); }
.tertiary-5 { background-color: var(--tertiary-5); color: var(--on-tertiary); }
.tertiary-0 { background-color: var(--tertiary-0); color: var(--on-tertiary); }
.error-100 { background-color: var(--error-100); color: var(--on-layer-background); }
.error-99 { background-color: var(--error-99); color: var(--on-layer-background); }
.error-95 { background-color: var(--error-95); color: var(--on-layer-background); }
.error-90 { background-color: var(--error-90); color: var(--on-layer-background); }
.error-80 { background-color: var(--error-80); color: var(--on-layer-background); }
.error-70 { background-color: var(--error-70); color: var(--on-error); }
.error-60 { background-color: var(--error-60); color: var(--on-error) }
.error-50 { background-color: var(--error-50); color: var(--on-error); }
.error-40 { background-color: var(--error-40); color: var(--on-error); }
.error-30 { background-color: var(--error-30); color: var(--on-error); }
.error-20 { background-color: var(--error-20); color: var(--on-error); }
.error-10 { background-color: var(--error-10); color: var(--on-error); }
.error-5 { background-color: var(--error-5); color: var(--on-error); }
.error-0 { background-color: var(--error-0); color: var(--on-error); }
.neutral-100 { background-color: var(--neutral-100); color: var(--on-neutral); }
.neutral-99 { background-color: var(--neutral-99); color: var(--on-neutral); }
.neutral-95 { background-color: var(--neutral-95); color: var(--on-neutral); }
.neutral-90 { background-color: var(--neutral-90); color: var(--on-neutral); }
.neutral-80 { background-color: var(--neutral-80); color: var(--on-neutral); }
.neutral-70 { background-color: var(--neutral-70); color: var(--on-neutral); }
.neutral-60 { background-color: var(--neutral-60); color: var(--on-neutral); }
.neutral-50 { background-color: var(--neutral-50); color: var(--on-neutral); }
.neutral-40 { background-color: var(--neutral-40); color: var(--on-neutral); }
.neutral-30 { background-color: var(--neutral-30); color: var(--on-neutral); }
.neutral-20 { background-color: var(--neutral-20); color: var(--on-neutral); }
.neutral-10 { background-color: var(--neutral-10); color: var(--on-neutral); }
.neutral-5 { background-color: var(--neutral-5); color: var(--on-neutral); }
.neutral-0 { background-color: var(--neutral-0); color: var(--on-neutral); }
.neutral-variant-100 { background-color: var(--neutral-variant-100); color: var(--on-neutral); }
.neutral-variant-99 { background-color: var(--neutral-variant-99); color: var(--on-neutral); }
.neutral-variant-95 { background-color: var(--neutral-variant-95); color: var(--on-neutral); }
.neutral-variant-90 { background-color: var(--neutral-variant-90); color: var(--on-neutral); }
.neutral-variant-80 { background-color: var(--neutral-variant-80); color: var(--on-neutral); }
.neutral-variant-70 { background-color: var(--neutral-variant-70); color: var(--on-neutral); }
.neutral-variant-60 { background-color: var(--neutral-variant-60); color: var(--on-neutral); }
.neutral-variant-50 { background-color: var(--neutral-variant-50); color: var(--on-neutral); }
.neutral-variant-40 { background-color: var(--neutral-variant-40); color: var(--on-neutral); }
.neutral-variant-30 { background-color: var(--neutral-variant-30); color: var(--on-neutral); }
.neutral-variant-20 { background-color: var(--neutral-variant-20); color: var(--on-neutral); }
.neutral-variant-10 { background-color: var(--neutral-variant-10); color: var(--on-neutral); }
.neutral-variant-5 { background-color: var(--neutral-variant-5); color: var(--on-neutral); }
.neutral-variant-0 { background-color: var(--neutral-variant-0); color: var(--on-neutral); }
:root {
  --primary-color-percent: 70%;
  --primary-gray-percent: 30%;
  --secondary-color-percent: 40%;
  --secondary-gray-percent: 60%;
  --surface-color-percent: 5%;
  --surface-gray-percent: 95%;
}

[data-color='blue'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--blue-8) var(--primary-color-percent), var(--gray-8) var(--primary-gray-percent));
  --primary-container: var(--blue-1);
  --on-primary: var(--gray-0);
  --on-primary-container: var(--blue-11);
  --secondary: color-mix(in srgb, var(--blue-8) var(--secondary-color-percent), var(--gray-8) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--blue-1) var(--secondary-color-percent), var(--gray-1) var(--secondary-gray-percent));
  --on-secondary: var(--gray-0);
  --on-secondary-container: var(--gray-11);
  --tertiary: color-mix(in srgb, var(--purple-8) var(--primary-color-percent), var(--gray-8) var(--primary-gray-percent));
  --tertiary-container: var(--purple-1);
  --on-tertiary: var(--gray-0);
  --on-tertiary-container: var(--purple-11);
  --error: color-mix(in srgb, var(--red-8) var(--primary-color-percent), var(--gray-8) var(--primary-gray-percent));
  --error-container: var(--red-1);
  --on-error: var(--gray-0);
  --on-error-container: var(--red-11);
  --layer-background: color-mix(in srgb, var(--blue-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-9);
  --layer-surface: color-mix(in srgb, var(--blue-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--blue-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--blue-3) var(--surface-color-percent), var(--gray-3) var(--surface-gray-percent));
  --surface-variant: var(--gray-2);
  --on-surface-variant: var(--gray-7);
  --outline: var(--gray-6);
  --outline-variant: var(--gray-4);
  --surface-tint: var(--blue-6);
  --shadow: var(--gray-12);
  --scrim: var(--gray-12);
  --inverse-surface: var(--gray-9);
  --inverse-on-surface: var(--gray-1);
  --inverse-primary: var(--blue-3);
}

[data-color='blue'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--blue-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --primary-container: var(--blue-8);
  --on-primary: var(--blue-9);
  --on-primary-container: var(--blue-1);
  --secondary: color-mix(in srgb, var(--blue-3) var(--secondary-color-percent), var(--gray-3) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--blue-8) var(--secondary-color-percent), var(--gray-8) var(--secondary-gray-percent));
  --on-secondary: var(--gray-9);
  --on-secondary-container: var(--gray-1);
  --tertiary: color-mix(in srgb, var(--purple-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --tertiary-container: var(--purple-8);
  --on-tertiary: var(--purple-9);
  --on-tertiary-container: var(--purple-1);
  --error: color-mix(in srgb, var(--red-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --error-container: var(--red-9);
  --on-error: var(--red-10);
  --on-error-container: var(--red-1);
  --layer-background: color-mix(in srgb, var(--blue-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-3);
  --layer-surface: color-mix(in srgb, var(--blue-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--blue-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--blue-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --surface-variant: var(--gray-8);
  --on-surface-variant: var(--gray-4);
  --outline: var(--gray-5);
  --outline-variant: var(--gray-8);
  --surface-tint: var(--blue-3);
  --inverse-surface: var(--gray-2);
  --inverse-on-surface: var(--gray-9);
  --inverse-primary: var(--blue-6);
}

@media (prefers-contrast: more) {
[data-color='blue'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--blue-9) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --primary-container: var(--blue-8);
  --on-primary-container: var(--gray-0);
  --secondary: color-mix(in srgb, var(--blue-9) var(--secondary-color-percent), var(--gray-10) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--blue-8) var(--secondary-color-percent), var(--gray-8) var(--secondary-gray-percent));
  --on-secondary-container: var(--gray-0);
  --tertiary: color-mix(in srgb, var(--purple-10) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --tertiary-container: var(--purple-8);
  --on-tertiary-container: var(--gray-0);
  --error: color-mix(in srgb, var(--red-10) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --error-container: var(--red-9);
  --on-error-container: var(--gray-0);
  --layer-background: color-mix(in srgb, var(--blue-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-10);
  --layer-surface: color-mix(in srgb, var(--blue-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--blue-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--blue-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-10);
  --outline: var(--gray-9);
  --outline-variant: var(--gray-9);
}
}

@media (prefers-contrast: more) {
[data-color='blue'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--blue-3) var(--primary-gray-percent));
  --primary-container: var(--blue-2);
  --on-primary: var(--gray-12);
  --on-primary-container: var(--gray-12);
  --secondary: color-mix(in srgb, var(--gray-0) var(--secondary-color-percent), var(--blue-3) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--gray-3) var(--secondary-color-percent), var(--blue-2) var(--secondary-gray-percent));
  --on-secondary: var(--gray-12);
  --on-secondary-container: var(--gray-12);
  --tertiary: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--purple-3) var(--primary-gray-percent));
  --tertiary-container: var(--purple-3);
  --on-tertiary: var(--gray-12);
  --on-tertiary-container: var(--gray-12);
  --error: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--red-3) var(--primary-gray-percent));
  --error-container: var(--red-3);
  --on-error: var(--gray-12);
  --on-error-container: var(--gray-12);
  --layer-background: color-mix(in srgb, var(--blue-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-0);
  --layer-surface: color-mix(in srgb, var(--blue-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--blue-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--blue-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-0);
  --outline: var(--gray-3);
  --outline-variant: var(--gray-3);
}
}

@media (prefers-contrast: less) {
[data-color='blue'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--blue-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --primary-container: var(--blue-4);
  --on-primary-container: var(--gray-0);
  --secondary: color-mix(in srgb, var(--blue-7) var(--secondary-color-percent), var(--gray-7) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--blue-4) var(--secondary-color-percent), var(--gray-5) var(--secondary-gray-percent));
  --on-secondary-container: var(--gray-0);
  --tertiary: color-mix(in srgb, var(--purple-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --tertiary-container: var(--purple-4);
  --on-tertiary-container: var(--gray-0);
  --error: color-mix(in srgb, var(--red-8) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --error-container: var(--red-5);
  --on-error-container: var(--gray-0);
  --layer-background: color-mix(in srgb, var(--blue-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-8);
  --layer-surface: color-mix(in srgb, var(--blue-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--blue-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--blue-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-8);
  --outline: var(--gray-7);
  --outline-variant: var(--gray-5);
}
}

@media (prefers-contrast: less) {
[data-color='blue'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--blue-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --primary-container: var(--blue-4);
  --on-primary: var(--blue-11);
  --on-primary-container: var(--gray-12);
  --secondary: color-mix(in srgb, var(--blue-2) var(--secondary-color-percent), var(--gray-2) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--blue-4) var(--secondary-color-percent), var(--gray-5) var(--secondary-gray-percent));
  --on-secondary: var(--gray-11);
  --on-secondary-container: var(--gray-12);
  --tertiary: color-mix(in srgb, var(--purple-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --tertiary-container: var(--purple-5);
  --on-tertiary: var(--purple-11);
  --on-tertiary-container: var(--gray-12);
  --error: color-mix(in srgb, var(--red-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --error-container: var(--red-4);
  --on-error: var(--red-11);
  --on-error-container: var(--gray-12);
  --layer-background: color-mix(in srgb, var(--blue-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-4);
  --layer-surface: color-mix(in srgb, var(--blue-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--blue-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--blue-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-3);
  --outline: var(--gray-4);
  --outline-variant: var(--gray-6);
}
}
:root {
  --primary-color-percent: 70%;
  --primary-gray-percent: 30%;
  --secondary-color-percent: 40%;
  --secondary-gray-percent: 60%;
  --surface-color-percent: 5%;
  --surface-gray-percent: 95%;
}

[data-color='brown'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--brown-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --primary-container: var(--brown-1);
  --on-primary: var(--gray-0);
  --on-primary-container: var(--brown-11);
  --secondary: color-mix(in srgb, var(--brown-7) var(--secondary-color-percent), var(--gray-7) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--brown-1) var(--secondary-color-percent), var(--gray-1) var(--secondary-gray-percent));
  --on-secondary: var(--gray-0);
  --on-secondary-container: var(--gray-11);
  --tertiary: color-mix(in srgb, var(--orange-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --tertiary-container: var(--orange-1);
  --on-tertiary: var(--gray-0);
  --on-tertiary-container: var(--orange-11);
  --error: color-mix(in srgb, var(--red-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --error-container: var(--red-1);
  --on-error: var(--gray-0);
  --on-error-container: var(--red-11);
  --layer-background: color-mix(in srgb, var(--brown-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-9);
  --layer-surface: color-mix(in srgb, var(--brown-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--brown-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--brown-3) var(--surface-color-percent), var(--gray-3) var(--surface-gray-percent));
  --surface-variant: var(--gray-2);
  --on-surface-variant: var(--gray-7);
  --outline: var(--gray-6);
  --outline-variant: var(--gray-4);
  --surface-tint: var(--brown-6);
  --shadow: var(--gray-12);
  --scrim: var(--gray-12);
  --inverse-surface: var(--gray-9);
  --inverse-on-surface: var(--gray-1);
  --inverse-primary: var(--brown-3);
}

[data-color='brown'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--brown-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --primary-container: var(--brown-8);
  --on-primary: var(--brown-9);
  --on-primary-container: var(--brown-1);
  --secondary: color-mix(in srgb, var(--brown-3) var(--secondary-color-percent), var(--gray-3) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--brown-8) var(--secondary-color-percent), var(--gray-8) var(--secondary-gray-percent));
  --on-secondary: var(--gray-9);
  --on-secondary-container: var(--gray-1);
  --tertiary: color-mix(in srgb, var(--orange-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --tertiary-container: var(--orange-8);
  --on-tertiary: var(--orange-9);
  --on-tertiary-container: var(--orange-1);
  --error: color-mix(in srgb, var(--red-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --error-container: var(--red-9);
  --on-error: var(--red-10);
  --on-error-container: var(--red-1);
  --layer-background: color-mix(in srgb, var(--brown-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-3);
  --layer-surface: color-mix(in srgb, var(--brown-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--brown-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--brown-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --surface-variant: var(--gray-8);
  --on-surface-variant: var(--gray-4);
  --outline: var(--gray-5);
  --outline-variant: var(--gray-8);
  --surface-tint: var(--brown-3);
  --inverse-surface: var(--gray-2);
  --inverse-on-surface: var(--gray-9);
  --inverse-primary: var(--brown-6);
}

@media (prefers-contrast: more) {
[data-color='brown'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--brown-9) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --primary-container: var(--brown-8);
  --on-primary-container: var(--gray-0);
  --secondary: color-mix(in srgb, var(--brown-9) var(--secondary-color-percent), var(--gray-10) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--brown-8) var(--secondary-color-percent), var(--gray-8) var(--secondary-gray-percent));
  --on-secondary-container: var(--gray-0);
  --tertiary: color-mix(in srgb, var(--orange-10) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --tertiary-container: var(--orange-8);
  --on-tertiary-container: var(--gray-0);
  --error: color-mix(in srgb, var(--red-10) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --error-container: var(--red-9);
  --on-error-container: var(--gray-0);
  --layer-background: color-mix(in srgb, var(--brown-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-10);
  --layer-surface: color-mix(in srgb, var(--brown-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--brown-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--brown-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-10);
  --outline: var(--gray-9);
  --outline-variant: var(--gray-9);
}
}

@media (prefers-contrast: more) {
[data-color='brown'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--brown-3) var(--primary-gray-percent));
  --primary-container: var(--brown-2);
  --on-primary: var(--gray-12);
  --on-primary-container: var(--gray-12);
  --secondary: color-mix(in srgb, var(--gray-0) var(--secondary-color-percent), var(--brown-3) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--gray-3) var(--secondary-color-percent), var(--brown-2) var(--secondary-gray-percent));
  --on-secondary: var(--gray-12);
  --on-secondary-container: var(--gray-12);
  --tertiary: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--orange-3) var(--primary-gray-percent));
  --tertiary-container: var(--orange-3);
  --on-tertiary: var(--gray-12);
  --on-tertiary-container: var(--gray-12);
  --error: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--red-3) var(--primary-gray-percent));
  --error-container: var(--red-3);
  --on-error: var(--gray-12);
  --on-error-container: var(--gray-12);
  --layer-background: color-mix(in srgb, var(--brown-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-0);
  --layer-surface: color-mix(in srgb, var(--brown-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--brown-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--brown-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-0);
  --outline: var(--gray-3);
  --outline-variant: var(--gray-3);
}
}

@media (prefers-contrast: less) {
[data-color='brown'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--brown-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --primary-container: var(--brown-4);
  --on-primary-container: var(--gray-0);
  --secondary: color-mix(in srgb, var(--brown-7) var(--secondary-color-percent), var(--gray-7) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--brown-4) var(--secondary-color-percent), var(--gray-5) var(--secondary-gray-percent));
  --on-secondary-container: var(--gray-0);
  --tertiary: color-mix(in srgb, var(--orange-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --tertiary-container: var(--orange-4);
  --on-tertiary-container: var(--gray-0);
  --error: color-mix(in srgb, var(--red-8) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --error-container: var(--red-5);
  --on-error-container: var(--gray-0);
  --layer-background: color-mix(in srgb, var(--brown-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-8);
  --layer-surface: color-mix(in srgb, var(--brown-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--brown-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--brown-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-8);
  --outline: var(--gray-7);
  --outline-variant: var(--gray-5);
}
}

@media (prefers-contrast: less) {
[data-color='brown'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--brown-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --primary-container: var(--brown-4);
  --on-primary: var(--brown-11);
  --on-primary-container: var(--gray-12);
  --secondary: color-mix(in srgb, var(--brown-2) var(--secondary-color-percent), var(--gray-2) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--brown-4) var(--secondary-color-percent), var(--gray-5) var(--secondary-gray-percent));
  --on-secondary: var(--gray-11);
  --on-secondary-container: var(--gray-12);
  --tertiary: color-mix(in srgb, var(--orange-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --tertiary-container: var(--orange-5);
  --on-tertiary: var(--orange-11);
  --on-tertiary-container: var(--gray-12);
  --error: color-mix(in srgb, var(--red-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --error-container: var(--red-4);
  --on-error: var(--red-11);
  --on-error-container: var(--gray-12);
  --layer-background: color-mix(in srgb, var(--brown-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-4);
  --layer-surface: color-mix(in srgb, var(--brown-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--brown-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--brown-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-3);
  --outline: var(--gray-4);
  --outline-variant: var(--gray-6);
}
}
:root {
  --primary-color-percent: 70%;
  --primary-gray-percent: 30%;
  --secondary-color-percent: 40%;
  --secondary-gray-percent: 60%;
  --surface-color-percent: 5%;
  --surface-gray-percent: 95%;
}

[data-color='camo'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--camo-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --primary-container: var(--camo-1);
  --on-primary: var(--gray-0);
  --on-primary-container: var(--camo-11);
  --secondary: color-mix(in srgb, var(--camo-7) var(--secondary-color-percent), var(--gray-7) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--camo-1) var(--secondary-color-percent), var(--gray-1) var(--secondary-gray-percent));
  --on-secondary: var(--gray-0);
  --on-secondary-container: var(--gray-11);
  --tertiary: color-mix(in srgb, var(--jungle-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --tertiary-container: var(--jungle-1);
  --on-tertiary: var(--gray-0);
  --on-tertiary-container: var(--jungle-11);
  --error: color-mix(in srgb, var(--red-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --error-container: var(--red-1);
  --on-error: var(--gray-0);
  --on-error-container: var(--red-11);
  --layer-background: color-mix(in srgb, var(--camo-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-9);
  --layer-surface: color-mix(in srgb, var(--camo-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--camo-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--camo-3) var(--surface-color-percent), var(--gray-3) var(--surface-gray-percent));
  --surface-variant: var(--gray-2);
  --on-surface-variant: var(--gray-7);
  --outline: var(--gray-6);
  --outline-variant: var(--gray-4);
  --surface-tint: var(--camo-6);
  --shadow: var(--gray-12);
  --scrim: var(--gray-12);
  --inverse-surface: var(--gray-9);
  --inverse-on-surface: var(--gray-1);
  --inverse-primary: var(--camo-3);
}

[data-color='camo'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--camo-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --primary-container: var(--camo-8);
  --on-primary: var(--camo-9);
  --on-primary-container: var(--camo-1);
  --secondary: color-mix(in srgb, var(--camo-3) var(--secondary-color-percent), var(--gray-3) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--camo-8) var(--secondary-color-percent), var(--gray-8) var(--secondary-gray-percent));
  --on-secondary: var(--gray-9);
  --on-secondary-container: var(--gray-1);
  --tertiary: color-mix(in srgb, var(--jungle-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --tertiary-container: var(--jungle-8);
  --on-tertiary: var(--jungle-9);
  --on-tertiary-container: var(--jungle-1);
  --error: color-mix(in srgb, var(--red-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --error-container: var(--red-9);
  --on-error: var(--red-10);
  --on-error-container: var(--red-1);
  --layer-background: color-mix(in srgb, var(--camo-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-3);
  --layer-surface: color-mix(in srgb, var(--camo-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--camo-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--camo-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --surface-variant: var(--gray-8);
  --on-surface-variant: var(--gray-4);
  --outline: var(--gray-5);
  --outline-variant: var(--gray-8);
  --surface-tint: var(--camo-3);
  --inverse-surface: var(--gray-2);
  --inverse-on-surface: var(--gray-9);
  --inverse-primary: var(--camo-6);
}

@media (prefers-contrast: more) {
[data-color='camo'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--camo-9) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --primary-container: var(--camo-8);
  --on-primary-container: var(--gray-0);
  --secondary: color-mix(in srgb, var(--camo-9) var(--secondary-color-percent), var(--gray-10) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--camo-8) var(--secondary-color-percent), var(--gray-8) var(--secondary-gray-percent));
  --on-secondary-container: var(--gray-0);
  --tertiary: color-mix(in srgb, var(--jungle-10) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --tertiary-container: var(--jungle-8);
  --on-tertiary-container: var(--gray-0);
  --error: color-mix(in srgb, var(--red-10) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --error-container: var(--red-9);
  --on-error-container: var(--gray-0);
  --layer-background: color-mix(in srgb, var(--camo-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-10);
  --layer-surface: color-mix(in srgb, var(--camo-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--camo-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--camo-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-10);
  --outline: var(--gray-9);
  --outline-variant: var(--gray-9);
}
}

@media (prefers-contrast: more) {
[data-color='camo'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--camo-3) var(--primary-gray-percent));
  --primary-container: var(--camo-2);
  --on-primary: var(--gray-12);
  --on-primary-container: var(--gray-12);
  --secondary: color-mix(in srgb, var(--gray-0) var(--secondary-color-percent), var(--camo-3) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--gray-3) var(--secondary-color-percent), var(--camo-2) var(--secondary-gray-percent));
  --on-secondary: var(--gray-12);
  --on-secondary-container: var(--gray-12);
  --tertiary: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--jungle-3) var(--primary-gray-percent));
  --tertiary-container: var(--jungle-3);
  --on-tertiary: var(--gray-12);
  --on-tertiary-container: var(--gray-12);
  --error: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--red-3) var(--primary-gray-percent));
  --error-container: var(--red-3);
  --on-error: var(--gray-12);
  --on-error-container: var(--gray-12);
  --layer-background: color-mix(in srgb, var(--camo-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-0);
  --layer-surface: color-mix(in srgb, var(--camo-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--camo-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--camo-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-0);
  --outline: var(--gray-3);
  --outline-variant: var(--gray-3);
}
}

@media (prefers-contrast: less) {
[data-color='camo'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--camo-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --primary-container: var(--camo-4);
  --on-primary-container: var(--gray-0);
  --secondary: color-mix(in srgb, var(--camo-7) var(--secondary-color-percent), var(--gray-7) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--camo-4) var(--secondary-color-percent), var(--gray-5) var(--secondary-gray-percent));
  --on-secondary-container: var(--gray-0);
  --tertiary: color-mix(in srgb, var(--jungle-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --tertiary-container: var(--jungle-4);
  --on-tertiary-container: var(--gray-0);
  --error: color-mix(in srgb, var(--red-8) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --error-container: var(--red-5);
  --on-error-container: var(--gray-0);
  --layer-background: color-mix(in srgb, var(--camo-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-8);
  --layer-surface: color-mix(in srgb, var(--camo-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--camo-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--camo-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-8);
  --outline: var(--gray-7);
  --outline-variant: var(--gray-5);
}
}

@media (prefers-contrast: less) {
[data-color='camo'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--camo-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --primary-container: var(--camo-4);
  --on-primary: var(--camo-11);
  --on-primary-container: var(--gray-12);
  --secondary: color-mix(in srgb, var(--camo-2) var(--secondary-color-percent), var(--gray-2) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--camo-4) var(--secondary-color-percent), var(--gray-5) var(--secondary-gray-percent));
  --on-secondary: var(--gray-11);
  --on-secondary-container: var(--gray-12);
  --tertiary: color-mix(in srgb, var(--jungle-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --tertiary-container: var(--jungle-5);
  --on-tertiary: var(--jungle-11);
  --on-tertiary-container: var(--gray-12);
  --error: color-mix(in srgb, var(--red-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --error-container: var(--red-4);
  --on-error: var(--red-11);
  --on-error-container: var(--gray-12);
  --layer-background: color-mix(in srgb, var(--camo-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-4);
  --layer-surface: color-mix(in srgb, var(--camo-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--camo-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--camo-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-3);
  --outline: var(--gray-4);
  --outline-variant: var(--gray-6);
}
}
:root {
  --primary-color-percent: 70%;
  --primary-gray-percent: 30%;
  --secondary-color-percent: 40%;
  --secondary-gray-percent: 60%;
  --surface-color-percent: 5%;
  --surface-gray-percent: 95%;
}

[data-color='choco'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--choco-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --primary-container: var(--choco-1);
  --on-primary: var(--gray-0);
  --on-primary-container: var(--choco-11);
  --secondary: color-mix(in srgb, var(--choco-7) var(--secondary-color-percent), var(--gray-7) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--choco-1) var(--secondary-color-percent), var(--gray-1) var(--secondary-gray-percent));
  --on-secondary: var(--gray-0);
  --on-secondary-container: var(--gray-11);
  --tertiary: color-mix(in srgb, var(--brown-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --tertiary-container: var(--brown-1);
  --on-tertiary: var(--gray-0);
  --on-tertiary-container: var(--brown-11);
  --error: color-mix(in srgb, var(--red-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --error-container: var(--red-1);
  --on-error: var(--gray-0);
  --on-error-container: var(--red-11);
  --layer-background: color-mix(in srgb, var(--choco-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-9);
  --layer-surface: color-mix(in srgb, var(--choco-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--choco-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--choco-3) var(--surface-color-percent), var(--gray-3) var(--surface-gray-percent));
  --surface-variant: var(--gray-2);
  --on-surface-variant: var(--gray-7);
  --outline: var(--gray-6);
  --outline-variant: var(--gray-4);
  --surface-tint: var(--choco-6);
  --shadow: var(--gray-12);
  --scrim: var(--gray-12);
  --inverse-surface: var(--gray-9);
  --inverse-on-surface: var(--gray-1);
  --inverse-primary: var(--choco-3);
}

[data-color='choco'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--choco-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --primary-container: var(--choco-8);
  --on-primary: var(--choco-9);
  --on-primary-container: var(--choco-1);
  --secondary: color-mix(in srgb, var(--choco-3) var(--secondary-color-percent), var(--gray-3) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--choco-8) var(--secondary-color-percent), var(--gray-8) var(--secondary-gray-percent));
  --on-secondary: var(--gray-9);
  --on-secondary-container: var(--gray-1);
  --tertiary: color-mix(in srgb, var(--brown-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --tertiary-container: var(--brown-8);
  --on-tertiary: var(--brown-9);
  --on-tertiary-container: var(--brown-1);
  --error: color-mix(in srgb, var(--red-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --error-container: var(--red-9);
  --on-error: var(--red-10);
  --on-error-container: var(--red-1);
  --layer-background: color-mix(in srgb, var(--choco-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-3);
  --layer-surface: color-mix(in srgb, var(--choco-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--choco-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--choco-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --surface-variant: var(--gray-8);
  --on-surface-variant: var(--gray-4);
  --outline: var(--gray-5);
  --outline-variant: var(--gray-8);
  --surface-tint: var(--choco-3);
  --inverse-surface: var(--gray-2);
  --inverse-on-surface: var(--gray-9);
  --inverse-primary: var(--choco-6);
}

@media (prefers-contrast: more) {
[data-color='choco'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--choco-9) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --primary-container: var(--choco-8);
  --on-primary-container: var(--gray-0);
  --secondary: color-mix(in srgb, var(--choco-9) var(--secondary-color-percent), var(--gray-10) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--choco-8) var(--secondary-color-percent), var(--gray-8) var(--secondary-gray-percent));
  --on-secondary-container: var(--gray-0);
  --tertiary: color-mix(in srgb, var(--brown-10) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --tertiary-container: var(--brown-8);
  --on-tertiary-container: var(--gray-0);
  --error: color-mix(in srgb, var(--red-10) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --error-container: var(--red-9);
  --on-error-container: var(--gray-0);
  --layer-background: color-mix(in srgb, var(--choco-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-10);
  --layer-surface: color-mix(in srgb, var(--choco-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--choco-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--choco-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-10);
  --outline: var(--gray-9);
  --outline-variant: var(--gray-9);
}
}

@media (prefers-contrast: more) {
[data-color='choco'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--choco-3) var(--primary-gray-percent));
  --primary-container: var(--choco-2);
  --on-primary: var(--gray-12);
  --on-primary-container: var(--gray-12);
  --secondary: color-mix(in srgb, var(--gray-0) var(--secondary-color-percent), var(--choco-3) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--gray-3) var(--secondary-color-percent), var(--choco-2) var(--secondary-gray-percent));
  --on-secondary: var(--gray-12);
  --on-secondary-container: var(--gray-12);
  --tertiary: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--brown-3) var(--primary-gray-percent));
  --tertiary-container: var(--brown-3);
  --on-tertiary: var(--gray-12);
  --on-tertiary-container: var(--gray-12);
  --error: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--red-3) var(--primary-gray-percent));
  --error-container: var(--red-3);
  --on-error: var(--gray-12);
  --on-error-container: var(--gray-12);
  --layer-background: color-mix(in srgb, var(--choco-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-0);
  --layer-surface: color-mix(in srgb, var(--choco-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--choco-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--choco-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-0);
  --outline: var(--gray-3);
  --outline-variant: var(--gray-3);
}
}

@media (prefers-contrast: less) {
[data-color='choco'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--choco-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --primary-container: var(--choco-4);
  --on-primary-container: var(--gray-0);
  --secondary: color-mix(in srgb, var(--choco-7) var(--secondary-color-percent), var(--gray-7) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--choco-4) var(--secondary-color-percent), var(--gray-5) var(--secondary-gray-percent));
  --on-secondary-container: var(--gray-0);
  --tertiary: color-mix(in srgb, var(--brown-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --tertiary-container: var(--brown-4);
  --on-tertiary-container: var(--gray-0);
  --error: color-mix(in srgb, var(--red-8) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --error-container: var(--red-5);
  --on-error-container: var(--gray-0);
  --layer-background: color-mix(in srgb, var(--choco-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-8);
  --layer-surface: color-mix(in srgb, var(--choco-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--choco-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--choco-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-8);
  --outline: var(--gray-7);
  --outline-variant: var(--gray-5);
}
}

@media (prefers-contrast: less) {
[data-color='choco'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--choco-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --primary-container: var(--choco-4);
  --on-primary: var(--choco-11);
  --on-primary-container: var(--gray-12);
  --secondary: color-mix(in srgb, var(--choco-2) var(--secondary-color-percent), var(--gray-2) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--choco-4) var(--secondary-color-percent), var(--gray-5) var(--secondary-gray-percent));
  --on-secondary: var(--gray-11);
  --on-secondary-container: var(--gray-12);
  --tertiary: color-mix(in srgb, var(--brown-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --tertiary-container: var(--brown-5);
  --on-tertiary: var(--brown-11);
  --on-tertiary-container: var(--gray-12);
  --error: color-mix(in srgb, var(--red-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --error-container: var(--red-4);
  --on-error: var(--red-11);
  --on-error-container: var(--gray-12);
  --layer-background: color-mix(in srgb, var(--choco-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-4);
  --layer-surface: color-mix(in srgb, var(--choco-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--choco-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--choco-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-3);
  --outline: var(--gray-4);
  --outline-variant: var(--gray-6);
}
}
:root {
  --primary-color-percent: 70%;
  --primary-gray-percent: 30%;
  --secondary-color-percent: 40%;
  --secondary-gray-percent: 60%;
  --surface-color-percent: 5%;
  --surface-gray-percent: 95%;
}

[data-color='cyan'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--cyan-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --primary-container: var(--cyan-1);
  --on-primary: var(--gray-0);
  --on-primary-container: var(--cyan-11);
  --secondary: color-mix(in srgb, var(--cyan-7) var(--secondary-color-percent), var(--gray-7) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--cyan-1) var(--secondary-color-percent), var(--gray-1) var(--secondary-gray-percent));
  --on-secondary: var(--gray-0);
  --on-secondary-container: var(--gray-11);
  --tertiary: color-mix(in srgb, var(--blue-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --tertiary-container: var(--blue-1);
  --on-tertiary: var(--gray-0);
  --on-tertiary-container: var(--blue-11);
  --error: color-mix(in srgb, var(--red-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --error-container: var(--red-1);
  --on-error: var(--gray-0);
  --on-error-container: var(--red-11);
  --layer-background: color-mix(in srgb, var(--cyan-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-9);
  --layer-surface: color-mix(in srgb, var(--cyan-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--cyan-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--cyan-3) var(--surface-color-percent), var(--gray-3) var(--surface-gray-percent));
  --surface-variant: var(--gray-2);
  --on-surface-variant: var(--gray-7);
  --on-surface: var(--gray-0);
  --outline: var(--gray-6);
  --outline-variant: var(--gray-4);
  --surface-tint: var(--cyan-6);
  --shadow: var(--gray-12);
  --scrim: var(--gray-12);
  --inverse-surface: var(--gray-9);
  --inverse-on-surface: var(--gray-1);
  --inverse-primary: var(--cyan-3);
}

[data-color='cyan'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--cyan-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --primary-container: var(--cyan-8);
  --on-primary: var(--cyan-9);
  --on-primary-container: var(--cyan-1);
  --secondary: color-mix(in srgb, var(--cyan-3) var(--secondary-color-percent), var(--gray-3) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--cyan-8) var(--secondary-color-percent), var(--gray-8) var(--secondary-gray-percent));
  --on-secondary: var(--gray-9);
  --on-secondary-container: var(--gray-1);
  --tertiary: color-mix(in srgb, var(--blue-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --tertiary-container: var(--blue-8);
  --on-tertiary: var(--blue-9);
  --on-tertiary-container: var(--blue-1);
  --error: color-mix(in srgb, var(--red-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --error-container: var(--red-9);
  --on-error: var(--red-10);
  --on-error-container: var(--red-1);
  --layer-background: color-mix(in srgb, var(--cyan-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-3);
  --layer-surface: color-mix(in srgb, var(--cyan-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--cyan-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--cyan-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --surface-variant: var(--gray-8);
  --on-surface-variant: var(--gray-4);
  --outline: var(--gray-5);
  --outline-variant: var(--gray-8);
  --surface-tint: var(--cyan-3);
  --inverse-surface: var(--gray-2);
  --inverse-on-surface: var(--gray-9);
  --inverse-primary: var(--cyan-6);
}

@media (prefers-contrast: more) {
[data-color='cyan'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--cyan-9) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --primary-container: var(--cyan-8);
  --on-primary-container: var(--gray-0);
  --secondary: color-mix(in srgb, var(--cyan-9) var(--secondary-color-percent), var(--gray-10) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--cyan-8) var(--secondary-color-percent), var(--gray-8) var(--secondary-gray-percent));
  --on-secondary-container: var(--gray-0);
  --tertiary: color-mix(in srgb, var(--blue-10) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --tertiary-container: var(--blue-8);
  --on-tertiary-container: var(--gray-0);
  --error: color-mix(in srgb, var(--red-10) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --error-container: var(--red-9);
  --on-error-container: var(--gray-0);
  --layer-background: color-mix(in srgb, var(--cyan-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-10);
  --layer-surface: color-mix(in srgb, var(--cyan-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--cyan-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--cyan-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-10);
  --outline: var(--gray-9);
  --outline-variant: var(--gray-9);
}
}

@media (prefers-contrast: more) {
[data-color='cyan'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--cyan-3) var(--primary-gray-percent));
  --primary-container: var(--cyan-2);
  --on-primary: var(--gray-12);
  --on-primary-container: var(--gray-12);
  --secondary: color-mix(in srgb, var(--gray-0) var(--secondary-color-percent), var(--cyan-3) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--gray-3) var(--secondary-color-percent), var(--cyan-2) var(--secondary-gray-percent));
  --on-secondary: var(--gray-12);
  --on-secondary-container: var(--gray-12);
  --tertiary: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--blue-3) var(--primary-gray-percent));
  --tertiary-container: var(--blue-3);
  --on-tertiary: var(--gray-12);
  --on-tertiary-container: var(--gray-12);
  --error: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--red-3) var(--primary-gray-percent));
  --error-container: var(--red-3);
  --on-error: var(--gray-12);
  --on-error-container: var(--gray-12);
  --layer-background: color-mix(in srgb, var(--cyan-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-0);
  --layer-surface: color-mix(in srgb, var(--cyan-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--cyan-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--cyan-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-0);
  --outline: var(--gray-3);
  --outline-variant: var(--gray-3);
}
}

@media (prefers-contrast: less) {
[data-color='cyan'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--cyan-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --primary-container: var(--cyan-4);
  --on-primary-container: var(--gray-0);
  --secondary: color-mix(in srgb, var(--cyan-7) var(--secondary-color-percent), var(--gray-7) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--cyan-4) var(--secondary-color-percent), var(--gray-5) var(--secondary-gray-percent));
  --on-secondary-container: var(--gray-0);
  --tertiary: color-mix(in srgb, var(--blue-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --tertiary-container: var(--blue-4);
  --on-tertiary-container: var(--gray-0);
  --error: color-mix(in srgb, var(--red-8) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --error-container: var(--red-5);
  --on-error-container: var(--gray-0);
  --layer-background: color-mix(in srgb, var(--cyan-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-8);
  --layer-surface: color-mix(in srgb, var(--cyan-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--cyan-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--cyan-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-8);
  --outline: var(--gray-7);
  --outline-variant: var(--gray-5);
}
}

@media (prefers-contrast: less) {
[data-color='cyan'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--cyan-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --primary-container: var(--cyan-4);
  --on-primary: var(--cyan-11);
  --on-primary-container: var(--gray-12);
  --secondary: color-mix(in srgb, var(--cyan-2) var(--secondary-color-percent), var(--gray-2) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--cyan-4) var(--secondary-color-percent), var(--gray-5) var(--secondary-gray-percent));
  --on-secondary: var(--gray-11);
  --on-secondary-container: var(--gray-12);
  --tertiary: color-mix(in srgb, var(--blue-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --tertiary-container: var(--blue-5);
  --on-tertiary: var(--blue-11);
  --on-tertiary-container: var(--gray-12);
  --error: color-mix(in srgb, var(--red-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --error-container: var(--red-4);
  --on-error: var(--red-11);
  --on-error-container: var(--gray-12);
  --layer-background: color-mix(in srgb, var(--cyan-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-4);
  --layer-surface: color-mix(in srgb, var(--cyan-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--cyan-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--cyan-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-3);
  --outline: var(--gray-4);
  --outline-variant: var(--gray-6);
}
}
:root {
  --primary-color-percent: 70%;
  --primary-gray-percent: 30%;
  --secondary-color-percent: 40%;
  --secondary-gray-percent: 60%;
  --surface-color-percent: 5%;
  --surface-gray-percent: 95%;
}

[data-color='gray'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--gray-6) var(--primary-color-percent), var(--gray-6) var(--primary-gray-percent));
  --primary-container: var(--gray-1);
  --on-primary: var(--gray-0);
  --on-primary-container: var(--gray-11);
  --secondary: color-mix(in srgb, var(--gray-6) var(--secondary-color-percent), var(--gray-6) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--gray-1) var(--secondary-color-percent), var(--gray-1) var(--secondary-gray-percent));
  --on-secondary: var(--gray-0);
  --on-secondary-container: var(--gray-11);
  --tertiary: color-mix(in srgb, var(--blue-6) var(--primary-color-percent), var(--gray-6) var(--primary-gray-percent));
  --tertiary-container: var(--blue-1);
  --on-tertiary: var(--gray-0);
  --on-tertiary-container: var(--blue-11);
  --error: color-mix(in srgb, var(--red-6) var(--primary-color-percent), var(--gray-6) var(--primary-gray-percent));
  --error-container: var(--red-1);
  --on-error: var(--gray-0);
  --on-error-container: var(--red-11);
  --layer-background: color-mix(in srgb, var(--gray-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-9);
  --layer-surface: color-mix(in srgb, var(--gray-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--gray-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--gray-3) var(--surface-color-percent), var(--gray-3) var(--surface-gray-percent));
  --surface-variant: var(--gray-2);
  --on-surface-variant: var(--gray-7);
  --outline: var(--gray-6);
  --outline-variant: var(--gray-4);
  --surface-tint: var(--gray-6);
  --shadow: var(--gray-12);
  --scrim: var(--gray-12);
  --inverse-surface: var(--gray-9);
  --inverse-on-surface: var(--gray-1);
  --inverse-primary: var(--gray-3);
}

[data-color='gray'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--gray-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --primary-container: var(--gray-8);
  --on-primary: var(--gray-9);
  --on-primary-container: var(--gray-1);
  --secondary: color-mix(in srgb, var(--gray-3) var(--secondary-color-percent), var(--gray-3) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--gray-8) var(--secondary-color-percent), var(--gray-8) var(--secondary-gray-percent));
  --on-secondary: var(--gray-9);
  --on-secondary-container: var(--gray-1);
  --tertiary: color-mix(in srgb, var(--blue-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --tertiary-container: var(--blue-8);
  --on-tertiary: var(--blue-9);
  --on-tertiary-container: var(--blue-1);
  --error: color-mix(in srgb, var(--red-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --error-container: var(--red-9);
  --on-error: var(--red-10);
  --on-error-container: var(--red-1);
  --layer-background: color-mix(in srgb, var(--gray-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-3);
  --layer-surface: color-mix(in srgb, var(--gray-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--gray-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--gray-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --surface-variant: var(--gray-8);
  --on-surface-variant: var(--gray-4);
  --outline: var(--gray-5);
  --outline-variant: var(--gray-8);
  --surface-tint: var(--gray-3);
  --inverse-surface: var(--gray-2);
  --inverse-on-surface: var(--gray-9);
  --inverse-primary: var(--gray-6);
}

@media (prefers-contrast: more) {
[data-color='gray'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--gray-9) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --primary-container: var(--gray-8);
  --on-primary-container: var(--gray-0);
  --secondary: color-mix(in srgb, var(--gray-9) var(--secondary-color-percent), var(--gray-10) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--gray-8) var(--secondary-color-percent), var(--gray-8) var(--secondary-gray-percent));
  --on-secondary-container: var(--gray-0);
  --tertiary: color-mix(in srgb, var(--blue-10) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --tertiary-container: var(--blue-8);
  --on-tertiary-container: var(--gray-0);
  --error: color-mix(in srgb, var(--red-10) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --error-container: var(--red-9);
  --on-error-container: var(--gray-0);
  --layer-background: color-mix(in srgb, var(--gray-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-10);
  --layer-surface: color-mix(in srgb, var(--gray-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--gray-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--gray-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-10);
  --outline: var(--gray-9);
  --outline-variant: var(--gray-9);
}
}

@media (prefers-contrast: more) {
[data-color='gray'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --primary-container: var(--gray-2);
  --on-primary: var(--gray-12);
  --on-primary-container: var(--gray-12);
  --secondary: color-mix(in srgb, var(--gray-0) var(--secondary-color-percent), var(--gray-3) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--gray-3) var(--secondary-color-percent), var(--gray-2) var(--secondary-gray-percent));
  --on-secondary: var(--gray-12);
  --on-secondary-container: var(--gray-12);
  --tertiary: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--blue-3) var(--primary-gray-percent));
  --tertiary-container: var(--blue-3);
  --on-tertiary: var(--gray-12);
  --on-tertiary-container: var(--gray-12);
  --error: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--red-3) var(--primary-gray-percent));
  --error-container: var(--red-3);
  --on-error: var(--gray-12);
  --on-error-container: var(--gray-12);
  --layer-background: color-mix(in srgb, var(--gray-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-0);
  --layer-surface: color-mix(in srgb, var(--gray-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--gray-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--gray-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-0);
  --outline: var(--gray-3);
  --outline-variant: var(--gray-3);
}
}

@media (prefers-contrast: less) {
[data-color='gray'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--gray-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --primary-container: var(--gray-4);
  --on-primary-container: var(--gray-0);
  --secondary: color-mix(in srgb, var(--gray-7) var(--secondary-color-percent), var(--gray-7) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--gray-4) var(--secondary-color-percent), var(--gray-5) var(--secondary-gray-percent));
  --on-secondary-container: var(--gray-0);
  --tertiary: color-mix(in srgb, var(--blue-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --tertiary-container: var(--blue-4);
  --on-tertiary-container: var(--gray-0);
  --error: color-mix(in srgb, var(--red-8) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --error-container: var(--red-5);
  --on-error-container: var(--gray-0);
  --layer-background: color-mix(in srgb, var(--gray-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-8);
  --layer-surface: color-mix(in srgb, var(--gray-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--gray-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--gray-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-8);
  --outline: var(--gray-7);
  --outline-variant: var(--gray-5);
}
}

@media (prefers-contrast: less) {
[data-color='gray'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--gray-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --primary-container: var(--gray-4);
  --on-primary: var(--gray-11);
  --on-primary-container: var(--gray-12);
  --secondary: color-mix(in srgb, var(--gray-2) var(--secondary-color-percent), var(--gray-2) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--gray-4) var(--secondary-color-percent), var(--gray-5) var(--secondary-gray-percent));
  --on-secondary: var(--gray-11);
  --on-secondary-container: var(--gray-12);
  --tertiary: color-mix(in srgb, var(--blue-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --tertiary-container: var(--blue-5);
  --on-tertiary: var(--blue-11);
  --on-tertiary-container: var(--gray-12);
  --error: color-mix(in srgb, var(--red-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --error-container: var(--red-4);
  --on-error: var(--red-11);
  --on-error-container: var(--gray-12);
  --layer-background: color-mix(in srgb, var(--gray-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-4);
  --layer-surface: color-mix(in srgb, var(--gray-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--gray-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--gray-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-3);
  --outline: var(--gray-4);
  --outline-variant: var(--gray-6);
}
}
:root {
  --primary-color-percent: 70%;
  --primary-gray-percent: 30%;
  --secondary-color-percent: 40%;
  --secondary-gray-percent: 60%;
  --surface-color-percent: 5%;
  --surface-gray-percent: 95%;
}

[data-color='green'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--green-8) var(--primary-color-percent), var(--gray-8) var(--primary-gray-percent));
  --primary-container: var(--green-1);
  --on-primary: var(--gray-0);
  --on-primary-container: var(--green-11);
  --secondary: color-mix(in srgb, var(--green-8) var(--secondary-color-percent), var(--gray-8) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--green-1) var(--secondary-color-percent), var(--gray-1) var(--secondary-gray-percent));
  --on-secondary: var(--gray-0);
  --on-secondary-container: var(--gray-11);
  --tertiary: color-mix(in srgb, var(--teal-8) var(--primary-color-percent), var(--gray-8) var(--primary-gray-percent));
  --tertiary-container: var(--teal-1);
  --on-tertiary: var(--gray-0);
  --on-tertiary-container: var(--teal-11);
  --error: color-mix(in srgb, var(--red-8) var(--primary-color-percent), var(--gray-8) var(--primary-gray-percent));
  --error-container: var(--red-1);
  --on-error: var(--gray-0);
  --on-error-container: var(--red-11);
  --layer-background: color-mix(in srgb, var(--green-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-9);
  --layer-surface: color-mix(in srgb, var(--green-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--green-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--green-3) var(--surface-color-percent), var(--gray-3) var(--surface-gray-percent));
  --surface-variant: var(--gray-2);
  --on-surface-variant: var(--gray-7);
  --outline: var(--gray-6);
  --outline-variant: var(--gray-4);
  --surface-tint: var(--green-6);
  --shadow: var(--gray-12);
  --scrim: var(--gray-12);
  --inverse-surface: var(--gray-9);
  --inverse-on-surface: var(--gray-1);
  --inverse-primary: var(--green-3);
}

[data-color='green'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--green-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --primary-container: var(--green-8);
  --on-primary: var(--green-9);
  --on-primary-container: var(--green-1);
  --secondary: color-mix(in srgb, var(--green-3) var(--secondary-color-percent), var(--gray-3) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--green-8) var(--secondary-color-percent), var(--gray-8) var(--secondary-gray-percent));
  --on-secondary: var(--gray-9);
  --on-secondary-container: var(--gray-1);
  --tertiary: color-mix(in srgb, var(--teal-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --tertiary-container: var(--teal-8);
  --on-tertiary: var(--teal-9);
  --on-tertiary-container: var(--teal-1);
  --error: color-mix(in srgb, var(--red-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --error-container: var(--red-9);
  --on-error: var(--red-10);
  --on-error-container: var(--red-1);
  --layer-background: color-mix(in srgb, var(--green-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-3);
  --layer-surface: color-mix(in srgb, var(--green-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--green-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--green-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --surface-variant: var(--gray-8);
  --on-surface-variant: var(--gray-4);
  --outline: var(--gray-5);
  --outline-variant: var(--gray-8);
  --surface-tint: var(--green-3);
  --inverse-surface: var(--gray-2);
  --inverse-on-surface: var(--gray-9);
  --inverse-primary: var(--green-6);
}

@media (prefers-contrast: more) {
[data-color='green'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--green-9) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --primary-container: var(--green-8);
  --on-primary-container: var(--gray-0);
  --secondary: color-mix(in srgb, var(--green-9) var(--secondary-color-percent), var(--gray-10) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--green-8) var(--secondary-color-percent), var(--gray-8) var(--secondary-gray-percent));
  --on-secondary-container: var(--gray-0);
  --tertiary: color-mix(in srgb, var(--teal-10) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --tertiary-container: var(--teal-8);
  --on-tertiary-container: var(--gray-0);
  --error: color-mix(in srgb, var(--red-10) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --error-container: var(--red-9);
  --on-error-container: var(--gray-0);
  --layer-background: color-mix(in srgb, var(--green-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-10);
  --layer-surface: color-mix(in srgb, var(--green-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--green-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--green-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-10);
  --outline: var(--gray-9);
  --outline-variant: var(--gray-9);
}
}

@media (prefers-contrast: more) {
[data-color='green'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--green-3) var(--primary-gray-percent));
  --primary-container: var(--green-2);
  --on-primary: var(--gray-12);
  --on-primary-container: var(--gray-12);
  --secondary: color-mix(in srgb, var(--gray-0) var(--secondary-color-percent), var(--green-3) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--gray-3) var(--secondary-color-percent), var(--green-2) var(--secondary-gray-percent));
  --on-secondary: var(--gray-12);
  --on-secondary-container: var(--gray-12);
  --tertiary: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--teal-3) var(--primary-gray-percent));
  --tertiary-container: var(--teal-3);
  --on-tertiary: var(--gray-12);
  --on-tertiary-container: var(--gray-12);
  --error: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--red-3) var(--primary-gray-percent));
  --error-container: var(--red-3);
  --on-error: var(--gray-12);
  --on-error-container: var(--gray-12);
  --layer-background: color-mix(in srgb, var(--green-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-0);
  --layer-surface: color-mix(in srgb, var(--green-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--green-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--green-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-0);
  --outline: var(--gray-3);
  --outline-variant: var(--gray-3);
}
}

@media (prefers-contrast: less) {
[data-color='green'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--green-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --primary-container: var(--green-4);
  --on-primary-container: var(--gray-0);
  --secondary: color-mix(in srgb, var(--green-7) var(--secondary-color-percent), var(--gray-7) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--green-4) var(--secondary-color-percent), var(--gray-5) var(--secondary-gray-percent));
  --on-secondary-container: var(--gray-0);
  --tertiary: color-mix(in srgb, var(--teal-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --tertiary-container: var(--teal-4);
  --on-tertiary-container: var(--gray-0);
  --error: color-mix(in srgb, var(--red-8) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --error-container: var(--red-5);
  --on-error-container: var(--gray-0);
  --layer-background: color-mix(in srgb, var(--green-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-8);
  --layer-surface: color-mix(in srgb, var(--green-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--green-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--green-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-8);
  --outline: var(--gray-7);
  --outline-variant: var(--gray-5);
}
}

@media (prefers-contrast: less) {
[data-color='green'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--green-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --primary-container: var(--green-4);
  --on-primary: var(--green-11);
  --on-primary-container: var(--gray-12);
  --secondary: color-mix(in srgb, var(--green-2) var(--secondary-color-percent), var(--gray-2) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--green-4) var(--secondary-color-percent), var(--gray-5) var(--secondary-gray-percent));
  --on-secondary: var(--gray-11);
  --on-secondary-container: var(--gray-12);
  --tertiary: color-mix(in srgb, var(--teal-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --tertiary-container: var(--teal-5);
  --on-tertiary: var(--teal-11);
  --on-tertiary-container: var(--gray-12);
  --error: color-mix(in srgb, var(--red-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --error-container: var(--red-4);
  --on-error: var(--red-11);
  --on-error-container: var(--gray-12);
  --layer-background: color-mix(in srgb, var(--green-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-4);
  --layer-surface: color-mix(in srgb, var(--green-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--green-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--green-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-3);
  --outline: var(--gray-4);
  --outline-variant: var(--gray-6);
}
}
:root {
  --primary-color-percent: 70%;
  --primary-gray-percent: 30%;
  --secondary-color-percent: 40%;
  --secondary-gray-percent: 60%;
  --surface-color-percent: 5%;
  --surface-gray-percent: 95%;
}

[data-color='indigo'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--indigo-9) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --primary-container: var(--indigo-1);
  --on-primary: var(--gray-0);
  --on-primary-container: var(--indigo-11);
  --secondary: color-mix(in srgb, var(--indigo-7) var(--secondary-color-percent), var(--gray-7) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--indigo-1) var(--secondary-color-percent), var(--gray-1) var(--secondary-gray-percent));
  --on-secondary: var(--gray-0);
  --on-secondary-container: var(--gray-11);
  --tertiary: color-mix(in srgb, var(--violet-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --tertiary-container: var(--violet-1);
  --on-tertiary: var(--gray-0);
  --on-tertiary-container: var(--violet-11);
  --error: color-mix(in srgb, var(--red-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --error-container: var(--red-1);
  --on-error: var(--gray-0);
  --on-error-container: var(--red-11);
  --layer-background: color-mix(in srgb, var(--indigo-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-9);
  --layer-surface: color-mix(in srgb, var(--indigo-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--indigo-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--indigo-3) var(--surface-color-percent), var(--gray-3) var(--surface-gray-percent));
  --surface-variant: var(--gray-2);
  --on-surface-variant: var(--gray-7);
  --outline: var(--gray-6);
  --outline-variant: var(--gray-4);
  --surface-tint: var(--indigo-6);
  --shadow: var(--gray-12);
  --scrim: var(--gray-12);
  --inverse-surface: var(--gray-9);
  --inverse-on-surface: var(--gray-1);
  --inverse-primary: var(--indigo-3);
}

[data-color='indigo'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--indigo-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --primary-container: var(--indigo-8);
  --on-primary: var(--indigo-9);
  --on-primary-container: var(--indigo-1);
  --secondary: color-mix(in srgb, var(--indigo-3) var(--secondary-color-percent), var(--gray-3) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--indigo-8) var(--secondary-color-percent), var(--gray-8) var(--secondary-gray-percent));
  --on-secondary: var(--gray-9);
  --on-secondary-container: var(--gray-1);
  --tertiary: color-mix(in srgb, var(--violet-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --tertiary-container: var(--violet-8);
  --on-tertiary: var(--violet-9);
  --on-tertiary-container: var(--violet-1);
  --error: color-mix(in srgb, var(--red-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --error-container: var(--red-9);
  --on-error: var(--red-10);
  --on-error-container: var(--red-1);
  --layer-background: color-mix(in srgb, var(--indigo-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-3);
  --layer-surface: color-mix(in srgb, var(--indigo-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--indigo-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--indigo-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --surface-variant: var(--gray-8);
  --on-surface-variant: var(--gray-4);
  --outline: var(--gray-5);
  --outline-variant: var(--gray-8);
  --surface-tint: var(--indigo-3);
  --inverse-surface: var(--gray-2);
  --inverse-on-surface: var(--gray-9);
  --inverse-primary: var(--indigo-6);
}

@media (prefers-contrast: more) {
[data-color='indigo'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--indigo-9) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --primary-container: var(--indigo-8);
  --on-primary-container: var(--gray-0);
  --secondary: color-mix(in srgb, var(--indigo-9) var(--secondary-color-percent), var(--gray-10) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--indigo-8) var(--secondary-color-percent), var(--gray-8) var(--secondary-gray-percent));
  --on-secondary-container: var(--gray-0);
  --tertiary: color-mix(in srgb, var(--violet-10) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --tertiary-container: var(--violet-8);
  --on-tertiary-container: var(--gray-0);
  --error: color-mix(in srgb, var(--red-10) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --error-container: var(--red-9);
  --on-error-container: var(--gray-0);
  --layer-background: color-mix(in srgb, var(--indigo-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-10);
  --layer-surface: color-mix(in srgb, var(--indigo-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--indigo-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--indigo-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-10);
  --outline: var(--gray-9);
  --outline-variant: var(--gray-9);
}
}

@media (prefers-contrast: more) {
[data-color='indigo'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--indigo-3) var(--primary-gray-percent));
  --primary-container: var(--indigo-2);
  --on-primary: var(--gray-12);
  --on-primary-container: var(--gray-12);
  --secondary: color-mix(in srgb, var(--gray-0) var(--secondary-color-percent), var(--indigo-3) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--gray-3) var(--secondary-color-percent), var(--indigo-2) var(--secondary-gray-percent));
  --on-secondary: var(--gray-12);
  --on-secondary-container: var(--gray-12);
  --tertiary: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--violet-3) var(--primary-gray-percent));
  --tertiary-container: var(--violet-3);
  --on-tertiary: var(--gray-12);
  --on-tertiary-container: var(--gray-12);
  --error: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--red-3) var(--primary-gray-percent));
  --error-container: var(--red-3);
  --on-error: var(--gray-12);
  --on-error-container: var(--gray-12);
  --layer-background: color-mix(in srgb, var(--indigo-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-0);
  --layer-surface: color-mix(in srgb, var(--indigo-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--indigo-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--indigo-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-0);
  --outline: var(--gray-3);
  --outline-variant: var(--gray-3);
}
}

@media (prefers-contrast: less) {
[data-color='indigo'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--indigo-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --primary-container: var(--indigo-4);
  --on-primary-container: var(--gray-0);
  --secondary: color-mix(in srgb, var(--indigo-7) var(--secondary-color-percent), var(--gray-7) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--indigo-4) var(--secondary-color-percent), var(--gray-5) var(--secondary-gray-percent));
  --on-secondary-container: var(--gray-0);
  --tertiary: color-mix(in srgb, var(--violet-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --tertiary-container: var(--violet-4);
  --on-tertiary-container: var(--gray-0);
  --error: color-mix(in srgb, var(--red-8) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --error-container: var(--red-5);
  --on-error-container: var(--gray-0);
  --layer-background: color-mix(in srgb, var(--indigo-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-8);
  --layer-surface: color-mix(in srgb, var(--indigo-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--indigo-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--indigo-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-8);
  --outline: var(--gray-7);
  --outline-variant: var(--gray-5);
}
}

@media (prefers-contrast: less) {
[data-color='indigo'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--indigo-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --primary-container: var(--indigo-4);
  --on-primary: var(--indigo-11);
  --on-primary-container: var(--gray-12);
  --secondary: color-mix(in srgb, var(--indigo-2) var(--secondary-color-percent), var(--gray-2) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--indigo-4) var(--secondary-color-percent), var(--gray-5) var(--secondary-gray-percent));
  --on-secondary: var(--gray-11);
  --on-secondary-container: var(--gray-12);
  --tertiary: color-mix(in srgb, var(--violet-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --tertiary-container: var(--violet-5);
  --on-tertiary: var(--violet-11);
  --on-tertiary-container: var(--gray-12);
  --error: color-mix(in srgb, var(--red-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --error-container: var(--red-4);
  --on-error: var(--red-11);
  --on-error-container: var(--gray-12);
  --layer-background: color-mix(in srgb, var(--indigo-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-4);
  --layer-surface: color-mix(in srgb, var(--indigo-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--indigo-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--indigo-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-3);
  --outline: var(--gray-4);
  --outline-variant: var(--gray-6);
}
}
:root {
  --primary-color-percent: 70%;
  --primary-gray-percent: 30%;
  --secondary-color-percent: 40%;
  --secondary-gray-percent: 60%;
  --surface-color-percent: 5%;
  --surface-gray-percent: 95%;
}

[data-color='jungle'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--jungle-8) var(--primary-color-percent), var(--gray-8) var(--primary-gray-percent));
  --primary-container: var(--jungle-1);
  --on-primary: var(--gray-0);
  --on-primary-container: var(--jungle-11);
  --secondary: color-mix(in srgb, var(--jungle-8) var(--secondary-color-percent), var(--gray-8) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--jungle-1) var(--secondary-color-percent), var(--gray-1) var(--secondary-gray-percent));
  --on-secondary: var(--gray-0);
  --on-secondary-container: var(--gray-11);
  --tertiary: color-mix(in srgb, var(--camo-8) var(--primary-color-percent), var(--gray-8) var(--primary-gray-percent));
  --tertiary-container: var(--camo-1);
  --on-tertiary: var(--gray-0);
  --on-tertiary-container: var(--camo-11);
  --error: color-mix(in srgb, var(--red-8) var(--primary-color-percent), var(--gray-8) var(--primary-gray-percent));
  --error-container: var(--red-1);
  --on-error: var(--gray-0);
  --on-error-container: var(--red-11);
  --layer-background: color-mix(in srgb, var(--jungle-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-9);
  --layer-surface: color-mix(in srgb, var(--jungle-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--jungle-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--jungle-3) var(--surface-color-percent), var(--gray-3) var(--surface-gray-percent));
  --surface-variant: var(--gray-2);
  --on-surface-variant: var(--gray-7);
  --outline: var(--gray-6);
  --outline-variant: var(--gray-4);
  --surface-tint: var(--jungle-6);
  --shadow: var(--gray-12);
  --scrim: var(--gray-12);
  --inverse-surface: var(--gray-9);
  --inverse-on-surface: var(--gray-1);
  --inverse-primary: var(--jungle-3);
}

[data-color='jungle'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--jungle-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --primary-container: var(--jungle-8);
  --on-primary: var(--jungle-9);
  --on-primary-container: var(--jungle-1);
  --secondary: color-mix(in srgb, var(--jungle-3) var(--secondary-color-percent), var(--gray-3) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--jungle-8) var(--secondary-color-percent), var(--gray-8) var(--secondary-gray-percent));
  --on-secondary: var(--gray-9);
  --on-secondary-container: var(--gray-1);
  --tertiary: color-mix(in srgb, var(--camo-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --tertiary-container: var(--camo-8);
  --on-tertiary: var(--camo-9);
  --on-tertiary-container: var(--camo-1);
  --error: color-mix(in srgb, var(--red-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --error-container: var(--red-9);
  --on-error: var(--red-10);
  --on-error-container: var(--red-1);
  --layer-background: color-mix(in srgb, var(--jungle-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-3);
  --layer-surface: color-mix(in srgb, var(--jungle-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--jungle-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--jungle-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --surface-variant: var(--gray-8);
  --on-surface-variant: var(--gray-4);
  --outline: var(--gray-5);
  --outline-variant: var(--gray-8);
  --surface-tint: var(--jungle-3);
  --inverse-surface: var(--gray-2);
  --inverse-on-surface: var(--gray-9);
  --inverse-primary: var(--jungle-6);
}

@media (prefers-contrast: more) {
[data-color='jungle'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--jungle-9) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --primary-container: var(--jungle-8);
  --on-primary-container: var(--gray-0);
  --secondary: color-mix(in srgb, var(--jungle-9) var(--secondary-color-percent), var(--gray-10) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--jungle-8) var(--secondary-color-percent), var(--gray-8) var(--secondary-gray-percent));
  --on-secondary-container: var(--gray-0);
  --tertiary: color-mix(in srgb, var(--camo-10) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --tertiary-container: var(--camo-8);
  --on-tertiary-container: var(--gray-0);
  --error: color-mix(in srgb, var(--red-10) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --error-container: var(--red-9);
  --on-error-container: var(--gray-0);
  --layer-background: color-mix(in srgb, var(--jungle-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-10);
  --layer-surface: color-mix(in srgb, var(--jungle-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--jungle-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--jungle-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-10);
  --outline: var(--gray-9);
  --outline-variant: var(--gray-9);
}
}

@media (prefers-contrast: more) {
[data-color='jungle'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--jungle-3) var(--primary-gray-percent));
  --primary-container: var(--jungle-2);
  --on-primary: var(--gray-12);
  --on-primary-container: var(--gray-12);
  --secondary: color-mix(in srgb, var(--gray-0) var(--secondary-color-percent), var(--jungle-3) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--gray-3) var(--secondary-color-percent), var(--jungle-2) var(--secondary-gray-percent));
  --on-secondary: var(--gray-12);
  --on-secondary-container: var(--gray-12);
  --tertiary: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--camo-3) var(--primary-gray-percent));
  --tertiary-container: var(--camo-3);
  --on-tertiary: var(--gray-12);
  --on-tertiary-container: var(--gray-12);
  --error: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--red-3) var(--primary-gray-percent));
  --error-container: var(--red-3);
  --on-error: var(--gray-12);
  --on-error-container: var(--gray-12);
  --layer-background: color-mix(in srgb, var(--jungle-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-0);
  --layer-surface: color-mix(in srgb, var(--jungle-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--jungle-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--jungle-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-0);
  --outline: var(--gray-3);
  --outline-variant: var(--gray-3);
}
}

@media (prefers-contrast: less) {
[data-color='jungle'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--jungle-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --primary-container: var(--jungle-4);
  --on-primary-container: var(--gray-0);
  --secondary: color-mix(in srgb, var(--jungle-7) var(--secondary-color-percent), var(--gray-7) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--jungle-4) var(--secondary-color-percent), var(--gray-5) var(--secondary-gray-percent));
  --on-secondary-container: var(--gray-0);
  --tertiary: color-mix(in srgb, var(--camo-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --tertiary-container: var(--camo-4);
  --on-tertiary-container: var(--gray-0);
  --error: color-mix(in srgb, var(--red-8) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --error-container: var(--red-5);
  --on-error-container: var(--gray-0);
  --layer-background: color-mix(in srgb, var(--jungle-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-8);
  --layer-surface: color-mix(in srgb, var(--jungle-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--jungle-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--jungle-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-8);
  --outline: var(--gray-7);
  --outline-variant: var(--gray-5);
}
}

@media (prefers-contrast: less) {
[data-color='jungle'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--jungle-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --primary-container: var(--jungle-4);
  --on-primary: var(--jungle-11);
  --on-primary-container: var(--gray-12);
  --secondary: color-mix(in srgb, var(--jungle-2) var(--secondary-color-percent), var(--gray-2) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--jungle-4) var(--secondary-color-percent), var(--gray-5) var(--secondary-gray-percent));
  --on-secondary: var(--gray-11);
  --on-secondary-container: var(--gray-12);
  --tertiary: color-mix(in srgb, var(--camo-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --tertiary-container: var(--camo-5);
  --on-tertiary: var(--camo-11);
  --on-tertiary-container: var(--gray-12);
  --error: color-mix(in srgb, var(--red-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --error-container: var(--red-4);
  --on-error: var(--red-11);
  --on-error-container: var(--gray-12);
  --layer-background: color-mix(in srgb, var(--jungle-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-4);
  --layer-surface: color-mix(in srgb, var(--jungle-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--jungle-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--jungle-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-3);
  --outline: var(--gray-4);
  --outline-variant: var(--gray-6);
}
}
:root {
  --primary-color-percent: 70%;
  --primary-gray-percent: 30%;
  --secondary-color-percent: 40%;
  --secondary-gray-percent: 60%;
  --surface-color-percent: 5%;
  --surface-gray-percent: 95%;
}

[data-color='lime'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--lime-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --primary-container: var(--lime-1);
  --on-primary: var(--gray-0);
  --on-primary-container: var(--lime-11);
  --secondary: color-mix(in srgb, var(--lime-7) var(--secondary-color-percent), var(--gray-7) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--lime-1) var(--secondary-color-percent), var(--gray-1) var(--secondary-gray-percent));
  --on-secondary: var(--gray-0);
  --on-secondary-container: var(--gray-11);
  --tertiary: color-mix(in srgb, var(--green-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --tertiary-container: var(--green-1);
  --on-tertiary: var(--gray-0);
  --on-tertiary-container: var(--green-11);
  --error: color-mix(in srgb, var(--red-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --error-container: var(--red-1);
  --on-error: var(--gray-0);
  --on-error-container: var(--red-11);
  --layer-background: color-mix(in srgb, var(--lime-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-9);
  --layer-surface: color-mix(in srgb, var(--lime-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--lime-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--lime-3) var(--surface-color-percent), var(--gray-3) var(--surface-gray-percent));
  --surface-variant: var(--gray-2);
  --on-surface-variant: var(--gray-7);
  --outline: var(--gray-6);
  --outline-variant: var(--gray-4);
  --surface-tint: var(--lime-6);
  --shadow: var(--gray-12);
  --scrim: var(--gray-12);
  --inverse-surface: var(--gray-9);
  --inverse-on-surface: var(--gray-1);
  --inverse-primary: var(--lime-3);
}

[data-color='lime'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--lime-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --primary-container: var(--lime-8);
  --on-primary: var(--lime-9);
  --on-primary-container: var(--lime-1);
  --secondary: color-mix(in srgb, var(--lime-3) var(--secondary-color-percent), var(--gray-3) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--lime-8) var(--secondary-color-percent), var(--gray-8) var(--secondary-gray-percent));
  --on-secondary: var(--gray-9);
  --on-secondary-container: var(--gray-1);
  --tertiary: color-mix(in srgb, var(--green-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --tertiary-container: var(--green-8);
  --on-tertiary: var(--green-9);
  --on-tertiary-container: var(--green-1);
  --error: color-mix(in srgb, var(--red-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --error-container: var(--red-9);
  --on-error: var(--red-10);
  --on-error-container: var(--red-1);
  --layer-background: color-mix(in srgb, var(--lime-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-3);
  --layer-surface: color-mix(in srgb, var(--lime-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--lime-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--lime-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --surface-variant: var(--gray-8);
  --on-surface-variant: var(--gray-4);
  --outline: var(--gray-5);
  --outline-variant: var(--gray-8);
  --surface-tint: var(--lime-3);
  --inverse-surface: var(--gray-2);
  --inverse-on-surface: var(--gray-9);
  --inverse-primary: var(--lime-6);
}

@media (prefers-contrast: more) {
[data-color='lime'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--lime-9) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --primary-container: var(--lime-8);
  --on-primary-container: var(--gray-0);
  --secondary: color-mix(in srgb, var(--lime-9) var(--secondary-color-percent), var(--gray-10) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--lime-8) var(--secondary-color-percent), var(--gray-8) var(--secondary-gray-percent));
  --on-secondary-container: var(--gray-0);
  --tertiary: color-mix(in srgb, var(--green-10) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --tertiary-container: var(--green-8);
  --on-tertiary-container: var(--gray-0);
  --error: color-mix(in srgb, var(--red-10) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --error-container: var(--red-9);
  --on-error-container: var(--gray-0);
  --layer-background: color-mix(in srgb, var(--lime-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-10);
  --layer-surface: color-mix(in srgb, var(--lime-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--lime-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--lime-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-10);
  --outline: var(--gray-9);
  --outline-variant: var(--gray-9);
}
}

@media (prefers-contrast: more) {
[data-color='lime'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--lime-3) var(--primary-gray-percent));
  --primary-container: var(--lime-2);
  --on-primary: var(--gray-12);
  --on-primary-container: var(--gray-12);
  --secondary: color-mix(in srgb, var(--gray-0) var(--secondary-color-percent), var(--lime-3) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--gray-3) var(--secondary-color-percent), var(--lime-2) var(--secondary-gray-percent));
  --on-secondary: var(--gray-12);
  --on-secondary-container: var(--gray-12);
  --tertiary: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--green-3) var(--primary-gray-percent));
  --tertiary-container: var(--green-3);
  --on-tertiary: var(--gray-12);
  --on-tertiary-container: var(--gray-12);
  --error: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--red-3) var(--primary-gray-percent));
  --error-container: var(--red-3);
  --on-error: var(--gray-12);
  --on-error-container: var(--gray-12);
  --layer-background: color-mix(in srgb, var(--lime-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-0);
  --layer-surface: color-mix(in srgb, var(--lime-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--lime-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--lime-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-0);
  --outline: var(--gray-3);
  --outline-variant: var(--gray-3);
}
}

@media (prefers-contrast: less) {
[data-color='lime'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--lime-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --primary-container: var(--lime-4);
  --on-primary-container: var(--gray-0);
  --secondary: color-mix(in srgb, var(--lime-7) var(--secondary-color-percent), var(--gray-7) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--lime-4) var(--secondary-color-percent), var(--gray-5) var(--secondary-gray-percent));
  --on-secondary-container: var(--gray-0);
  --tertiary: color-mix(in srgb, var(--green-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --tertiary-container: var(--green-4);
  --on-tertiary-container: var(--gray-0);
  --error: color-mix(in srgb, var(--red-8) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --error-container: var(--red-5);
  --on-error-container: var(--gray-0);
  --layer-background: color-mix(in srgb, var(--lime-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-8);
  --layer-surface: color-mix(in srgb, var(--lime-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--lime-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--lime-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-8);
  --outline: var(--gray-7);
  --outline-variant: var(--gray-5);
}
}

@media (prefers-contrast: less) {
[data-color='lime'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--lime-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --primary-container: var(--lime-4);
  --on-primary: var(--lime-11);
  --on-primary-container: var(--gray-12);
  --secondary: color-mix(in srgb, var(--lime-2) var(--secondary-color-percent), var(--gray-2) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--lime-4) var(--secondary-color-percent), var(--gray-5) var(--secondary-gray-percent));
  --on-secondary: var(--gray-11);
  --on-secondary-container: var(--gray-12);
  --tertiary: color-mix(in srgb, var(--green-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --tertiary-container: var(--green-5);
  --on-tertiary: var(--green-11);
  --on-tertiary-container: var(--gray-12);
  --error: color-mix(in srgb, var(--red-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --error-container: var(--red-4);
  --on-error: var(--red-11);
  --on-error-container: var(--gray-12);
  --layer-background: color-mix(in srgb, var(--lime-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-4);
  --layer-surface: color-mix(in srgb, var(--lime-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--lime-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--lime-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-3);
  --outline: var(--gray-4);
  --outline-variant: var(--gray-6);
}
}
:root {
  --primary-color-percent: 70%;
  --primary-gray-percent: 30%;
  --secondary-color-percent: 40%;
  --secondary-gray-percent: 60%;
  --surface-color-percent: 5%;
  --surface-gray-percent: 95%;
}

[data-color='orange'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--orange-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --primary-container: var(--orange-1);
  --on-primary: var(--gray-0);
  --on-primary-container: var(--orange-11);
  --secondary: color-mix(in srgb, var(--orange-7) var(--secondary-color-percent), var(--gray-7) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--orange-1) var(--secondary-color-percent), var(--gray-1) var(--secondary-gray-percent));
  --on-secondary: var(--gray-0);
  --on-secondary-container: var(--gray-11);
  --tertiary: color-mix(in srgb, var(--yellow-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --tertiary-container: var(--yellow-1);
  --on-tertiary: var(--gray-0);
  --on-tertiary-container: var(--yellow-11);
  --error: color-mix(in srgb, var(--red-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --error-container: var(--red-1);
  --on-error: var(--gray-0);
  --on-error-container: var(--red-11);
  --layer-background: color-mix(in srgb, var(--orange-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-9);
  --layer-surface: color-mix(in srgb, var(--orange-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--orange-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--orange-3) var(--surface-color-percent), var(--gray-3) var(--surface-gray-percent));
  --surface-variant: var(--gray-2);
  --on-surface-variant: var(--gray-7);
  --outline: var(--gray-6);
  --outline-variant: var(--gray-4);
  --surface-tint: var(--orange-6);
  --shadow: var(--gray-12);
  --scrim: var(--gray-12);
  --inverse-surface: var(--gray-9);
  --inverse-on-surface: var(--gray-1);
  --inverse-primary: var(--orange-3);
}

[data-color='orange'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--orange-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --primary-container: var(--orange-8);
  --on-primary: var(--orange-9);
  --on-primary-container: var(--orange-1);
  --secondary: color-mix(in srgb, var(--orange-3) var(--secondary-color-percent), var(--gray-3) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--orange-8) var(--secondary-color-percent), var(--gray-8) var(--secondary-gray-percent));
  --on-secondary: var(--gray-9);
  --on-secondary-container: var(--gray-1);
  --tertiary: color-mix(in srgb, var(--yellow-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --tertiary-container: var(--yellow-8);
  --on-tertiary: var(--yellow-9);
  --on-tertiary-container: var(--yellow-1);
  --error: color-mix(in srgb, var(--red-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --error-container: var(--red-9);
  --on-error: var(--red-10);
  --on-error-container: var(--red-1);
  --layer-background: color-mix(in srgb, var(--orange-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-3);
  --layer-surface: color-mix(in srgb, var(--orange-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--orange-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--orange-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --surface-variant: var(--gray-8);
  --on-surface-variant: var(--gray-4);
  --outline: var(--gray-5);
  --outline-variant: var(--gray-8);
  --surface-tint: var(--orange-3);
  --inverse-surface: var(--gray-2);
  --inverse-on-surface: var(--gray-9);
  --inverse-primary: var(--orange-6);
}

@media (prefers-contrast: more) {
[data-color='orange'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--orange-9) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --primary-container: var(--orange-8);
  --on-primary-container: var(--gray-0);
  --secondary: color-mix(in srgb, var(--orange-9) var(--secondary-color-percent), var(--gray-10) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--orange-8) var(--secondary-color-percent), var(--gray-8) var(--secondary-gray-percent));
  --on-secondary-container: var(--gray-0);
  --tertiary: color-mix(in srgb, var(--yellow-10) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --tertiary-container: var(--yellow-8);
  --on-tertiary-container: var(--gray-0);
  --error: color-mix(in srgb, var(--red-10) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --error-container: var(--red-9);
  --on-error-container: var(--gray-0);
  --layer-background: color-mix(in srgb, var(--orange-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-10);
  --layer-surface: color-mix(in srgb, var(--orange-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--orange-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--orange-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-10);
  --outline: var(--gray-9);
  --outline-variant: var(--gray-9);
}
}

@media (prefers-contrast: more) {
[data-color='orange'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--orange-3) var(--primary-gray-percent));
  --primary-container: var(--orange-2);
  --on-primary: var(--gray-12);
  --on-primary-container: var(--gray-12);
  --secondary: color-mix(in srgb, var(--gray-0) var(--secondary-color-percent), var(--orange-3) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--gray-3) var(--secondary-color-percent), var(--orange-2) var(--secondary-gray-percent));
  --on-secondary: var(--gray-12);
  --on-secondary-container: var(--gray-12);
  --tertiary: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--yellow-3) var(--primary-gray-percent));
  --tertiary-container: var(--yellow-3);
  --on-tertiary: var(--gray-12);
  --on-tertiary-container: var(--gray-12);
  --error: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--red-3) var(--primary-gray-percent));
  --error-container: var(--red-3);
  --on-error: var(--gray-12);
  --on-error-container: var(--gray-12);
  --layer-background: color-mix(in srgb, var(--orange-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-0);
  --layer-surface: color-mix(in srgb, var(--orange-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--orange-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--orange-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-0);
  --outline: var(--gray-3);
  --outline-variant: var(--gray-3);
}
}

@media (prefers-contrast: less) {
[data-color='orange'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--orange-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --primary-container: var(--orange-4);
  --on-primary-container: var(--gray-0);
  --secondary: color-mix(in srgb, var(--orange-7) var(--secondary-color-percent), var(--gray-7) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--orange-4) var(--secondary-color-percent), var(--gray-5) var(--secondary-gray-percent));
  --on-secondary-container: var(--gray-0);
  --tertiary: color-mix(in srgb, var(--yellow-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --tertiary-container: var(--yellow-4);
  --on-tertiary-container: var(--gray-0);
  --error: color-mix(in srgb, var(--red-8) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --error-container: var(--red-5);
  --on-error-container: var(--gray-0);
  --layer-background: color-mix(in srgb, var(--orange-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-8);
  --layer-surface: color-mix(in srgb, var(--orange-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--orange-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--orange-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-8);
  --outline: var(--gray-7);
  --outline-variant: var(--gray-5);
}
}

@media (prefers-contrast: less) {
[data-color='orange'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--orange-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --primary-container: var(--orange-4);
  --on-primary: var(--orange-11);
  --on-primary-container: var(--gray-12);
  --secondary: color-mix(in srgb, var(--orange-2) var(--secondary-color-percent), var(--gray-2) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--orange-4) var(--secondary-color-percent), var(--gray-5) var(--secondary-gray-percent));
  --on-secondary: var(--gray-11);
  --on-secondary-container: var(--gray-12);
  --tertiary: color-mix(in srgb, var(--yellow-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --tertiary-container: var(--yellow-5);
  --on-tertiary: var(--yellow-11);
  --on-tertiary-container: var(--gray-12);
  --error: color-mix(in srgb, var(--red-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --error-container: var(--red-4);
  --on-error: var(--red-11);
  --on-error-container: var(--gray-12);
  --layer-background: color-mix(in srgb, var(--orange-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-4);
  --layer-surface: color-mix(in srgb, var(--orange-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--orange-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--orange-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-3);
  --outline: var(--gray-4);
  --outline-variant: var(--gray-6);
}
}
:root {
  --primary-color-percent: 70%;
  --primary-gray-percent: 30%;
  --secondary-color-percent: 40%;
  --secondary-gray-percent: 60%;
  --surface-color-percent: 5%;
  --surface-gray-percent: 95%;
}

[data-color='pink'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--pink-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --primary-container: var(--pink-1);
  --on-primary: var(--gray-0);
  --on-primary-container: var(--pink-11);
  --secondary: color-mix(in srgb, var(--pink-7) var(--secondary-color-percent), var(--gray-7) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--pink-1) var(--secondary-color-percent), var(--gray-1) var(--secondary-gray-percent));
  --on-secondary: var(--gray-0);
  --on-secondary-container: var(--gray-11);
  --tertiary: color-mix(in srgb, var(--purple-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --tertiary-container: var(--purple-1);
  --on-tertiary: var(--gray-0);
  --on-tertiary-container: var(--purple-11);
  --error: color-mix(in srgb, var(--red-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --error-container: var(--red-1);
  --on-error: var(--gray-0);
  --on-error-container: var(--red-11);
  --layer-background: color-mix(in srgb, var(--pink-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-9);
  --layer-surface: color-mix(in srgb, var(--pink-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--pink-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--pink-3) var(--surface-color-percent), var(--gray-3) var(--surface-gray-percent));
  --surface-variant: var(--gray-2);
  --on-surface-variant: var(--gray-7);
  --outline: var(--gray-6);
  --outline-variant: var(--gray-4);
  --surface-tint: var(--pink-6);
  --shadow: var(--gray-12);
  --scrim: var(--gray-12);
  --inverse-surface: var(--gray-9);
  --inverse-on-surface: var(--gray-1);
  --inverse-primary: var(--pink-3);
}

[data-color='pink'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--pink-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --primary-container: var(--pink-8);
  --on-primary: var(--pink-9);
  --on-primary-container: var(--pink-1);
  --secondary: color-mix(in srgb, var(--pink-3) var(--secondary-color-percent), var(--gray-3) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--pink-8) var(--secondary-color-percent), var(--gray-8) var(--secondary-gray-percent));
  --on-secondary: var(--gray-9);
  --on-secondary-container: var(--gray-1);
  --tertiary: color-mix(in srgb, var(--purple-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --tertiary-container: var(--purple-8);
  --on-tertiary: var(--purple-9);
  --on-tertiary-container: var(--purple-1);
  --error: color-mix(in srgb, var(--red-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --error-container: var(--red-9);
  --on-error: var(--red-10);
  --on-error-container: var(--red-1);
  --layer-background: color-mix(in srgb, var(--pink-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-3);
  --layer-surface: color-mix(in srgb, var(--pink-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--pink-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--pink-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --surface-variant: var(--gray-8);
  --on-surface-variant: var(--gray-4);
  --outline: var(--gray-5);
  --outline-variant: var(--gray-8);
  --surface-tint: var(--pink-3);
  --inverse-surface: var(--gray-2);
  --inverse-on-surface: var(--gray-9);
  --inverse-primary: var(--pink-6);
}

@media (prefers-contrast: more) {
[data-color='pink'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--pink-9) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --primary-container: var(--pink-8);
  --on-primary-container: var(--gray-0);
  --secondary: color-mix(in srgb, var(--pink-9) var(--secondary-color-percent), var(--gray-10) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--pink-8) var(--secondary-color-percent), var(--gray-8) var(--secondary-gray-percent));
  --on-secondary-container: var(--gray-0);
  --tertiary: color-mix(in srgb, var(--purple-10) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --tertiary-container: var(--purple-8);
  --on-tertiary-container: var(--gray-0);
  --error: color-mix(in srgb, var(--red-10) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --error-container: var(--red-9);
  --on-error-container: var(--gray-0);
  --layer-background: color-mix(in srgb, var(--pink-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-10);
  --layer-surface: color-mix(in srgb, var(--pink-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--pink-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--pink-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-10);
  --outline: var(--gray-9);
  --outline-variant: var(--gray-9);
}
}

@media (prefers-contrast: more) {
[data-color='pink'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--pink-3) var(--primary-gray-percent));
  --primary-container: var(--pink-2);
  --on-primary: var(--gray-12);
  --on-primary-container: var(--gray-12);
  --secondary: color-mix(in srgb, var(--gray-0) var(--secondary-color-percent), var(--pink-3) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--gray-3) var(--secondary-color-percent), var(--pink-2) var(--secondary-gray-percent));
  --on-secondary: var(--gray-12);
  --on-secondary-container: var(--gray-12);
  --tertiary: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--purple-3) var(--primary-gray-percent));
  --tertiary-container: var(--purple-3);
  --on-tertiary: var(--gray-12);
  --on-tertiary-container: var(--gray-12);
  --error: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--red-3) var(--primary-gray-percent));
  --error-container: var(--red-3);
  --on-error: var(--gray-12);
  --on-error-container: var(--gray-12);
  --layer-background: color-mix(in srgb, var(--pink-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-0);
  --layer-surface: color-mix(in srgb, var(--pink-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--pink-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--pink-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-0);
  --outline: var(--gray-3);
  --outline-variant: var(--gray-3);
}
}

@media (prefers-contrast: less) {
[data-color='pink'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--pink-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --primary-container: var(--pink-4);
  --on-primary-container: var(--gray-0);
  --secondary: color-mix(in srgb, var(--pink-7) var(--secondary-color-percent), var(--gray-7) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--pink-4) var(--secondary-color-percent), var(--gray-5) var(--secondary-gray-percent));
  --on-secondary-container: var(--gray-0);
  --tertiary: color-mix(in srgb, var(--purple-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --tertiary-container: var(--purple-4);
  --on-tertiary-container: var(--gray-0);
  --error: color-mix(in srgb, var(--red-8) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --error-container: var(--red-5);
  --on-error-container: var(--gray-0);
  --layer-background: color-mix(in srgb, var(--pink-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-8);
  --layer-surface: color-mix(in srgb, var(--pink-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--pink-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--pink-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-8);
  --outline: var(--gray-7);
  --outline-variant: var(--gray-5);
}
}

@media (prefers-contrast: less) {
[data-color='pink'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--pink-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --primary-container: var(--pink-4);
  --on-primary: var(--pink-11);
  --on-primary-container: var(--gray-12);
  --secondary: color-mix(in srgb, var(--pink-2) var(--secondary-color-percent), var(--gray-2) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--pink-4) var(--secondary-color-percent), var(--gray-5) var(--secondary-gray-percent));
  --on-secondary: var(--gray-11);
  --on-secondary-container: var(--gray-12);
  --tertiary: color-mix(in srgb, var(--purple-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --tertiary-container: var(--purple-5);
  --on-tertiary: var(--purple-11);
  --on-tertiary-container: var(--gray-12);
  --error: color-mix(in srgb, var(--red-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --error-container: var(--red-4);
  --on-error: var(--red-11);
  --on-error-container: var(--gray-12);
  --layer-background: color-mix(in srgb, var(--pink-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-4);
  --layer-surface: color-mix(in srgb, var(--pink-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--pink-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--pink-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-3);
  --outline: var(--gray-4);
  --outline-variant: var(--gray-6);
}
}
:root {
  --primary-color-percent: 70%;
  --primary-gray-percent: 30%;
  --secondary-color-percent: 40%;
  --secondary-gray-percent: 60%;
  --surface-color-percent: 5%;
  --surface-gray-percent: 95%;
}

[data-color='purple'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--purple-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --primary-container: var(--purple-1);
  --on-primary: var(--gray-0);
  --on-primary-container: var(--purple-11);
  --secondary: color-mix(in srgb, var(--purple-7) var(--secondary-color-percent), var(--gray-7) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--purple-1) var(--secondary-color-percent), var(--gray-1) var(--secondary-gray-percent));
  --on-secondary: var(--gray-0);
  --on-secondary-container: var(--gray-11);
  --tertiary: color-mix(in srgb, var(--pink-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --tertiary-container: var(--pink-1);
  --on-tertiary: var(--gray-0);
  --on-tertiary-container: var(--pink-11);
  --error: color-mix(in srgb, var(--red-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --error-container: var(--red-1);
  --on-error: var(--gray-0);
  --on-error-container: var(--red-11);
  --layer-background: color-mix(in srgb, var(--purple-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-9);
  --layer-surface: color-mix(in srgb, var(--purple-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--purple-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--purple-3) var(--surface-color-percent), var(--gray-3) var(--surface-gray-percent));
  --surface-variant: var(--gray-2);
  --on-surface-variant: var(--gray-7);
  --outline: var(--gray-6);
  --outline-variant: var(--gray-4);
  --surface-tint: var(--purple-6);
  --shadow: var(--gray-12);
  --scrim: var(--gray-12);
  --inverse-surface: var(--gray-9);
  --inverse-on-surface: var(--gray-1);
  --inverse-primary: var(--purple-3);
}

[data-color='purple'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--purple-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --primary-container: var(--purple-8);
  --on-primary: var(--purple-9);
  --on-primary-container: var(--purple-1);
  --secondary: color-mix(in srgb, var(--purple-3) var(--secondary-color-percent), var(--gray-3) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--purple-8) var(--secondary-color-percent), var(--gray-8) var(--secondary-gray-percent));
  --on-secondary: var(--gray-9);
  --on-secondary-container: var(--gray-1);
  --tertiary: color-mix(in srgb, var(--pink-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --tertiary-container: var(--pink-8);
  --on-tertiary: var(--pink-9);
  --on-tertiary-container: var(--pink-1);
  --error: color-mix(in srgb, var(--red-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --error-container: var(--red-9);
  --on-error: var(--red-10);
  --on-error-container: var(--red-1);
  --layer-background: color-mix(in srgb, var(--purple-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-3);
  --layer-surface: color-mix(in srgb, var(--purple-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--purple-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--purple-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --surface-variant: var(--gray-8);
  --on-surface-variant: var(--gray-4);
  --outline: var(--gray-5);
  --outline-variant: var(--gray-8);
  --surface-tint: var(--purple-3);
  --inverse-surface: var(--gray-2);
  --inverse-on-surface: var(--gray-9);
  --inverse-primary: var(--purple-6);
}

@media (prefers-contrast: more) {
[data-color='purple'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--purple-9) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --primary-container: var(--purple-8);
  --on-primary-container: var(--gray-0);
  --secondary: color-mix(in srgb, var(--purple-9) var(--secondary-color-percent), var(--gray-10) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--purple-8) var(--secondary-color-percent), var(--gray-8) var(--secondary-gray-percent));
  --on-secondary-container: var(--gray-0);
  --tertiary: color-mix(in srgb, var(--pink-10) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --tertiary-container: var(--pink-8);
  --on-tertiary-container: var(--gray-0);
  --error: color-mix(in srgb, var(--red-10) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --error-container: var(--red-9);
  --on-error-container: var(--gray-0);
  --layer-background: color-mix(in srgb, var(--purple-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-10);
  --layer-surface: color-mix(in srgb, var(--purple-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--purple-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--purple-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-10);
  --outline: var(--gray-9);
  --outline-variant: var(--gray-9);
}
}

@media (prefers-contrast: more) {
[data-color='purple'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--purple-3) var(--primary-gray-percent));
  --primary-container: var(--purple-2);
  --on-primary: var(--gray-12);
  --on-primary-container: var(--gray-12);
  --secondary: color-mix(in srgb, var(--gray-0) var(--secondary-color-percent), var(--purple-3) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--gray-3) var(--secondary-color-percent), var(--purple-2) var(--secondary-gray-percent));
  --on-secondary: var(--gray-12);
  --on-secondary-container: var(--gray-12);
  --tertiary: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--pink-3) var(--primary-gray-percent));
  --tertiary-container: var(--pink-3);
  --on-tertiary: var(--gray-12);
  --on-tertiary-container: var(--gray-12);
  --error: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--red-3) var(--primary-gray-percent));
  --error-container: var(--red-3);
  --on-error: var(--gray-12);
  --on-error-container: var(--gray-12);
  --layer-background: color-mix(in srgb, var(--purple-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-0);
  --layer-surface: color-mix(in srgb, var(--purple-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--purple-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--purple-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-0);
  --outline: var(--gray-3);
  --outline-variant: var(--gray-3);
}
}

@media (prefers-contrast: less) {
[data-color='purple'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--purple-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --primary-container: var(--purple-4);
  --on-primary-container: var(--gray-0);
  --secondary: color-mix(in srgb, var(--purple-7) var(--secondary-color-percent), var(--gray-7) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--purple-4) var(--secondary-color-percent), var(--gray-5) var(--secondary-gray-percent));
  --on-secondary-container: var(--gray-0);
  --tertiary: color-mix(in srgb, var(--pink-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --tertiary-container: var(--pink-4);
  --on-tertiary-container: var(--gray-0);
  --error: color-mix(in srgb, var(--red-8) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --error-container: var(--red-5);
  --on-error-container: var(--gray-0);
  --layer-background: color-mix(in srgb, var(--purple-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-8);
  --layer-surface: color-mix(in srgb, var(--purple-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--purple-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--purple-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-8);
  --outline: var(--gray-7);
  --outline-variant: var(--gray-5);
}
}

@media (prefers-contrast: less) {
[data-color='purple'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--purple-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --primary-container: var(--purple-4);
  --on-primary: var(--purple-11);
  --on-primary-container: var(--gray-12);
  --secondary: color-mix(in srgb, var(--purple-2) var(--secondary-color-percent), var(--gray-2) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--purple-4) var(--secondary-color-percent), var(--gray-5) var(--secondary-gray-percent));
  --on-secondary: var(--gray-11);
  --on-secondary-container: var(--gray-12);
  --tertiary: color-mix(in srgb, var(--pink-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --tertiary-container: var(--pink-5);
  --on-tertiary: var(--pink-11);
  --on-tertiary-container: var(--gray-12);
  --error: color-mix(in srgb, var(--red-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --error-container: var(--red-4);
  --on-error: var(--red-11);
  --on-error-container: var(--gray-12);
  --layer-background: color-mix(in srgb, var(--purple-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-4);
  --layer-surface: color-mix(in srgb, var(--purple-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--purple-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--purple-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-3);
  --outline: var(--gray-4);
  --outline-variant: var(--gray-6);
}
}
:root {
  --primary-color-percent: 70%;
  --primary-gray-percent: 30%;
  --secondary-color-percent: 40%;
  --secondary-gray-percent: 60%;
  --surface-color-percent: 5%;
  --surface-gray-percent: 95%;
}

[data-color='teal'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--teal-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --primary-container: var(--teal-1);
  --on-primary: var(--gray-0);
  --on-primary-container: var(--teal-11);
  --secondary: color-mix(in srgb, var(--teal-7) var(--secondary-color-percent), var(--gray-7) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--teal-1) var(--secondary-color-percent), var(--gray-1) var(--secondary-gray-percent));
  --on-secondary: var(--gray-0);
  --on-secondary-container: var(--gray-11);
  --tertiary: color-mix(in srgb, var(--cyan-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --tertiary-container: var(--cyan-1);
  --on-tertiary: var(--gray-0);
  --on-tertiary-container: var(--cyan-11);
  --error: color-mix(in srgb, var(--red-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --error-container: var(--red-1);
  --on-error: var(--gray-0);
  --on-error-container: var(--red-11);
  --layer-background: color-mix(in srgb, var(--teal-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-9);
  --layer-surface: color-mix(in srgb, var(--teal-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--teal-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--teal-3) var(--surface-color-percent), var(--gray-3) var(--surface-gray-percent));
  --surface-variant: var(--gray-2);
  --on-surface-variant: var(--gray-7);
  --outline: var(--gray-6);
  --outline-variant: var(--gray-4);
  --surface-tint: var(--teal-6);
  --shadow: var(--gray-12);
  --scrim: var(--gray-12);
  --inverse-surface: var(--gray-9);
  --inverse-on-surface: var(--gray-1);
  --inverse-primary: var(--teal-3);
}

[data-color='teal'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--teal-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --primary-container: var(--teal-8);
  --on-primary: var(--teal-9);
  --on-primary-container: var(--teal-1);
  --secondary: color-mix(in srgb, var(--teal-3) var(--secondary-color-percent), var(--gray-3) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--teal-8) var(--secondary-color-percent), var(--gray-8) var(--secondary-gray-percent));
  --on-secondary: var(--gray-9);
  --on-secondary-container: var(--gray-1);
  --tertiary: color-mix(in srgb, var(--cyan-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --tertiary-container: var(--cyan-8);
  --on-tertiary: var(--cyan-9);
  --on-tertiary-container: var(--cyan-1);
  --error: color-mix(in srgb, var(--red-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --error-container: var(--red-9);
  --on-error: var(--red-10);
  --on-error-container: var(--red-1);
  --layer-background: color-mix(in srgb, var(--teal-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-3);
  --layer-surface: color-mix(in srgb, var(--teal-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--teal-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--teal-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --surface-variant: var(--gray-8);
  --on-surface-variant: var(--gray-4);
  --outline: var(--gray-5);
  --outline-variant: var(--gray-8);
  --surface-tint: var(--teal-3);
  --inverse-surface: var(--gray-2);
  --inverse-on-surface: var(--gray-9);
  --inverse-primary: var(--teal-6);
}

@media (prefers-contrast: more) {
[data-color='teal'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--teal-9) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --primary-container: var(--teal-8);
  --on-primary-container: var(--gray-0);
  --secondary: color-mix(in srgb, var(--teal-9) var(--secondary-color-percent), var(--gray-10) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--teal-8) var(--secondary-color-percent), var(--gray-8) var(--secondary-gray-percent));
  --on-secondary-container: var(--gray-0);
  --tertiary: color-mix(in srgb, var(--cyan-10) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --tertiary-container: var(--cyan-8);
  --on-tertiary-container: var(--gray-0);
  --error: color-mix(in srgb, var(--red-10) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --error-container: var(--red-9);
  --on-error-container: var(--gray-0);
  --layer-background: color-mix(in srgb, var(--teal-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-10);
  --layer-surface: color-mix(in srgb, var(--teal-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--teal-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--teal-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-10);
  --outline: var(--gray-9);
  --outline-variant: var(--gray-9);
}
}

@media (prefers-contrast: more) {
[data-color='teal'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--teal-3) var(--primary-gray-percent));
  --primary-container: var(--teal-2);
  --on-primary: var(--gray-12);
  --on-primary-container: var(--gray-12);
  --secondary: color-mix(in srgb, var(--gray-0) var(--secondary-color-percent), var(--teal-3) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--gray-3) var(--secondary-color-percent), var(--teal-2) var(--secondary-gray-percent));
  --on-secondary: var(--gray-12);
  --on-secondary-container: var(--gray-12);
  --tertiary: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--cyan-3) var(--primary-gray-percent));
  --tertiary-container: var(--cyan-3);
  --on-tertiary: var(--gray-12);
  --on-tertiary-container: var(--gray-12);
  --error: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--red-3) var(--primary-gray-percent));
  --error-container: var(--red-3);
  --on-error: var(--gray-12);
  --on-error-container: var(--gray-12);
  --layer-background: color-mix(in srgb, var(--teal-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-0);
  --layer-surface: color-mix(in srgb, var(--teal-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--teal-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--teal-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-0);
  --outline: var(--gray-3);
  --outline-variant: var(--gray-3);
}
}

@media (prefers-contrast: less) {
[data-color='teal'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--teal-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --primary-container: var(--teal-4);
  --on-primary-container: var(--gray-0);
  --secondary: color-mix(in srgb, var(--teal-7) var(--secondary-color-percent), var(--gray-7) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--teal-4) var(--secondary-color-percent), var(--gray-5) var(--secondary-gray-percent));
  --on-secondary-container: var(--gray-0);
  --tertiary: color-mix(in srgb, var(--cyan-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --tertiary-container: var(--cyan-4);
  --on-tertiary-container: var(--gray-0);
  --error: color-mix(in srgb, var(--red-8) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --error-container: var(--red-5);
  --on-error-container: var(--gray-0);
  --layer-background: color-mix(in srgb, var(--teal-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-8);
  --layer-surface: color-mix(in srgb, var(--teal-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--teal-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--teal-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-8);
  --outline: var(--gray-7);
  --outline-variant: var(--gray-5);
}
}

@media (prefers-contrast: less) {
[data-color='teal'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--teal-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --primary-container: var(--teal-4);
  --on-primary: var(--teal-11);
  --on-primary-container: var(--gray-12);
  --secondary: color-mix(in srgb, var(--teal-2) var(--secondary-color-percent), var(--gray-2) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--teal-4) var(--secondary-color-percent), var(--gray-5) var(--secondary-gray-percent));
  --on-secondary: var(--gray-11);
  --on-secondary-container: var(--gray-12);
  --tertiary: color-mix(in srgb, var(--cyan-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --tertiary-container: var(--cyan-5);
  --on-tertiary: var(--cyan-11);
  --on-tertiary-container: var(--gray-12);
  --error: color-mix(in srgb, var(--red-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --error-container: var(--red-4);
  --on-error: var(--red-11);
  --on-error-container: var(--gray-12);
  --layer-background: color-mix(in srgb, var(--teal-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-4);
  --layer-surface: color-mix(in srgb, var(--teal-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--teal-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--teal-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-3);
  --outline: var(--gray-4);
  --outline-variant: var(--gray-6);
}
}
:root {
  --primary-color-percent: 70%;
  --primary-gray-percent: 30%;
  --secondary-color-percent: 40%;
  --secondary-gray-percent: 60%;
  --surface-color-percent: 5%;
  --surface-gray-percent: 95%;
}

[data-color='violet'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--violet-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --primary-container: var(--violet-1);
  --on-primary: var(--gray-0);
  --on-primary-container: var(--violet-11);
  --secondary: color-mix(in srgb, var(--violet-7) var(--secondary-color-percent), var(--gray-7) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--violet-1) var(--secondary-color-percent), var(--gray-1) var(--secondary-gray-percent));
  --on-secondary: var(--gray-0);
  --on-secondary-container: var(--gray-11);
  --tertiary: color-mix(in srgb, var(--indigo-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --tertiary-container: var(--indigo-1);
  --on-tertiary: var(--gray-0);
  --on-tertiary-container: var(--indigo-11);
  --error: color-mix(in srgb, var(--red-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --error-container: var(--red-1);
  --on-error: var(--gray-0);
  --on-error-container: var(--red-11);
  --layer-background: color-mix(in srgb, var(--violet-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-9);
  --layer-surface: color-mix(in srgb, var(--violet-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--violet-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--violet-3) var(--surface-color-percent), var(--gray-3) var(--surface-gray-percent));
  --surface-variant: var(--gray-2);
  --on-surface-variant: var(--gray-7);
  --outline: var(--gray-6);
  --outline-variant: var(--gray-4);
  --surface-tint: var(--violet-6);
  --shadow: var(--gray-12);
  --scrim: var(--gray-12);
  --inverse-surface: var(--gray-9);
  --inverse-on-surface: var(--gray-1);
  --inverse-primary: var(--violet-3);
}

[data-color='violet'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--violet-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --primary-container: var(--violet-8);
  --on-primary: var(--violet-9);
  --on-primary-container: var(--violet-1);
  --secondary: color-mix(in srgb, var(--violet-3) var(--secondary-color-percent), var(--gray-3) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--violet-8) var(--secondary-color-percent), var(--gray-8) var(--secondary-gray-percent));
  --on-secondary: var(--gray-9);
  --on-secondary-container: var(--gray-1);
  --tertiary: color-mix(in srgb, var(--indigo-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --tertiary-container: var(--indigo-8);
  --on-tertiary: var(--indigo-9);
  --on-tertiary-container: var(--indigo-1);
  --error: color-mix(in srgb, var(--red-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --error-container: var(--red-9);
  --on-error: var(--red-10);
  --on-error-container: var(--red-1);
  --layer-background: color-mix(in srgb, var(--violet-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-3);
  --layer-surface: color-mix(in srgb, var(--violet-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--violet-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--violet-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --surface-variant: var(--gray-8);
  --on-surface-variant: var(--gray-4);
  --outline: var(--gray-5);
  --outline-variant: var(--gray-8);
  --surface-tint: var(--violet-3);
  --inverse-surface: var(--gray-2);
  --inverse-on-surface: var(--gray-9);
  --inverse-primary: var(--violet-6);
}

@media (prefers-contrast: more) {
[data-color='violet'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--violet-9) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --primary-container: var(--violet-8);
  --on-primary-container: var(--gray-0);
  --secondary: color-mix(in srgb, var(--violet-9) var(--secondary-color-percent), var(--gray-10) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--violet-8) var(--secondary-color-percent), var(--gray-8) var(--secondary-gray-percent));
  --on-secondary-container: var(--gray-0);
  --tertiary: color-mix(in srgb, var(--indigo-10) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --tertiary-container: var(--indigo-8);
  --on-tertiary-container: var(--gray-0);
  --error: color-mix(in srgb, var(--red-10) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --error-container: var(--red-9);
  --on-error-container: var(--gray-0);
  --layer-background: color-mix(in srgb, var(--violet-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-10);
  --layer-surface: color-mix(in srgb, var(--violet-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--violet-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--violet-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-10);
  --outline: var(--gray-9);
  --outline-variant: var(--gray-9);
}
}

@media (prefers-contrast: more) {
[data-color='violet'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--violet-3) var(--primary-gray-percent));
  --primary-container: var(--violet-2);
  --on-primary: var(--gray-12);
  --on-primary-container: var(--gray-12);
  --secondary: color-mix(in srgb, var(--gray-0) var(--secondary-color-percent), var(--violet-3) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--gray-3) var(--secondary-color-percent), var(--violet-2) var(--secondary-gray-percent));
  --on-secondary: var(--gray-12);
  --on-secondary-container: var(--gray-12);
  --tertiary: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--indigo-3) var(--primary-gray-percent));
  --tertiary-container: var(--indigo-3);
  --on-tertiary: var(--gray-12);
  --on-tertiary-container: var(--gray-12);
  --error: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--red-3) var(--primary-gray-percent));
  --error-container: var(--red-3);
  --on-error: var(--gray-12);
  --on-error-container: var(--gray-12);
  --layer-background: color-mix(in srgb, var(--violet-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-0);
  --layer-surface: color-mix(in srgb, var(--violet-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--violet-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--violet-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-0);
  --outline: var(--gray-3);
  --outline-variant: var(--gray-3);
}
}

@media (prefers-contrast: less) {
[data-color='violet'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--violet-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --primary-container: var(--violet-4);
  --on-primary-container: var(--gray-0);
  --secondary: color-mix(in srgb, var(--violet-7) var(--secondary-color-percent), var(--gray-7) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--violet-4) var(--secondary-color-percent), var(--gray-5) var(--secondary-gray-percent));
  --on-secondary-container: var(--gray-0);
  --tertiary: color-mix(in srgb, var(--indigo-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --tertiary-container: var(--indigo-4);
  --on-tertiary-container: var(--gray-0);
  --error: color-mix(in srgb, var(--red-8) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --error-container: var(--red-5);
  --on-error-container: var(--gray-0);
  --layer-background: color-mix(in srgb, var(--violet-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-8);
  --layer-surface: color-mix(in srgb, var(--violet-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--violet-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--violet-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-8);
  --outline: var(--gray-7);
  --outline-variant: var(--gray-5);
}
}

@media (prefers-contrast: less) {
[data-color='violet'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--violet-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --primary-container: var(--violet-4);
  --on-primary: var(--violet-11);
  --on-primary-container: var(--gray-12);
  --secondary: color-mix(in srgb, var(--violet-2) var(--secondary-color-percent), var(--gray-2) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--violet-4) var(--secondary-color-percent), var(--gray-5) var(--secondary-gray-percent));
  --on-secondary: var(--gray-11);
  --on-secondary-container: var(--gray-12);
  --tertiary: color-mix(in srgb, var(--indigo-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --tertiary-container: var(--indigo-5);
  --on-tertiary: var(--indigo-11);
  --on-tertiary-container: var(--gray-12);
  --error: color-mix(in srgb, var(--red-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --error-container: var(--red-4);
  --on-error: var(--red-11);
  --on-error-container: var(--gray-12);
  --layer-background: color-mix(in srgb, var(--violet-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-4);
  --layer-surface: color-mix(in srgb, var(--violet-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--violet-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--violet-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-3);
  --outline: var(--gray-4);
  --outline-variant: var(--gray-6);
}
}
:root {
  --primary-color-percent: 70%;
  --primary-gray-percent: 30%;
  --secondary-color-percent: 40%;
  --secondary-gray-percent: 60%;
  --surface-color-percent: 5%;
  --surface-gray-percent: 95%;
}

[data-color='yellow'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--yellow-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --primary-container: var(--yellow-1);
  --on-primary: var(--gray-0);
  --on-primary-container: var(--yellow-11);
  --secondary: color-mix(in srgb, var(--yellow-7) var(--secondary-color-percent), var(--gray-7) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--yellow-1) var(--secondary-color-percent), var(--gray-1) var(--secondary-gray-percent));
  --on-secondary: var(--gray-0);
  --on-secondary-container: var(--gray-11);
  --tertiary: color-mix(in srgb, var(--orange-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --tertiary-container: var(--orange-1);
  --on-tertiary: var(--gray-0);
  --on-tertiary-container: var(--orange-11);
  --error: color-mix(in srgb, var(--red-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --error-container: var(--red-1);
  --on-error: var(--gray-0);
  --on-error-container: var(--red-11);
  --layer-background: color-mix(in srgb, var(--yellow-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-9);
  --layer-surface: color-mix(in srgb, var(--yellow-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--yellow-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--yellow-3) var(--surface-color-percent), var(--gray-3) var(--surface-gray-percent));
  --surface-variant: var(--gray-2);
  --on-surface-variant: var(--gray-7);
  --outline: var(--gray-6);
  --outline-variant: var(--gray-4);
  --surface-tint: var(--yellow-6);
  --shadow: var(--gray-12);
  --scrim: var(--gray-12);
  --inverse-surface: var(--gray-9);
  --inverse-on-surface: var(--gray-1);
  --inverse-primary: var(--yellow-3);
}

[data-color='yellow'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--yellow-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --primary-container: var(--yellow-8);
  --on-primary: var(--yellow-9);
  --on-primary-container: var(--yellow-1);
  --secondary: color-mix(in srgb, var(--yellow-3) var(--secondary-color-percent), var(--gray-3) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--yellow-8) var(--secondary-color-percent), var(--gray-8) var(--secondary-gray-percent));
  --on-secondary: var(--gray-9);
  --on-secondary-container: var(--gray-1);
  --tertiary: color-mix(in srgb, var(--orange-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --tertiary-container: var(--orange-8);
  --on-tertiary: var(--orange-9);
  --on-tertiary-container: var(--orange-1);
  --error: color-mix(in srgb, var(--red-3) var(--primary-color-percent), var(--gray-3) var(--primary-gray-percent));
  --error-container: var(--red-9);
  --on-error: var(--red-10);
  --on-error-container: var(--red-1);
  --layer-background: color-mix(in srgb, var(--yellow-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-3);
  --layer-surface: color-mix(in srgb, var(--yellow-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--yellow-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--yellow-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --surface-variant: var(--gray-8);
  --on-surface-variant: var(--gray-4);
  --outline: var(--gray-5);
  --outline-variant: var(--gray-8);
  --surface-tint: var(--yellow-3);
  --inverse-surface: var(--gray-2);
  --inverse-on-surface: var(--gray-9);
  --inverse-primary: var(--yellow-6);
}

@media (prefers-contrast: more) {
[data-color='yellow'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--yellow-9) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --primary-container: var(--yellow-8);
  --on-primary-container: var(--gray-0);
  --secondary: color-mix(in srgb, var(--yellow-9) var(--secondary-color-percent), var(--gray-10) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--yellow-8) var(--secondary-color-percent), var(--gray-8) var(--secondary-gray-percent));
  --on-secondary-container: var(--gray-0);
  --tertiary: color-mix(in srgb, var(--orange-10) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --tertiary-container: var(--orange-8);
  --on-tertiary-container: var(--gray-0);
  --error: color-mix(in srgb, var(--red-10) var(--primary-color-percent), var(--gray-10) var(--primary-gray-percent));
  --error-container: var(--red-9);
  --on-error-container: var(--gray-0);
  --layer-background: color-mix(in srgb, var(--yellow-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-10);
  --layer-surface: color-mix(in srgb, var(--yellow-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--yellow-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--yellow-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-10);
  --outline: var(--gray-9);
  --outline-variant: var(--gray-9);
}
}

@media (prefers-contrast: more) {
[data-color='yellow'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--yellow-3) var(--primary-gray-percent));
  --primary-container: var(--yellow-2);
  --on-primary: var(--gray-12);
  --on-primary-container: var(--gray-12);
  --secondary: color-mix(in srgb, var(--gray-0) var(--secondary-color-percent), var(--yellow-3) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--gray-3) var(--secondary-color-percent), var(--yellow-2) var(--secondary-gray-percent));
  --on-secondary: var(--gray-12);
  --on-secondary-container: var(--gray-12);
  --tertiary: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--orange-3) var(--primary-gray-percent));
  --tertiary-container: var(--orange-3);
  --on-tertiary: var(--gray-12);
  --on-tertiary-container: var(--gray-12);
  --error: color-mix(in srgb, var(--gray-0) var(--primary-color-percent), var(--red-3) var(--primary-gray-percent));
  --error-container: var(--red-3);
  --on-error: var(--gray-12);
  --on-error-container: var(--gray-12);
  --layer-background: color-mix(in srgb, var(--yellow-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-0);
  --layer-surface: color-mix(in srgb, var(--yellow-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--yellow-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--yellow-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-0);
  --outline: var(--gray-3);
  --outline-variant: var(--gray-3);
}
}

@media (prefers-contrast: less) {
[data-color='yellow'][data-color-scheme='light'] {
  --primary: color-mix(in srgb, var(--yellow-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --primary-container: var(--yellow-4);
  --on-primary-container: var(--gray-0);
  --secondary: color-mix(in srgb, var(--yellow-7) var(--secondary-color-percent), var(--gray-7) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--yellow-4) var(--secondary-color-percent), var(--gray-5) var(--secondary-gray-percent));
  --on-secondary-container: var(--gray-0);
  --tertiary: color-mix(in srgb, var(--orange-7) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --tertiary-container: var(--orange-4);
  --on-tertiary-container: var(--gray-0);
  --error: color-mix(in srgb, var(--red-8) var(--primary-color-percent), var(--gray-7) var(--primary-gray-percent));
  --error-container: var(--red-5);
  --on-error-container: var(--gray-0);
  --layer-background: color-mix(in srgb, var(--yellow-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --on-layer-background: var(--gray-12);
  --on-layer-background-variant: var(--gray-8);
  --layer-surface: color-mix(in srgb, var(--yellow-0) var(--surface-color-percent), var(--gray-0) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--yellow-1) var(--surface-color-percent), var(--gray-1) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--yellow-2) var(--surface-color-percent), var(--gray-2) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-8);
  --outline: var(--gray-7);
  --outline-variant: var(--gray-5);
}
}

@media (prefers-contrast: less) {
[data-color='yellow'][data-color-scheme='dark'] {
  --primary: color-mix(in srgb, var(--yellow-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --primary-container: var(--yellow-4);
  --on-primary: var(--yellow-11);
  --on-primary-container: var(--gray-12);
  --secondary: color-mix(in srgb, var(--yellow-2) var(--secondary-color-percent), var(--gray-2) var(--secondary-gray-percent));
  --secondary-container: color-mix(in srgb, var(--yellow-4) var(--secondary-color-percent), var(--gray-5) var(--secondary-gray-percent));
  --on-secondary: var(--gray-11);
  --on-secondary-container: var(--gray-12);
  --tertiary: color-mix(in srgb, var(--orange-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --tertiary-container: var(--orange-5);
  --on-tertiary: var(--orange-11);
  --on-tertiary-container: var(--gray-12);
  --error: color-mix(in srgb, var(--red-2) var(--primary-color-percent), var(--gray-2) var(--primary-gray-percent));
  --error-container: var(--red-4);
  --on-error: var(--red-11);
  --on-error-container: var(--gray-12);
  --layer-background: color-mix(in srgb, var(--yellow-12) var(--surface-color-percent), var(--gray-12) var(--surface-gray-percent));
  --on-layer-background: var(--gray-0);
  --on-layer-background-variant: var(--gray-4);
  --layer-surface: color-mix(in srgb, var(--yellow-11) var(--surface-color-percent), var(--gray-11) var(--surface-gray-percent));
  --layer-container: color-mix(in srgb, var(--yellow-10) var(--surface-color-percent), var(--gray-10) var(--surface-gray-percent));
  --layer-widget: color-mix(in srgb, var(--yellow-9) var(--surface-color-percent), var(--gray-9) var(--surface-gray-percent));
  --on-surface-variant: var(--gray-3);
  --outline: var(--gray-4);
  --outline-variant: var(--gray-6);
}
}
/* ==========================================================================
   Admin Layout - MD3 Expressive Design
   ========================================================================== */
:root {
  --viewport-height: 100vh;
  --viewport-height: 100dvh; /* Dynamic viewport height for newer browsers */
}
.admin-layout {
  height: var(--viewport-height);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  background: var(--surface);
  color: var(--on-layer-background);
}

/* ==========================================================================
   Desktop Navigation Rail - MD3 Expressive (May 2025)
   ========================================================================== */

.admin-nav-rail {
  /* Collapsed state (default) */
  width: 80px;
  min-width: 80px;
  height: 100vh;
  background: var(--layer-container);
  border-right: 1px solid var(--outline-variant);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--size-3) var(--size-2);
  z-index: var(--layer-top);
  transition: width 0.3s var(--ease-emphasized);
  overflow: hidden;
  flex-shrink: 0;
}

/* Expanded state */
.admin-nav-rail.expanded {
  width: 280px;
  min-width: 280px;
  align-items: stretch;
  padding: var(--size-3);
}

.nav-rail-header {
  margin-bottom: var(--size-4);
  width: 100%;
  position: relative;
}

.admin-nav-rail.expanded .nav-rail-header {
  justify-content: flex-start;
  padding: var(--size-2);
}

.nav-rail-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 64px;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-medium);
  background: var(--primary-container);
  color: var(--on-primary-container);
  text-decoration: none;
  transition: all 0.2s var(--ease-standard);
  flex-shrink: 0;
}

.admin-nav-rail.expanded .nav-rail-logo {
  margin-right: var(--size-3);
}

.nav-rail-logo:hover {
  background: var(--primary);
  color: var(--on-primary);
  transform: scale(1.05);
}

.nav-rail-logo svg {
  width: 24px;
  height: 24px;
}

.nav-rail-brand {
  display: none;
  font-size: var(--font-size-title-large);
  font-weight: var(--font-weight-6);
  color: var(--on-layer-background);
}

.admin-nav-rail.expanded .nav-rail-brand {
  display: block;
}

.nav-rail-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--layer-widget);
  border: none;
  color: var(--on-surface-variant);
  cursor: pointer;
  position: absolute;
  top: 16px;
  left: 8px;
  &:hover {
    background: var(--layer-widget);
    color: var(--primary);
  }
}

.nav-rail-toggle

.nav-rail-toggle svg {
  width: 24px;
  height: 24px;
}

.nav-rail-menu {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--size-2);
  width: 100%;
  align-items: center;
}

.admin-nav-rail.expanded .nav-rail-menu {
  align-items: stretch;
}

.nav-rail-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-medium);
  color: var(--on-surface-variant);
  text-decoration: none;
  transition: all 0.2s var(--ease-standard);
  position: relative;
  flex-shrink: 0;
}

.admin-nav-rail.expanded .nav-rail-item {
  width: 100%;
  justify-content: flex-start;
  padding: var(--size-3);
  gap: var(--size-3);
}

.nav-rail-item:hover {
  background: var(--layer-container);
  color: var(--on-layer-container);
}

.nav-rail-item.active {
  background: var(--layer-container);
  color: var(--secondary); /* Updated from on-layer-container to secondary per MD3 Expressive */
}

.nav-rail-item.active::before {
  content: '';
  position: absolute;
  left: -12px;
  width: 4px;
  height: 32px;
  background: var(--primary);
  border-radius: var(--radius-full);
}

.admin-nav-rail.expanded .nav-rail-item.active::before {
  display: none;
}

.nav-rail-item svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.nav-rail-item-label {
  display: none;
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-5);
  white-space: nowrap;
}

.admin-nav-rail.expanded .nav-rail-item-label {
  display: block;
}

.nav-rail-footer {
  display: flex;
  flex-direction: column;
  gap: var(--size-2);
  margin-top: var(--size-4);
}

.nav-rail-action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-medium);
  background: transparent;
  color: var(--on-surface-variant);
  border: none;
  cursor: pointer;
  transition: all 0.2s var(--ease-standard);
}

.nav-rail-action-button:hover {
  background: var(--layer-widget);
  color: var(--on-layer-background);
}

.nav-rail-action-button svg {
  width: 24px;
  height: 24px;
}

/* User Menu */
.nav-rail-user-menu {
  position: relative;
}

.nav-rail-user-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-medium);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s var(--ease-standard);
}

.nav-rail-user-button:hover {
  background: var(--layer-widget);
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-6);
  font-size: var(--font-size-body-large);
}

.nav-rail-user-dropdown {
  position: absolute;
  bottom: 100%;
  right: 0;
  min-width: 280px;
  background: var(--layer-widget);
  border-radius: var(--radius-large);
  box-shadow: var(--elevation-3);
  padding: var(--size-3);
  margin-bottom: var(--size-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.2s var(--ease-standard);
  z-index: var(--layer-modal);
}

.nav-rail-user-dropdown[data-dropdown-show] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.user-info {
  padding: var(--size-2);
  margin-bottom: var(--size-2);
}

.user-name {
  font-weight: var(--font-weight-6);
  font-size: var(--font-size-body-large);
  color: var(--on-layer-background);
}

.user-email {
  font-size: var(--font-size-body-medium);
  color: var(--on-surface-variant);
  margin-top: var(--size-1);
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: var(--size-2) var(--size-3);
  color: var(--on-layer-background);
  text-decoration: none;
  border-radius: var(--radius-small);
  transition: background-color 0.2s var(--ease-standard);
  font-size: var(--font-size-body-medium);
}

.dropdown-item:hover {
  background: var(--layer-container);
}

/* ==========================================================================
   Mobile Layout
   ========================================================================== */

@media (max-width: 767px) {
  .admin-layout {
    flex-direction: column;
    min-height: var(--viewport-height);
  }
  
  .admin-mobile-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--layer-top);
  }
  
  .admin-main-content {
    padding-bottom: 80px; /* Height of mobile toolbar */
  }
}

/* Handle safe areas for devices with notches */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .admin-mobile-footer {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Mobile App Bar */
.admin-mobile-header {
  background: var(--layer-container);
  border-bottom: 1px solid var(--outline-variant);
  z-index: var(--layer-top);
  flex-shrink: 0;
}

.mobile-app-bar {
  display: flex;
  align-items: center;
  padding: var(--size-2) var(--size-3);
  gap: var(--size-3);
  min-height: 64px;
}

.mobile-app-bar.small {
  min-height: 48px;
  padding: var(--size-1) var(--size-3);
}

.mobile-app-bar.medium {
  min-height: 64px;
}

.mobile-app-bar.large {
  min-height: 96px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.app-bar-left,
.app-bar-right {
  flex-shrink: 0;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-bar-title {
  flex: 2;
  font-size: var(--font-size-title-large);
  font-weight: var(--font-weight-5);
  color: var(--on-layer-background);
  text-align: center;
}

.mobile-app-bar.large .app-bar-title {
  text-align: left;
  font-size: var(--font-size-headline-small);
  margin-top: var(--size-2);
}

/* Main Content */
.admin-main-content {
  flex: 1;
  overflow-y: auto;
  background: var(--surface);
  display: flex;
  flex-direction: column;
}

.admin-content-wrapper {
  flex: 1;
  padding: var(--size-4);
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

@media (max-width: 767px) {
  .admin-content-wrapper {
    padding: var(--size-3);
  }
}

/* Mobile Footer Toolbar */
.admin-mobile-footer {
  background: var(--layer-container);
  border-top: 1px solid var(--outline-variant);
  flex-shrink: 0;
}

.mobile-toolbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: var(--size-2) var(--size-3);
  min-height: 80px;
}

.mobile-toolbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  max-width: 80px;
  padding: var(--size-1);
  color: var(--on-layer-background);
  text-decoration: none;
  border-radius: var(--radius-small);
  transition: all 0.2s var(--ease-standard);
  min-height: 56px;
}

.mobile-toolbar-item:hover,
.mobile-toolbar-item.active {
  background: var(--layer-container);
  color: var(--on-layer-container);
}

.mobile-toolbar-item svg {
  width: 24px;
  height: 24px;
  margin-bottom: var(--size-1);
}

.mobile-toolbar-label {
  font-size: var(--font-size-body-small);
  text-align: center;
  line-height: 1.2;
}

/* ==========================================================================
   Desktop Layout Adjustments
   ========================================================================== */

@media (min-width: 768px) {
  .admin-main-content {
    margin-left: 0;
    overflow-y: auto;
  }
  
  .admin-content-wrapper {
    padding: var(--size-6) var(--size-8);
  }
}
/* ==========================================================================
   Mobile Modal Navigation Rail - MD3 Expressive
   ========================================================================== */

/* Modal Rail Backdrop */
.modal-rail-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: var(--layer-scrim);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s var(--ease-emphasized);
}

.modal-rail-backdrop.active {
  opacity: 1;
  visibility: visible;
}

/* Mobile Modal Rail */
.mobile-modal-rail {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 280px;
  background: var(--layer-surface);
  border-right: 1px solid var(--outline-variant);
  z-index: var(--layer-modal);
  transform: translateX(-100%);
  transition: transform 0.3s var(--ease-emphasized);
  display: flex;
  flex-direction: column;
  padding: var(--size-3);
}

.mobile-modal-rail.active {
  transform: translateX(0);
}

.modal-rail-header {
  margin-bottom: var(--size-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--size-2);
}

.modal-rail-brand {
  display: flex;
  align-items: center;
  gap: var(--size-3);
}

.modal-rail-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-medium);
  background: var(--primary-container);
  color: var(--on-primary-container);
  text-decoration: none;
  transition: all 0.2s var(--ease-standard);
}

.modal-rail-logo:hover {
  background: var(--primary);
  color: var(--on-primary);
  transform: scale(1.05);
}

.modal-rail-logo svg {
  width: 20px;
  height: 20px;
}

.modal-rail-title {
  font-size: var(--font-size-title-large);
  font-weight: var(--font-weight-6);
  color: var(--on-layer-background);
}

.modal-rail-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: transparent;
  border: none;
  color: var(--on-surface-variant);
  cursor: pointer;
  transition: all 0.2s var(--ease-standard);
}

.modal-rail-close:hover {
  background: var(--layer-container);
  color: var(--on-layer-container);
}

.modal-rail-close svg {
  width: 20px;
  height: 20px;
}

.modal-rail-menu {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--size-2);
  overflow-y: auto;
}

.modal-rail-section {
  margin-bottom: var(--size-4);
}

.modal-rail-section:last-child {
  margin-bottom: 0;
}

.modal-rail-section-title {
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-6);
  color: var(--on-surface-variant);
  padding: var(--size-2) var(--size-3);
  margin-bottom: var(--size-2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.modal-rail-item {
  display: flex;
  align-items: center;
  padding: var(--size-3);
  gap: var(--size-3);
  color: var(--on-layer-background);
  text-decoration: none;
  border-radius: var(--radius-medium);
  transition: all 0.2s var(--ease-standard);
  width: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: var(--font-size-body-medium);
}

.modal-rail-item:hover {
  background: var(--layer-container);
  color: var(--on-layer-container);
}

.modal-rail-item.active {
  background: var(--layer-container);
  color: var(--secondary);
}

.modal-rail-item svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.modal-rail-item-label {
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-5);
}

.modal-rail-footer {
  border-top: 1px solid var(--outline-variant);
  padding-top: var(--size-3);
  margin-top: var(--size-3);
}

/* Mobile-only display */
@media (min-width: 768px) {
  .modal-rail-backdrop,
  .mobile-modal-rail {
    display: none;
  }
}

/* @import 'props.media.css'; */

:where(html) {
  --animation-fade-in: fade-in .5s var(--ease-3);
  --animation-fade-in-bloom: fade-in-bloom 2s var(--ease-3);
  --animation-fade-out: fade-out .5s var(--ease-3);
  --animation-fade-out-bloom: fade-out-bloom 2s var(--ease-3);
  --animation-scale-up: scale-up .5s var(--ease-3);
  --animation-scale-down: scale-down .5s var(--ease-3);
  --animation-slide-out-up: slide-out-up .5s var(--ease-3);
  --animation-slide-out-down: slide-out-down .5s var(--ease-3);
  --animation-slide-out-right: slide-out-right .5s var(--ease-3);
  --animation-slide-out-left: slide-out-left .5s var(--ease-3);
  --animation-slide-in-up: slide-in-up .5s var(--ease-3);
  --animation-slide-in-down: slide-in-down .5s var(--ease-3);
  --animation-slide-in-right: slide-in-right .5s var(--ease-3);
  --animation-slide-in-left: slide-in-left .5s var(--ease-3);
  --animation-shake-x: shake-x .75s var(--ease-out-5);
  --animation-shake-y: shake-y .75s var(--ease-out-5);
  --animation-shake-z: shake-z 1s var(--ease-in-out-3);
  --animation-spin: spin 2s linear infinite;
  --animation-ping: ping 5s var(--ease-out-3) infinite;
  --animation-blink: blink 1s var(--ease-out-3) infinite;
  --animation-float: float 3s var(--ease-in-out-3) infinite;
  --animation-bounce: bounce 2s var(--ease-squish-2) infinite;
  --animation-pulse: pulse 2s var(--ease-out-3) infinite;
}

@keyframes fade-in {
  to { opacity: 1 }
}
@keyframes fade-in-bloom {
  0% { opacity: 0; filter: brightness(1) blur(20px) }
 10% { opacity: 1; filter: brightness(2) blur(10px) }
100% { opacity: 1; filter: brightness(1) blur(0) }
}
@keyframes fade-out {
  to { opacity: 0 }
}
@keyframes fade-out-bloom {
100% { opacity: 0; filter: brightness(1) blur(20px) }
 10% { opacity: 1; filter: brightness(2) blur(10px) }
  0% { opacity: 1; filter: brightness(1) blur(0) }
}
@keyframes scale-up {
  to { transform: scale(1.25) }
}
@keyframes scale-down {
  to { transform: scale(.75) }
}
@keyframes slide-out-up {
  to { transform: translateY(-100%) }
}
@keyframes slide-out-down {
  to { transform: translateY(100%) }
}
@keyframes slide-out-right {
  to { transform: translateX(100%) }
}
@keyframes slide-out-left {
  to { transform: translateX(-100%) }
}
@keyframes slide-in-up {
  from { transform: translateY(100%) }
}
@keyframes slide-in-down {
  from { transform: translateY(-100%) }
}
@keyframes slide-in-right {
  from { transform: translateX(-100%) }
}
@keyframes slide-in-left {
  from { transform: translateX(100%) }
}
@keyframes shake-x {
  0%, 100% { transform: translateX(0%) }
  20% { transform: translateX(-5%) }
  40% { transform: translateX(5%) }
  60% { transform: translateX(-5%) }
  80% { transform: translateX(5%) }
}
@keyframes shake-y {
  0%, 100% { transform: translateY(0%) }
  20% { transform: translateY(-5%) }
  40% { transform: translateY(5%) }
  60% { transform: translateY(-5%) }
  80% { transform: translateY(5%) }
}
@keyframes shake-z {
  0%, 100% { transform: rotate(0deg) }
  20% { transform: rotate(-2deg) }
  40% { transform: rotate(2deg) }
  60% { transform: rotate(-2deg) }
  80% { transform: rotate(2deg) }
}
@keyframes spin {
  to { transform: rotate(1turn) }
}
@keyframes ping {
  90%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes blink {
  0%, 100% {
    opacity: 1
  }
  50% {
    opacity: .5
  }
}
@keyframes float {
  50% { transform: translateY(-25%) }
}
@keyframes bounce {
  25% { transform: translateY(-20%) }
  40% { transform: translateY(-3%) }
  0%, 60%, 100% { transform: translateY(0) }
}
@keyframes pulse {
  50% { transform: scale(.9,.9) }
}
.scale-95 {
  transform: scale(0.95);
}
.scale-100 {
  transform: scale(1);
}

.opacity-0 {
    opacity: 0;
  }
  
  .opacity-100 {
    opacity: 1;
  }
  
  .translate-x-0 {
    transform: translateX(0);
  }
  
  .translate-x-6 {
    transform: translateX(1.5rem); /* 6 units = 1.5rem */
  }
  .translate-y-0 {
    transform: translateY(0);
  }
  
  .translate-y-6 {
    transform: translateY(1.5rem); /* 6 units = 1.5rem */
  }
  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
  }
  
  .shake-animation {
    animation: var(--animation-shake-x);
  }
/* ===== Avatar Group ===== */
.avatar-group-container {
    display: flex;
    align-items: center;
    gap: var(--size-2);
  }
  
  .avatar-group-icon {
    color: var(--on-layer-widget);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .avatar-group {
    display: flex;
    align-items: center;
  }
  
  .avatar {
    --avatar-size: 48px;
    --avatar-background-color: var(--primary-container);
    --avatar-color: var(--on-primary-container);
    inline-size: var(--avatar-size);
    aspect-ratio: 1;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--layer-widget);
    color: var(--on-layer-background);
    overflow: hidden;
    font-size: calc(var(--avatar-size) * 0.35);
    font-weight: var(--font-weight-5);
    position: relative;
    box-shadow: var(--elevation-1);
  }
  
  .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .avatar.filled {
    background-color: var(--avatar-background-color);
    color: var(--avatar-color);
  }
  
  .avatar.extra-small {
    --avatar-size: 20px;
    font-size: calc(var(--avatar-size) * 0.4);
  }
  
  .avatar.x-small {
    --avatar-size: 24px;
  }
  .avatar.small {
    --avatar-size: 32px;
  }
  .avatar.medium {
    --avatar-size: 48px;
  }
  
  .avatar.large {
    --avatar-size: 64px;
  }
  
  .avatar.x-large {
    --avatar-size: 96px;
  }
  .avatar.xx-large {
    --avatar-size: 128px;
  }
  
  .avatar-group .avatar {
    margin-inline-end: calc(var(--size-2) * -1);
    border: 2px solid var(--layer-background);
    transition: transform 0.2s var(--ease-emphasized), z-index 0.1s;
    cursor: pointer;
  }
  
  .avatar-group .avatar:hover {
    transform: translateY(-4px) scale(1.05);
    z-index: 2;
  }
  
  .avatar-more {
    font-size: var(--font-size-body-small);
    font-weight: var(--font-weight-5);
    color: var(--on-layer-widget);
    margin-left: var(--size-2);
  }
/* app/assets/stylesheets/components/big_stat.css */
.big-stat {
    text-align: left;
    padding: var(--size-5);
    background-color: var(--layer-surface);
    border-radius: var(--radius-medium);
    display: flex;
    flex-direction: column;
    gap: var(--size-2);
  }
  
  /* This ensures the value and direction icon are in a row */
  .big-stat-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--size-2);
  }
  
  .big-stat-direction {
    color: var(--stat-color, var(--on-layer-background-variant));
    display: flex;
    align-items: center;
  }
  
  .big-stat-value {
    font-size: var(--font-size-display-medium);
    font-weight: var(--font-weight-7);
    line-height: 1;
    color: var(--stat-color, var(--on-layer-background));
  }
  
  .big-stat-label {
    font-size: var(--font-size-body-medium);
    font-weight: var(--font-weight-4);
    color: var(--on-layer-background-variant);
    margin-top: var(--size-1);
  }
  
  /* Color utilities for the stat */
  .big-stat.steel-blue {
    --stat-color: rgb(var(--steel-blue));
  }
  
  .big-stat.terra-cotta {
    --stat-color: rgb(var(--terra-cotta));
  }
  
  .big-stat.dark-text {
    --stat-color: var(--on-layer-background));
  }
  
  /* Size variants */
  .big-stat.small {
    padding: var(--size-3);
  }
  
  .big-stat.small .big-stat-value {
    font-size: var(--font-size-headline-large);
  }
  
  .big-stat.large {
    padding: var(--size-6);
  }
  
  .big-stat.large .big-stat-value {
    font-size: var(--font-size-display-large);
  }
.button-group {
    display: flex;
    align-items: center;
    gap: var(--size-2);
}
.color-scheme-button {
    svg {
        stroke: var(--on-layer-background);
        height: 1.3rem;
        width: 1.3rem;
    }
}

.button {
    --button-justify: center;
    display: inline-flex;
    align-items: center;
    justify-content: var(--button-justify);
    gap: var(--size-2);
    padding: var(--size-2) var(--size-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-body-large);
    font-weight: var(--font-weight-5);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s var(--ease-standard);
    min-height: 40px;

    svg {
        height: 18px;
        width: 18px;
    }

    &.filled {
        background: var(--primary);
        color: var(--on-primary);
        &:hover {
            background: color-mix(in srgb, var(--primary) 92%, black);
        }
        &:active {
            background: color-mix(in srgb, var(--primary) 88%, black);
        }
    }

    &:disabled {
        background: var(--layer-container);
        color: var(--on-layer-background);
        opacity: 0.38;
        pointer-events: none;
    }

    &.tonal {
        background: var(--secondary-container);
        color: var(--on-secondary-container);
        &:hover {
            background: color-mix(
                in srgb,
                var(--secondary-container) 92%,
                black
            );
        }
        &:active {
            background: color-mix(
                in srgb,
                var(--secondary-container) 88%,
                black
            );
        }
    }
    &.green {
        background-color: rgb(var(--green-chip) / 0.5);
        color: var(--on-green-chip);
        border: none;
        &:hover {
            background-color: rgb(var(--green-chip) / 0.7);
        }
    }

    &.outlined {
        border: 1px solid var(--outline);
        color: var(--primary);
        &:hover {
            background: color-mix(in srgb, var(--primary) 8%, transparent);
        }
        &:active {
            background: color-mix(in srgb, var(--primary) 12%, transparent);
        }
    }

    &.text {
        color: var(--primary);
        &:hover {
            background: color-mix(in srgb, var(--primary) 8%, transparent);
        }
        &:active {
            background: color-mix(in srgb, var(--primary) 12%, transparent);
        }
    }

    &.icon {
        padding: var(--size-2);
        min-width: 40px;
        border-radius: var(--radius-full);
        color: var(--primary);
        &:hover {
            background: color-mix(in srgb, var(--primary) 8%, transparent);
        }
        svg {
            height: 21px;
            width: 21px;
        }
    }
    &.icon.filled {
        color: var(--on-primary);
    }
    &.icon.small {
        padding: 0;
        width: 28px;
        height: 28px;
        min-height: 28px;
        min-width: 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-full);
        
        svg {
          height: 18px;
          width: 18px;
        }
      }
    &.icon.large {
        svg {
            height: 24px;
            width: 24px;
        }
    }

    &.error {
        background: var(--error);
        color: var(--on-error);
    }

    &.small {
        min-height: 32px;
        font-size: var(--font-size-body-medium);
        padding: var(--size-1) var(--size-2);
    }
    &.round.small {
        width: 32px;
        height: 32px;
        font-size: var(--font-size-body-medium);
        padding: var(--size-1) var(--size-1);
    }

    &.large {
        min-height: 48px;
        font-size: var(--font-size-title-medium);
        padding: var(--size-3) var(--size-4);
    }
}

.fab {
    --fab-size: 56px;
    --icon-size: 24px;

    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--fab-size);
    width: var(--fab-size);
    border-radius: var(--radius-large);
    box-shadow: var(--elevation-3);
    transition: all 0.2s var(--ease-standard);
    border: none;
    cursor: pointer;
    z-index: var(--layer-top);
    background: var(--primary);
    color: var(--on-primary);

    svg {
        height: var(--icon-size);
        width: var(--icon-size);
    }

    &:hover {
        box-shadow: var(--elevation-4);
    }
    &:active {
        box-shadow: var(--elevation-2);
    }

    &.medium {
        --fab-size: 80px;
        --icon-size: 28px;
    }

    &.large {
        --fab-size: 96px;
        --icon-size: 32px;
    }

    &.secondary {
        background: var(--secondary);
        color: var(--on-secondary);
    }
    &.tertiary {
        background: var(--tertiary);
        color: var(--on-tertiary);
    }
    &.tonal {
        background: var(--primary-container);
        color: var(--on-primary-container);
    }
    &.secondary.tonal {
        background: var(--secondary-container);
        color: var(--on-secondary-container);
    }
    &.tertiary.tonal {
        background: var(--tertiary-container);
        color: var(--on-tertiary-container);
    }

    &.fixed {
        position: fixed;
        bottom: 96px;
        right: var(--size-4);
        z-index: var(--layer-top);
    }
    /* Extended FAB styles */
    &.extended {
        --padding: 16px;
        --label-margin: 12px;
        width: auto;
        min-width: var(--fab-size);
        padding-left: var(--padding);
        padding-right: var(--padding);
        justify-content: flex-start;
        
        .label {
            margin-left: var(--label-margin);
            font-weight: 500;
            white-space: nowrap;
        }
        &.medium {
            --padding: 20px;
            --label-margin: 14px;
        }
        &.large {
            --padding: 24px;
            --label-margin: 16px;
        }
    }
}
.card {
    --card-background: var(--layer-container); /* Default background */
    --card-color: var(--on-layer-background); /* Default text color */
    --card-padding: var(--size-3); /* Using design system spacing */
    border-radius: var(--radius-medium); /* MD3 uses 12dp medium radius */
    padding: var(--card-padding);
    background-color: var(--card-background);
    color: var(--card-color);
    box-shadow: var(--elevation-1);
    transition: box-shadow 0.2s var(--ease-standard); /* MD3 standard easing */
    position: relative;
    margin-bottom: var(--size-3);
    /* display: flow-root; */

    &.surface {
        background-color: var(--layer-background);
    }

    /* Clickable/Interactive state */
    &.clickable {
        cursor: pointer;

        &:hover {
            box-shadow: var(--elevation-2);
            background-color: var(--layer-widget);
        }

        &:active {
            box-shadow: var(--elevation-1);
            background-color: var(--layer-widget);
        }
    }

    /* Outlined variant */
    &.outlined {
        box-shadow: none;
        border: 1px solid var(--outline);
        background-color: var(--layer-background);
    }

    /* Filled variant */
    &.filled {
        background-color: var(--layer-widget);
        box-shadow: none;
    }
    &.primary {
        background-color: var(--primary-container);
        color: var(--on-primary-container);
        box-shadow: none;
    }
    &.tonal {
        background-color: var(--secondary-container);
        color: var(--on-secondary-container);
        box-shadow: none;
    }

    /* Elevated variant */
    &.elevated {
        box-shadow: var(--elevation-2);
        background-color: var(--layer-surface);
    }
    &.featured {
        box-shadow: var(--elevation-3);
        position: relative;
        overflow: hidden;
    }

    /* Card sections */
    .card-header {
        display: flex;
        gap: var(--size-3);
        align-items: center;
        margin-block-end: var(--size-3);
        padding-block: var(--size-2);
    }

    .card-content {
        margin-block: var(--size-3);
    }

    .card-footer {
        display: flex;
        justify-content: flex-end;
        gap: var(--size-2);
        margin-block-start: var(--size-3);
        padding-block-start: var(--size-2);
    }

    /* Density variants */
    &.compact {
        --card-padding: var(--size-2);

        .card-header {
            margin-block-end: var(--size-2);
        }

        .card-content {
            margin-block: var(--size-2);
        }

        .card-footer {
            margin-block-start: var(--size-2);
        }
    }

    &.spacious {
        --card-padding: var(--size-4);

        .card-header {
            margin-block-end: var(--size-4);
        }

        .card-content {
            margin-block: var(--size-4);
        }

        .card-footer {
            margin-block-start: var(--size-4);
        }
    }
}
.chip {
    --chip-background-color: var(--layer-surface);
    --chip-selected-state-layer: var(--secondary-container);
    --chip-on-selected-state-layer: var(--on-secondary-container);
    --chip-color: var(--on-layer-background);

    align-items: center;
    background-color: var(--chip-background-color);
    border-radius: var(--radius-small);
    border: 1px solid var(--outline);
    color: var(--chip-color);
    display: inline-flex;
    font-size: var(--font-size-body-medium);
    font-weight: var(--font-weight-5);
    gap: var(--size-1);
    height: 32px;
    line-height: var(--font-lineheight-2);
    padding-inline: var(--size-2);
    transition: background-color 0.2s var(--ease-standard);
    text-decoration: none;

    svg {
        color: var(--primary);
        height: 18px;
        width: 18px;
        flex-shrink: 0;
    }

    &.selected {
        background-color: var(--chip-selected-state-layer);
        border-color: transparent;
        color: var(--chip-on-selected-state-layer);

        svg {
            color: var(--chip-on-selected-state-layer);
        }
    }

    &.elevated {
        box-shadow: var(--elevation-1);
        border: none;
        background-color: var(--layer-surface);
    }

    &.small {
        height: 24px;
        padding-inline: var(--size-2);
        font-size: var(--font-size-body-small);

        svg {
            height: 16px;
            width: 16px;
        }
    }

    &.assist {
        background-color: var(--layer-widget);
        color: var(--on-layer-background);
        border: none;
        height: 32px;

        svg {
            color: var(--on-layer-background-variant);
        }
    }
    &.filter {
        background-color: var(--layer-container);
        color: var(--on-layer-background);
        border: 1px solid var(--outline);
        height: 32px;
        svg {
            color: var(--on-layer-background-variant);
        }
    }

    &.input {
        background-color: var(--layer-surface);
        color: var(--on-layer-background);
        border: none;
        height: 32px;
        box-shadow: var(--elevation-1);
        svg {
            color: var(--on-layer-background-variant);
        }
    }

    &.suggestion {
        background-color: var(--layer-surface);
        color: var(--on-layer-background);
        border: 1px solid transparent;
        height: 32px;
        svg {
            color: var(--on-layer-background-variant);
        }
    }

    /* Hover state */
    &:hover {
        background-color: color-mix(
            in srgb,
            var(--chip-state-layer) 92%,
            var(--on-layer-background)
        );
        cursor: pointer;
    }

    &:active {
        background-color: color-mix(
            in srgb,
            var(--chip-state-layer) 88%,
            var(--on-layer-background)
        );
    }

    &:disabled {
        background-color: color-mix(
            in srgb,
            var(--layer-background) 12%,
            var(--on-layer-background)
        );
        color: var(--on-layer-background);
        opacity: 0.38;
        pointer-events: none;
    }

    &.error {
        background: rgb(var(--red-chip) / 0.15);
        color: var(--on-error);
        border: none;
    }

    &.success {
        background: rgb(var(--green-chip) / 0.15);
        color: var(--on-layer-background);
        border: none;
    }

    &.warning {
        background: rgb(var(--amber-chip) / 0.15);
        color: var(--on-layer-background);
        border: none;
    }
    &.red {
        background-color: rgb(var(--red-chip) / 0.25);
        color: var(--on-red-chip);
        border: none;
    }
    &.green {
        background-color: rgb(var(--green-chip) / 0.25);
        color: var(--on-green-chip);
        border: none;
    }
    &.yellow {
        background-color: rgb(var(--yellow-chip) / 0.25);
        color: var(--on-yellow-chip);
        border: none;
    }
    &.blue {
        background-color: rgb(var(--blue-chip) / 0.25);
        color: var(--on-blue-chip);
        border: none;
    }
    &.purple {
        background-color: rgb(var(--purple-chip) / 0.25);
        color: var(--on-purple-chip);
        border: none;
    }
    &.orange {
        background-color: rgb(var(--orange-chip) / 0.25);
        color: var(--on-orange-chip);
        border: none;
    }
    &.pink {
        background-color: rgb(var(--pink-chip) / 0.25);
        color: var(--on-pink-chip);
        border: none;
    }
    &.gray {
        background-color: rgb(var(--gray-chip) / 0.25);
        color: var(--on-gray-chip);
        border: none;
    }
    &.amber {
        background-color: rgb(var(--amber-chip) / 0.25);
        color: var(--on-amber-chip);
        border: none;
    }
    &.lime {
        background-color: rgb(var(--lime-chip) / 0.25);
        color: var(--on-lime-chip);
        border: none;
    }
    &.emerald {
        background-color: rgb(var(--emerald-chip) / 0.25);
        color: var(--on-emerald-chip);
        border: none;
    }
    &.teal {
        background-color: rgb(var(--teal-chip) / 0.25);
        color: var(--on-teal-chip);
        border: none;
    }
    &.cyan {
        background-color: rgb(var(--cyan-chip) / 0.25);
        color: var(--on-cyan-chip);
        border: none;
    }
    &.sky {
        background-color: rgb(var(--sky-chip) / 0.25);
        color: var(--on-sky-chip);
        border: none;
    }
    &.indigo {
        background-color: rgb(var(--indigo-chip) / 0.25);
        color: var(--on-indigo-chip);
        border: none;
    }
    &.violet {
        background-color: rgb(var(--violet-chip) / 0.25);
        color: var(--on-violet-chip);
        border: none;
    }
    &.fuchsia {
        background-color: rgb(var(--fuchsia-chip) / 0.25);
        color: var(--on-fuchsia-chip);
        border: none;
    }
    &.rose {
        background-color: rgb(var(--rose-chip) / 0.25);
        color: var(--on-rose);
        border: none;
    }
    &.gray {
        background-color: rgb(var(--gray-chip) / 0.01);
        color: var(--primary);
        border: 1px solid var(--primary);
    }
    &.filled {
        background-color: var(--chip-background-color);
        color: var(--chip-color);
        border: none;
    }
}
.chip--selected {
    background: var(--secondary-container);
    color: var(--on-secondary-container);
}

.chip--selected:hover {
    background: var(--secondary-container);
    filter: brightness(0.95);
}

.chip--disabled {
    background: var(--layer-surface);
    color: var(--on-layer-background-variant);
    cursor: not-allowed;
    opacity: 0.38;
    pointer-events: none;
}

.chip__avatar {
    height: 24px;
    margin-inline-start: -4px;
    width: 24px;
}

.chip__avatar img {
    border-radius: var(--radius-full);
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.chip__icon {
    color: var(--on-layer-background-variant);
    display: flex;
    font-size: 18px;
    height: 18px;
    margin-inline-start: -2px;
    width: 18px;
}

.chip__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chip__dismiss {
    align-items: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-full);
    color: var(--on-layer-background-variant);
    cursor: pointer;
    display: flex;
    height: 24px;
    justify-content: center;
    margin-inline-end: -4px;
    padding: 0;
    width: 24px;
}

.chip__dismiss:hover {
    background: var(--layer-widget);
}

/* Specific styles for each variant */
.chip--assist {
    background: var(--layer-surface);
}

.chip--filter {
    background: var(--layer-container);
}

.chip--input {
    background: var(--layer-container);
    padding-inline-end: var(--size-2);
}

.chip--suggestion {
    background: var(--layer-surface);
}

time-input {
  display: block;
  position: relative;
}

xtime-input input {
  border-radius: var(--radius-small);
  border: 1px solid var(--outline) !important;
  padding: 1rem;
  width: 100%;
  font-size: var(--text-size-lg);
}

time-input .time-picker__options-wrapper {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--layer-modal);
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  background: var(--layer-background);
  border: 1px solid var(--outline);
  border-radius: var(--radius-small);
  box-shadow: var(--elevation-2);
  margin-top: 2px;
}

time-input .time-picker__options {
  padding: 0;
  margin: 0;
}

time-input .time-picker__item {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--on-layer-background);
  text-decoration: none;
}

xtime-input .time-picker__item:hover {
  background: var(--layer-background-variant);
}
.time-input-container {
  position: relative;
  width: 100%;
}

.time-input-icon {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5rem;
  height: 1.5rem;
  pointer-events: none;
  color: var(--outline);
}
time-input input {
  padding-right: 2.5rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23444444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 24px;
}
.time-picker__item--selected {
  background-color: var(--primary-container);
  color: var(--on-primary-container);
}
[data-color-scheme='dark'] {
  time-input input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23DDDDDD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
  }
}

date-input {
  display: block;
  position: relative;
}


date-input duet-date-picker {
  width: 100%;
}

date-input .duet-date__input {
  padding: var(--inline-space) var(--block-space);
  line-height: var(--font-lineheight-2);
  border-radius: var(--radius-small);
  border: 1px solid var(--outline) !important;
  width: 100%;
}

date-input .duet-date__input:focus {
  outline: none;
  border-color: var(--primary) !important;
  box-shadow: var(--shadow-1);
}

date-input.validation-error .duet-date__input {
  border: 2px solid var(--error) !important;
}
date-input .duet-date__input,
time-input input {
  padding-block: 1rem !important;
  padding-inline: var(--inline-space);
  line-height: var(--font-lineheight-2);
  border-radius: var(--radius-small);
  border: 1px solid var(--outline) !important;
  width: 100%;
}

/* For floating placeholder alignment */
.floating-placeholder date-input .duet-date__input,
.floating-placeholder time-input input {
  padding-top: 1.6rem !important;
  padding-bottom: 0.4rem !important;
}
:root {

}
.duet-date__toggle-icon svg {
  display: none;
}

.duet-date__toggle-icon::after {
  content: '';
  display: block;
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23444444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 14h.01'/%3E%3Cpath d='M8 18h.01'/%3E%3Cpath d='M12 18h.01'/%3E%3Cpath d='M16 18h.01'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
[data-color-scheme='dark'] {
  .duet-date__toggle-icon::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23CCCCCC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 14h.01'/%3E%3Cpath d='M8 18h.01'/%3E%3Cpath d='M12 18h.01'/%3E%3Cpath d='M16 18h.01'/%3E%3C/svg%3E");
  }
}
date-input {
  display: block;
  position: relative;
}


date-input duet-date-picker {
  width: 100%;
}

date-input .duet-date__input {
  padding: var(--inline-space) var(--block-space);
  line-height: var(--font-lineheight-2);
  border-radius: var(--radius-small);
  border: 1px solid var(--outline) !important;
  width: 100%;
}

date-input .duet-date__input:focus {
  outline: none;
  border-color: var(--primary) !important;
  box-shadow: var(--shadow-1);
}

date-input.validation-error .duet-date__input {
  border: 2px solid var(--error) !important;
}
date-input .duet-date__input,
time-input input {
  padding-block: 1rem !important;
  padding-inline: var(--inline-space);
  line-height: var(--font-lineheight-2);
  border-radius: var(--radius-small);
  border: 1px solid var(--outline) !important;
  width: 100%;
}

.floating-date-time {
  position: relative;
  margin-block: var(--size-1);
  flex: 1;
}

.floating-date-time label {
  position: absolute;
  top: 0.3rem;
  left: 0.5em;
  transform: scale(0.8);
  transform-origin: 0 0;
  z-index: 1;
  color: var(--outline);
  pointer-events: none;
}

.floating-date-time time-input input,
.floating-date-time date-input .duet-date__input {
  padding-top: 1.6rem !important;
  padding-bottom: 0.4rem !important;
  border: 1px solid var(--outline) !important;
  border-radius: var(--radius-small);
}

.floating-date-time.validation-error time-input input,
.floating-date-time.validation-error date-input .duet-date__input {
  border: 2px solid var(--error) !important;
}

.duet-date__toggle-icon svg {
  display: none;
}

.duet-date__toggle-icon::after {
  content: '';
  display: block;
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23444444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 14h.01'/%3E%3Cpath d='M8 18h.01'/%3E%3Cpath d='M12 18h.01'/%3E%3Cpath d='M16 18h.01'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
[data-color-scheme='dark'] {
  .duet-date__toggle-icon::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23CCCCCC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 14h.01'/%3E%3Cpath d='M8 18h.01'/%3E%3Cpath d='M12 18h.01'/%3E%3Cpath d='M16 18h.01'/%3E%3C/svg%3E");
  }
}
date-input .duet-date__input:focus-within,
date-input .duet-date__input:focus {
outline: none;
border-color: var(--primary) !important;
box-shadow: 0 0 0 2px var(--primary-container);
}
/* Focus styling for all form elements */
input:focus,
textarea:focus,
select:focus,
time-input input:focus,
date-input .duet-date__input:focus {
outline: none;
border-color: var(--primary) !important;
box-shadow: 0 0 0 1px var(--primary-container);
}

/* Specifically for date input to ensure it matches */
date-input .duet-date__input:focus-within {
outline: none;
border-color: var(--primary) !important;
box-shadow: 0 0 0 1px var(--primary-container);
}
[data-controller="event-time"] {
  display: flex;
  flex-wrap: wrap;
}

[data-controller="event-time"] .floating-date-time:first-child {
  flex-basis: 100%;
  margin-bottom: var(--size-2);
}

@media (min-width: 600px) {
  [data-controller="event-time"] .floating-date-time:first-child {
    flex-basis: auto;
    margin-bottom: 0;
  }
}
/* Desktop Navigation Sidebar Styles */

/* Fixed positioning for sidebar */
.navigation-sidebar {
  width: var(--size-14);
  min-width: var(--size-14);
  background: var(--layer-container);
  border-right: 1px solid var(--outline-variant);
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: var(--layer-standard);
  transition: width 0.3s ease, min-width 0.3s ease;
  overflow-x: hidden;
}

/* Collapsed rail mode */
.navigation-sidebar.xrail {
  width: 72px;
  min-width: 72px;
}

/* Header section (non-scrollable) */
.nav-header {
  flex: 0 0 auto; /* Fixed height, won't shrink or grow */
  padding: var(--size-4);
  border-bottom: 1px solid var(--outline-variant);
}

.app-logo {
  height: 48px;
  width: 48px;
}

.nav-top-icons {
  display: flex;
  justify-content: space-between;
  margin-top: var(--size-3);
}

.nav-top-icons .nav-link {
  padding: var(--size-2);
  margin: 0;
}

/* Navigation links (scrollable) */
.nav-links {
  display: flex;
  flex-direction: column;
  padding: var(--size-4);
  flex: 1; /* Takes remaining space */
  overflow-y: auto; /* Enables scrolling for nav links */
}

.nav-link {
  display: block;
  text-decoration: none;
  color: var(--on-layer-background-variant);
  padding: var(--size-2) var(--size-3);
  border-radius: 8px;
  margin-bottom: var(--size-2);
  transition: background-color 0.2s, color 0.2s;
}

.nav-link:hover {
  background-color: var(--layer-widget);
  color: var(--on-layer-background);
}

.nav-link.active {
  background-color: var(--primary-container);
  color: var(--on-primary-container);
}

.nav-link-content {
  display: flex;
  align-items: center;
  gap: var(--size-3);
}

.nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.nav-label {
  font-size: var(--font-size-body-medium);
}

/* User section at bottom (non-scrollable) */
.nav-footer {
  flex: 0 0 auto; /* Fixed height, won't shrink or grow */
  padding: var(--size-4);
  border-top: 1px solid var(--outline-variant);
}

/* User container */
.sidebar-user-container {
  position: relative;
  cursor: pointer;
}

/* Dropdown menu */
.user-dropdown-menu {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  background-color: var(--layer-widget);
  border-radius: var(--radius-small);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  z-index: var(--layer-modal);
  margin-bottom: var(--size-2);
}

.user-dropdown-header {
  padding: var(--size-4);
}

.user-name-large {
  font-weight: var(--font-weight-6);
  font-size: var(--font-size-3);
  color: var(--on-layer-background);
  margin-bottom: var(--size-1);
}

.user-email-large {
  font-size: var(--font-size-2);
  color: var(--on-layer-background-variant);
}

.dropdown-divider {
  height: 1px;
  background-color: var(--outline-variant);
  margin: 0;
}

.dropdown-menu-item {
  display: flex;
  align-items: center;
  gap: var(--size-3);
  padding: var(--size-3) var(--size-4);
  color: var(--on-layer-background);
  text-decoration: none;
  transition: background-color 0.2s var(--ease-standard);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-size: var(--font-size-2);
}

.dropdown-menu-item:hover {
  background-color: var(--layer-surface);
}

/* User info display */
.sidebar-user-trigger {
  display: flex;
  align-items: center;
  padding: var(--size-2);
  gap: var(--size-3);
  border-radius: var(--radius-small);
  transition: background-color 0.2s var(--ease-standard);
}

.sidebar-user-trigger:hover {
  background-color: var(--layer-widget);
}

.sidebar-user-info {
  flex: 1;
  min-width: 0;
}

.sidebar-user-name {
  font-weight: var(--font-weight-5);
  font-size: var(--font-size-2);
  color: var(--on-layer-background);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-email {
  font-size: var(--font-size-1);
  color: var(--on-layer-background-variant);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-menu-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-layer-background-variant);
  transform: rotate(180deg);
  transition: transform 0.2s var(--ease-standard);
}

.open .user-menu-arrow {
  transform: rotate(0deg);
}

/* Main content wrapper */
.main-content-wrapper {
  flex: 1;
  overflow-y: auto;
  margin-left: var(--size-14); /* Match the sidebar width */
  width: calc(100% - var(--size-14)); /* Calculate remaining width */
  transition: margin-left 0.3s ease, width 0.3s ease; /* Smooth transition */
}

/* Rail mode adjustments */
.navigation-sidebar.xrail .nav-label {
  display: none; /* Hide labels in rail mode */
}

.navigation-sidebar.xrail .nav-link-content {
  justify-content: center; /* Center icons in rail mode */
}

.navigation-sidebar.xrail .nav-header {
  justify-content: center;
  padding: var(--size-2);
}

/* Update main content when sidebar is in rail mode */
.navigation-sidebar.xrail + .main-content-wrapper {
  margin-left: 72px; /* Match rail width */
  width: calc(100% - 72px); /* Calculate remaining width */
}

/* Mobile responsiveness */
@media (max-width: 39.9375em) {
  .navigation-sidebar {
    display: none;
  }
  
  .main-content-wrapper {
    margin-left: 0;
    width: 100%;
  }
}
dialog {
    /* MD3 modal size specs */
    max-width: min(560px, 98%); /* MD3 standard width */
    min-height: 160px; /* MD3 minimum height */
    max-height: calc(
        100vh - 96px
    ); /* MD3 recommends margin from screen edges */

    height: fit-content;
    width: fit-content;

    /* MD3 surface and spacing */
    padding: var(--size-4);
    border: none;
    border-radius: var(--radius-x-large);
    background: var(--layer-container);
    color: var(--on-layer-background);
    box-shadow: var(--elevation-3); /* MD3 spec for modals */

    /* Positioning */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    z-index: var(--layer-modal);

    /* Layout */
    &[open] {
        display: flex;
        flex-direction: column;
        gap: var(--size-3);
    }

    /* Modal header - MD3 specs */
    .modal_header {
        display: flex;
        align-items: center;
        gap: var(--size-3);
        padding-block-end: var(--size-3);

        h2 {
            flex: 1;
            margin: 0;
            padding: 0;
            font-size: var(--font-size-headline-small); /* MD3 typography */
            line-height: var(--font-lineheight-2);
            font-weight: var(--font-weight-6);
            color: var(--on-layer-background);
        }
    }

    /* Modal body - MD3 specs */
    .modal_body {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        padding-block: var(--size-2);
        color: var(--on-layer-background-variant);
        font-size: var(--font-size-body-large);
        line-height: var(--font-lineheight-3);
    }

    /* Form specific styles */
    form {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 300px;
        gap: var(--size-3);
    }

    /* Actions container - MD3 specs */
    .form-actions {
        display: flex;
        justify-content: flex-end;
        gap: var(--size-2);
        margin-top: auto;
        padding-block-start: var(--size-3);
        border-top: 1px solid var(--outline-variant);
    }
}

/* Scrim/Backdrop - MD3 specs */
dialog::backdrop {
    background: color-mix(in srgb, var(--inverse-primary), transparent 50%); /* MD3 scrim opacity */
    position: fixed;
    inset: 0;
    z-index: var(--layer-scrim);
}

/* Alternative scrim for browsers not supporting dialog */
.scrim {
    background: color-mix(in srgb, var(--inverse-primary), transparent 50%); /* MD3 scrim opacity */
    position: fixed;
    inset: 0;
    z-index: var(--layer-scrim);
    display: none;

    &.active {
        display: block;
    }
}
/* 
 * Form Styles - Consolidated
 * This file organizes all form-related styles using a class-based approach to 
 * avoid specificity conflicts and provide clear distinctions between form types.
 */

/* ===== Base Form Components ===== */

/* Form Inputs */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="time"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="color"],
textarea,
select {
    background-color: inherit;
    color: inherit;
    border: none;
    padding-block: 1rem;
    font-family: inherit;
    font-size: var(--font-size-body-large);
    width: 100%;
    
    &.outlined {
        border-radius: var(--radius-small);
        border: 1px solid var(--outline);
        padding: var(--inline-space) var(--block-space);
    }
}

/* Custom checkbox styling */
input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    border: 2px solid var(--outline-variant);
    border-radius: var(--radius-x-small);
    appearance: none;
    position: relative;
    vertical-align: middle;
}
   
input[type="checkbox"]:checked {
    background: var(--primary);
    border-color: var(--primary);
}
   
input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid var(--on-primary);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
   
input[type="checkbox"]:hover {
    border-color: var(--outline);
}
input[type="file"] {
    padding: var(--size-1);
    border: 1px solid var(--outline);
    border-radius: var(--radius-small);
    display: flex;
    align-items: center;
  }
  
  input[type="file"]::file-selector-button {
    background-color: var(--layer-widget);
    color: var(--on-layer-background);
    border: none;
    padding: 0.75rem 1rem;
    margin-right: 1rem;
    border-radius: var(--radius-full);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
  }
  
  input[type="file"]::file-selector-button:hover {
    background-color: var(--layer-widget);
  }
  
/* Select Input */
.input-select,
.form-select {
    background: var(--layer-background-variant);
    padding: var(--inline-space) var(--inline-space);
    border-radius: var(--radius-small);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    &.outlined {
        border: 1px solid var(--outline);
        border-radius: var(--radius-medium);
        padding: var(--inline-space) var(--block-space);
    }
}

/* ===== Form Control Elements ===== */

.form-label {
    display: block;
    margin-bottom: var(--inline-space);
    font-weight: var(--font-weight-5);
    color: var(--on-layer-background);
}

.form-control {
    margin-bottom: var(--block-space);
}
.button_to {
    pointer-events: auto;
    position: relative;
}

.form-input {
    border-radius: var(--radius-medium);
    border: 1px solid var(--outline) !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: var(--on-layer-background);
    display: block;
    font-size: var(--font-size-body-large);
    line-height: var(--font-lineheight-2);
    padding: 1rem;
    transition:
        border-color 0.15s ease-in-out 0s,
        box-shadow 0.15s ease-in-out 0s;
    width: 100%;
}

.form-textarea {
    border-radius: var(--radius-medium);
    border: 1px solid var(--outline) !important;
    display: block;
    min-height: 100px;
    width: 100%;
    padding: var(--inline-space);
        background: var(--layer-background);
    color: var(--on-layer-background);
}

.supporting-text {
    font-size: var(--font-size-body-small);
    color: var(--outline);
    padding: 0 var(--inline-space);
    display: block;
}

/* ===== Form Layout Types ===== */

/* Standard Form - Default layout for most forms */
.standard-form {
    display: flex;
    flex-direction: column;
    gap: var(--size-3);
    width: 100%;
    
    .form-actions {
        display: flex;
        justify-content: flex-end;
        gap: var(--size-2);
        margin-top: var(--size-3);
        padding-top: var(--size-3);
        border-top: 1px solid var(--outline-variant);
    }
}

/* Boost Form - Compact form for quick actions */
.xboost-form {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--size-2);
    width: 400px;
    /* flex-direction: row; */
    padding: var(--size-2);
    /* background: var(--layer-surface); */
    background: red;
    border-radius: var(--radius-full);
    
    input, textarea {
        flex: 1;
        min-height: auto; 
        background: transparent;
        padding: var(--size-2);
    }
    
    .form-actions {
        display: flex;
        justify-content: flex-end;
    }
    
    button {
        flex-shrink: 0;
    }
}

/* Composer Form - For rich text editing */
.composer-form {
    display: flex;
    flex-direction: column;
    width: 100%;
    
    trix-editor {
        min-height: 24px;
        height: fit-content;
        max-height: 40vh;
        overflow-y: auto;
        overflow-x: hidden;
        resize: none;
        transition: height 0.1s ease-out;
        border: 1px solid var(--outline-variant);
        border-radius: var(--radius-small);
        padding: var(--size-2);
        
        &.full-height {
            height: 100%;
            max-height: 100%;
        }
    }
    
    .form-actions {
        display: flex;
        justify-content: flex-end;
        padding-top: var(--size-2);
    }
}

/* Modal Form - For forms in dialogs */
.modal-form {
    display: flex;
    flex-direction: column;
    gap: var(--size-3);
    min-height: 200px;
    
    .form-actions {
        display: flex;
        justify-content: flex-end;
        gap: var(--size-2);
        margin-top: auto;
        padding-top: var(--size-3);
        border-top: 1px solid var(--outline-variant);
    }
}

/* ===== Specialized Form Components ===== */

/* Floating placeholder */
.floating-placeholder {
    position: relative;
    margin-block: var(--size-1);
    width: 100%;
    
    label {
        transition: transform 0.2s cubic-bezier(0.2, 1.3, 0.7, 1);
        position: absolute;
        top: 1rem;
        left: 0.5em;
        transform-origin: 0 0;
        visibility: hidden;
        font-weight: normal;
        pointer-events: none;
        color: var(--on-layer-background-variant);
        text-align: left;
        
        &:hover {
            cursor: text;
        }
    }
    input {
        border-radius: var(--radius-small);
        padding-inline: var(--inline-space);
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
        border: 1px solid var(--outline) !important;
        background: var(--layer-background);
        color: var(--on-layer-background);
        width: 100%;
        &:not(:placeholder-shown) {
            padding-top: 1.6rem !important;
            padding-bottom: 0.4rem !important;
            + label {
                transform: scale(0.8) translate(0.2rem, -0.75rem);
                visibility: visible;
            }
        }
        
        &:focus {
            border-color: var(--primary) !important;
            outline: none;
            
            + label {
                transform: scale(0.8) translate(0.2rem, -0.75rem);
                visibility: visible;
                color: var(--primary);
            }
        }
    }
}

/* ===== Form Validation & Errors ===== */

.error-banner {
    background: var(--error-container);
    padding: var(--inline-space);
    border-radius: var(--inline-space-half);
    color: var(--on-error-container);
    margin-bottom: var(--size-3);
}

.error_explanation {
    background-color: var(--error-container);
    padding: var(--inline-space) var(--block-space);
    border-radius: var(--inline-space);
    color: var(--on-error-container);
    margin-bottom: var(--size-3);
    ul {
        color: var(--on-error-container);
        margin: 0 0 var(--size-3) 0;
        padding-left: var(--size-4);
    }
}

input.validation-error,
textarea.validation-error,
select.validation-error {
    border: 1px solid var(--error) !important;
}

.validation-error {
    border: 1px solid var(--error) !important;
}

/* Field validation message */
.field-error {
    color: var(--error);
    font-size: var(--font-size-body-small);
    margin-top: var(--size-1);
}

/* ===== Legacy Form Classes ===== */
/* The following classes are from the older form.css file */

/* Margin utility for form elements */
.margin-block-inline-half {
    margin-block: var(--inline-space-half);
}

/* Floating input padding */
.floating-pad {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

/* Date/time picker styling */
.picker {
    background: var(--layer-background);
    border-radius: 0.8rem;
    border: 1px solid var(--outline-variant);
    left: calc(50% + 1em);
    transform: translateX(-50%);
    min-width: 48rem;
    padding: 2rem;
    box-shadow: 0 0 4rem oklch(var(--lch-always-black) / 0.2);
    text-align: left;
}

/* Form span element styling */
form .span {
    width: var(--size-content-1);
    display: inline-block;
}

/* Legacy form actions - consider using .form-actions instead */
form .actions {
    display: flex;
    justify-content: end;
}

form .actions div {
    margin-left: var(--size-2);
}

/* ===== Direct Form Element Styles from Legacy ===== */
/* These styles apply to form elements directly */
form {
    flex: 1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    &.button {
        flex: 0;
    }
}

form div:has(trix-editor) {
    flex: 1;
    flex-grow: 1;
}

form trix-toolbar {
    margin-block-start: var(--block-space);
}

/* Legacy Trix editor base styling - merged with composer-form trix-editor */
trix-editor {
    width: 100%;
    height: 100%;
    min-height: 40vh;
}


/* app/assets/stylesheets/components/modal.css */
.modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--layer-modal);
    padding: var(--size-4);
  }
  
  .modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: -1;
  }
  
  .modal-dialog {
    background-color: var(--layer-background);
    border-radius: var(--radius-medium);
    box-shadow: var(--elevation-3);
    width: 100%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    animation: modal-enter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
  }
  
  .modal-small {
    max-width: 400px;
  }
  
  .modal-medium {
    max-width: 560px;
  }
  
  .modal-large {
    max-width: 800px;
  }
  
  .modal-fullscreen {
    max-width: none;
    width: 100%;
    height: 100%;
    max-height: 100vh;
    border-radius: 0;
    margin: 0;
  }
  
  .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--size-4);
    border-bottom: 1px solid var(--outline-variant);
  }
  
  .modal-title {
    font-size: var(--font-size-title-large);
    font-weight: 500;
    margin: 0;
    color: var(--on-layer-background);
  }
  
  .modal-close-button {
    background: transparent;
    border: none;
    color: var(--on-layer-background-variant);
    cursor: pointer;
    border-radius: var(--radius-full);
    padding: var(--size-2);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .modal-close-button:hover {
    background-color: var(--layer-background-variant);
  }
  
  .modal-content {
    padding: var(--size-4);
    overflow-y: auto;
    flex: 1;
    color: var(--on-layer-background);
  }
  
  .modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--size-2);
    padding: var(--size-3) var(--size-4);
    border-top: 1px solid var(--outline-variant);
  }
  
  .modal-container.closing .modal-dialog {
    animation: modal-exit 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  @keyframes modal-enter {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes modal-exit {
    from {
      opacity: 1;
      transform: translateY(0);
    }
    to {
      opacity: 0;
      transform: translateY(16px);
    }
  }
  
  body.modal-open {
    overflow: hidden;
  }
/* ==========================================================================
   Mobile Navigation (Updated to MD3 Navbar Spec May 2025)
   ========================================================================== */

.mobile-navigation {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px; /* Updated to MD3 spec: 64dp */
    z-index: var(--layer-top);
    box-shadow: var(--elevation-2); /* Nav bar container elevation: md.sys.elevation.level2 */
}

.navigation-bar {
    display: flex;
    justify-content: space-around;
    height: 100%;
    width: 100%;
    background: var(--layer-container); /* Nav bar container color */
    border-radius: 0; /* Nav bar shape: md.sys.shape.corner.none */

    .navigation-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        color: var(--on-layer-background-variant); /* Nav bar item inactive label and icon */
        text-decoration: none;
        padding: var(--size-2) 0;
        transition: all 0.2s var(--ease-standard);
        position: relative;
        font-size: 12px; /* Nav bar item label font size: 12sp */
        /* Font-tracking */
        letter-spacing: 0.5px;;
        border-radius: var(--radius-full); /* Nav bar item shape: md.sys.shape.corner.full */
        .filled {
            border-radius: var(--radius-large);
            background-color: var(--primary); /* Nav bar item filled color */
            color: var(--on-primary); /* Nav bar item filled label text color */
        }
        
        svg {
            width: 24px; /* Nav bar item icon size: 24dp */
            height: 24px;
            margin-bottom: 4px; /* Space between icon and label: 4dp */
        }
        
        span {
            font-size: var(--font-size-label-medium);
            text-transform: capitalize;
        }
        
        &.active {
            color: var(--secondary); /* Nav bar item active label text color */
            
            svg {
                color: var(--on-secondary-container); /* Nav bar item active icon color */
            }
            
            &::before {
                content: "";
                position: absolute;
                top: 10px;
                left: 50%;
                transform: translateX(-50%);
                width: 56px;
                height: 32px;
                background-color: var(--secondary-container); /* Nav bar item indicator color */
                border-radius: var(--radius-full);
                z-index: -1;
            }
        }

        /* State interactions */
        &:not(.active):hover {
            background-color: transparent;
            
            &::after {
                content: "";
                position: absolute;
                inset: 8px;
                background-color: var(--on-layer-background-variant);
                opacity: 0.08;
                border-radius: var(--radius-full);
                z-index: -1;
            }
        }
        
        &:not(.active):focus-visible {
            outline: none;
            
            &::after {
                content: "";
                position: absolute;
                inset: 8px;
                background-color: var(--on-layer-background-variant);
                opacity: 0.12;
                border-radius: var(--radius-full);
                z-index: -1;
            }
        }
        
        &:not(.active):active::after {
            content: "";
            position: absolute;
            inset: 8px;
            background-color: var(--on-layer-background-variant);
            opacity: 0.12;
            border-radius: var(--radius-full);
            z-index: -1;
        }
    }
}


/* Medium screen adaptation for horizontal nav items */
@media (min-width: 600px) and (max-width: 1023px) {
    .mobile-navigation {
        height: 64px;
    }
    
    .bottom-nav-item {
        flex-direction: row;
        justify-content: center;
        gap: 4px;
        
        svg {
            margin-bottom: 0;
        }
        
        &.active::before {
            top: 50%;
            transform: translate(-50%, -50%);
            width: calc(100% - 16px);
            max-width: 80px;
            height: 40px;
        }
    }
}
.options-menu {
    position: relative;
  }
  
  .options-button {
    background: none;
    border: none;
    color: var(--on-layer-background-variant);
    cursor: pointer;
    font-size: 20px;
    padding: 5px;
    appearance: none;
    list-style: none;
  }
  
  .options-button::-webkit-details-marker {
    display: none;
  }
  
  .options-content {
    position: absolute;
    right: 0;
    top: 30px;
    background: var(--layer-container);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    min-width: 180px;
    z-index: 10;
    overflow: hidden;
  }
  
  .options-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--on-layer-background-variant);
    width: 24px;
    height: 24px;
  }
  
  .options-close::before,
  .options-close::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 2px;
    background: currentColor;
    top: 50%;
    left: 50%;
  }
  
  .options-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  
  .options-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  
  .options-action {
    display: block;
    padding: 10px 16px;
    color: var(--on-layer-background);
    text-decoration: none;
    font-size: var(--typescale-body-medium-size);
  }
  
  .options-action:hover {
    background: var(--layer-widget);
  }
.snackbar {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--inverse-surface);
    color: var(--on-inverse-surface);
    border-radius: var(--radius-small);
    padding: 16px;
    width: min(600px, 95%);
    text-align: center;
    z-index: var(--layer-toast);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    svg {
        color: var(--on-inverse-surface);
    }
}
@media (min-width: 48em) {
    .snackbar {
        bottom: 16px;
        
    }
}

.snackbar__content {
    display: inline-block;
}
.banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    min-height: 3rem;
    border-radius: var(--radius-small);
    background: rgb(var(--layer-background));
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.banner--success {
    background: rgb(var(--success-container));
    color: rgb(var(--on-success-container));
}

.banner--error {
    background: rgb(var(--error-container));
    color: rgb(var(--on-error-container));
}

.banner__content {
    flex: 1;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.banner__action {
    margin-left: 1rem;
}

/* ===== Stats Row ===== */
.stats-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: var(--size-5) var(--size-3);
  background-color: var(--layer-surface);
  border-radius: var(--radius-medium);
  text-align: center;
  gap: var(--size-5);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 120px;
}

.stat-value {
  font-size: var(--font-size-headline-large);
  font-weight: var(--font-weight-7);
  color: var(--on-layer-background);
  margin-bottom: var(--size-2);
  line-height: 1.1;
}

.stat-label {
  font-size: var(--font-size-body-medium);
  color: var(--on-layer-background-variant);
  max-width: 160px;
}
/* ==========================================================================
   Material Design 3 Toolbar Component
   ========================================================================== */

.toolbar {
    align-items: center;
    background-color: var(--layer-container);
    box-sizing: border-box;
    color: var(--on-layer-background-variant);
    border-radius: var(--radius-full);
    padding: 8px;
    display: flex;
    height: 64px;
    justify-content: space-between;
    transition: all 0.2s var(--ease-standard);    
    /* width: 100%; */
    width: fit-content;
    margin-inline: auto;
    flex-direction: row;

    .button {
        margin-inline: 4px;
    }

    &.vibrant {
        background-color: var(--primary-container);
        color: var(--on-primary-container);
    }

    &.docked {
        background-color: var(--layer-container);
        padding-inline-start: 16px;
        padding-inline-end: 16px;
        border-radius: 0;
        width: 100%;
        .button {
            margin-inline: 0px;
        }
    }


    &.floating {
        border-radius: var(--radius-full);
        padding-inline-start: 8px;
        padding-inline-end: 8px;
        
        margin: 0 16px 40px 16px;
        box-shadow: var(--elevation-3);
        background-color: var(--layer-container);

        &.vibrant {
            background-color: var(--primary-container);
        }
        &.margin-none {
            margin: 0;
        }
    }

    &.vertical {
        flex-direction: column;
        width: 64px;
        height: auto;
    }

    /* Toolbar Sections */
    .leading-section {
        display: flex;
        align-items: center;
        padding-inline-end: 16px;
    }

    .trailing-section {
        display: flex;
        align-items: center;
        gap: 4px; /* min-space-between-actions */
        padding-inline-start: 16px;
    }

    /* Toolbar Button */
    .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 48px;
        min-width: 48px;
        border-radius: var(--radius-full);
        border: none;
        background-color: transparent;
        cursor: pointer;
        transition: all 0.2s var(--ease-standard);
        position: relative;
        overflow: hidden;
        padding: 0 var(--size-2);

        svg {
            height: 24px;
            width: 24px;
        }

        .label {
            margin-inline-start: var(--size-2);
            font-size: var(--font-size-body-large);
            font-weight: var(--font-weight-5);
        }

        &.selected {
            /* Selected state styling */
        }

        &:disabled {
            opacity: 0.38;
            pointer-events: none;
        }

        /* State layers for interaction */
        &:not(:disabled):hover::after,
        &:not(:disabled):focus-visible::after,
        &:not(:disabled):active::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: var(--radius-full);
            pointer-events: none;
        }

        &:not(:disabled):hover::after {
            opacity: 0.08; /* hover state layer opacity */
        }

        &:not(:disabled):focus-visible::after {
            opacity: 0.12; /* focus state layer opacity */
        }

        &:not(:disabled):active::after {
            opacity: 0.12; /* pressed state layer opacity */
        }
    }
}

/* Standard toolbar color variants */
.toolbar {
    .button {
        color: var(--on-layer-background-variant);
        &.filled {
            background-color: var(--primary);
            color: var(--on-primary);
        }

        &.selected {
            background-color: var(--secondary-container);
            color: var(--on-secondary-container);

            .label {
                color: var(--on-secondary-container);
            }
        }

        &:disabled {
            color: var(--on-layer-background);
        }

        &:not(:disabled):hover::after,
        &:not(:disabled):focus-visible::after,
        &:not(:disabled):active::after {
            background-color: var(--on-layer-background-variant);
        }

        &.selected:not(:disabled):hover::after,
        &.selected:not(:disabled):focus-visible::after,
        &.selected:not(:disabled):active::after {
            background-color: var(--on-secondary-container);
        }
    }
}

/* Vibrant toolbar color variants */
.toolbar.vibrant {
    background-color: var(--primary-container);
    color: var(--on-primary-container);
    .button {
        color: var(--on-primary-container);
        &.filled {
            background-color: var(--primary-container);
            color: var(--on-primary-container);
        }

        .label {
            color: var(--on-primary-container);
        }

        &.selected {
            background-color: var(--layer-container);
            color: var(--on-layer-background);

            .label {
                color: var(--on-layer-background);
            }
        }

        &:disabled {
            color: var(--on-layer-background);
        }

        &:not(:disabled):hover::after,
        &:not(:disabled):focus-visible::after,
        &:not(:disabled):active::after {
            background-color: var(--on-primary-container);
        }

        &.selected:not(:disabled):hover::after,
        &.selected:not(:disabled):focus-visible::after,
        &.selected:not(:disabled):active::after {
            background-color: var(--on-layer-background);
        }
    }
}

/* Toolbar with FAB container */
.toolbar-with-fab-container {
    position: relative;
    display: flex;
    align-items: center !important;
    gap: 8px; /* Space between toolbar and FAB */
    margin-bottom: 40px;
    &.vibrant .toolbar {
        background-color: var(--primary-container);
        color: var(--on-primary-container);
    }
    &.vibrant .fab {
        background-color: var(--tertiary-container);
        color: var(--on-tertiary-container);
    }
}

.toolbar-with-fab-container .toolbar {
    flex: 1;
    margin: 0;
    
}

.toolbar-with-fab-container .fab {
    z-index: var(--layer-top);
    background-color: var(--secondary-container);
    color: var(--on-secondary-container);
    position: relative;

}

/* Responsive adjustments */
@media (max-width: 599px) {
    .toolbar.floating {
        margin-inline: 8px;
    }
    
    .toolbar.docked {
        padding-inline: 8px;
    }
}

@media (min-width: 600px) {
    .toolbar .trailing-section {
        gap: 8px;
    }
}

@media (min-width: 1024px) {
    .toolbar .trailing-section {
        gap: 16px;
    }
}
.flash {
  pointer-events: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: flex-end;
  width: 100%;
  padding: var(--block-space);
  z-index: 2000;
}

.flash [data-reveal-target="item"] {
  background-color: var(--md-sys-color-primary-container);
  border-radius: var(--radius-medium);
  border: 1px solid var(--md-sys-color-primary);
  box-shadow: var(--elevation-5);
  color: var(--md-sys-color-on-primary-container);
  max-width: 32rem;
  opacity: 1;
  overflow: hidden;
  padding: var(--inline-space);
  pointer-events: auto;
  position: relative;
  transform: translateY(0);
  transition-duration: 1s;
  transition-property: all;
  transition-timing-function: ease-in-out;
  width: 100%;
  z-index: 2000;

  .dismiss {
    position: absolute;
    top: 0;
    right: 0;
    padding: var(--inline-space);
  }
}

/* Keyframes for slide-up and fade-in effect */
@keyframes slideAndFade {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.notification {
  animation: slideAndFade 0.5s ease-in-out;
  background-color: var(--secondary);
  color: var(--on-secondary);
  margin: var(--block-space);
  border-radius: var(--radius-medium);
  padding: var(--block-space);
  z-index: var(--layer-important);
}
.menu-content {
    --menu-width: var(--size-content-2);
    background-clip: padding-box;
    background-color: var(--layer-container);
    border-radius: var(--radius-small);
    border: 1px solid var(--outline-variant);
    box-shadow: var(--elevation-2);
    color: var(--on-surface-container);
    /* display: none; */
    font-size: var(--text-small);
    min-width: var(--menu-width);
    padding-block: var(--inline-space);
    position: absolute;
    z-index: var(--layer-important);

  }
.metadata time[data-twelve-hour-time-format],
.metadata time[data-twenty-four-hour-time-format] {
  display: none;
}

/* Show the twelve-hour format if the parent has data-time-format="twelve_hour" */
[data-time-format="twelve_hour"] time[data-twelve-hour-time-format] {
  display: inline;
}

/* Show the twenty-four-hour format if the parent has data-time-format="twenty_four_hour" */
[data-time-format="twenty_four_hour"] time[data-twenty-four-hour-time-format] {
  display: inline;
}
header#this {
  a {
    text-decoration: none;
  }

  nav {
    ul {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0;
      margin: 0;
      list-style: none;

      li {
        padding: var(--inline-space);
        font-size: var(--font-size-fluid-1);

        a {
          font-weight: 800;

          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }
}

.workspace-nav.desktop-only {
  display: flex;
  justify-content: space-between;
  max-height: 60px;

  .logo {
    flex-basis: 0;
    flex-grow: 1;
    justify-content: flex-start;
    
    a {
      align-items: center;
      color: var(--primary);
      display: flex;
      font-weight: 800;
      margin-left: var(--block-space);
      text-decoration: none;
      img, svg {
        display: inline-block;
        stroke: var(--primary);
      }
    }
  }

  nav {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 2 0 auto;

    ul {
      display: flex;
      list-style-type: none;
      padding: 0;
      margin: 0;

      li {
        margin: 0 10px;
        a {
          display: inline-flex;
          align-items: center;
          text-decoration: none;
          gap: var(--inline-space-half);
          color: var(--primary);
          font-weight: 600;
        }
      }
    }
  }

  .settings {
    flex-grow: 1;
    flex-basis: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}



header#site {
  backdrop-filter: blur(5px);
  width: 100%;
  top: 0;
  margin: 0;
  padding-inline: var(--block-space);
  z-index: 500;
}

#workspace-nav {
  margin: 0;
  background-color: var(--layer-container);
  box-shadow: var(--elevation-1);
  min-height: calc(100vh);
  min-width: 300px;
  padding: var(--block-space);

  ul {
    list-style: none;
    margin: 0;
    padding-inline: 0;
    padding-block: var(--block-space);

    li {
      margin: 0;
      padding: var(--inline-space-half) var(--block-space);

      a {
        text-decoration: none;
        color: var(--on-layer-background-variant);

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}


    /* Your exact CSS with native scroll marker support added */
    @layer utilities {
        .new_carousel {
            anchor-name: --carousel;
            container-type: inline-size;
            overflow-x: auto;
            overscroll-behavior-x: contain;
            scroll-snap-type: x mandatory;
            scrollbar-width: none;
            background: var(--layer-surface);
            display: grid;
            grid-auto-flow: column;
            gap: var(--size-5);
            padding: var(--size-3);
            position: relative;
            margin-block-start: var(--block-space);
            margin-block-end: var(--block-space-double);
            
            &:focus-visible {
                scrollbar-color: var(--primary) transparent;
                outline: none;
            }

            @media (prefers-reduced-motion: no-preference) {
                scroll-behavior: smooth;
            }
        }

        .carousel__slide {
            scroll-snap-align: start;
            
            :where(.carousel--offscreen-inert) & {
                animation: offscreen-inert linear both;
                animation-timeline: view(x);
            }

            :where(.carousel--unsnapped-inert) & {
                container-type: scroll-state;
                > * {
                    @container not scroll-state(snapped) {
                        interactivity: inert;
                    }
                }
            }
        }

        /* Native scroll markers - this is what was missing! */
        .carousel--scroll-markers {
            scroll-marker-group: before;
            
            &::scroll-marker-group {
                position: absolute;
                position-anchor: --carousel;
                container: marker-group / inline-size;
                display: grid;
                gap: var(--size-2);
                place-content: safe center;
                box-sizing: border-box;
                border-radius: var(--radius-full);
                scrollbar-width: none;
                scroll-behavior: smooth;
                
                /* Horizontal positioning */
                inline-size: 100%;
                max-inline-size: min(90cqi, 210px);
                overflow-x: auto;
                scroll-snap-type: x mandatory;
                overscroll-behavior-x: contain;
                padding: 5px 10px;
                scroll-padding-inline: 10px;
                mask: linear-gradient(to right, transparent 0, black 10px, black calc(100% - 10px), transparent 100%);
                top: anchor(bottom);
                left: calc(anchor(left) - 10%);
                right: calc(anchor(right) - 10%);
                margin-block: var(--size-3);
                grid-auto-columns: var(--size-3);
                grid-auto-flow: column;
                justify-self: center;
            }

            .carousel__slide {
                &::scroll-marker {
                    content: "" / attr(data-label);
                    scroll-snap-align: center;
                    aspect-ratio: 1;
                    border: 1px solid var(--outline);
                    border-radius: var(--radius-full);
                    cursor: pointer;
                    text-decoration: none;
                    -webkit-tap-highlight-color: transparent;
                    transition: transform 0.3s var(--ease-standard), outline-offset 0.25s var(--ease-3);
                    animation: scale-in-and-out linear both;
                    animation-timeline: view(x);
                    interactivity: auto;
                }

                &::scroll-marker:target-current {
                    background: var(--primary);
                    border-color: var(--primary);
                }

                &::scroll-marker:not(:active):hover {
                    transform: scale(1.25);
                }

                &::scroll-marker:not(:active):focus {
                    outline: 2px solid var(--primary);
                    outline-offset: 2px;
                }
            }
            
            /* Fallback scroll markers using regular CSS */
            &::after {
                content: '';
                position: absolute;
                bottom: -60px;
                left: 50%;
                transform: translateX(-50%);
                display: flex;
                gap: var(--size-2);
                padding: 10px;
                background: rgba(0, 0, 0, 0.1);
                border-radius: var(--radius-medium);
                backdrop-filter: blur(10px);
            }
        }

        /* Individual scroll marker dots */
        .scroll-marker {
            width: var(--size-3);
            height: var(--size-3);
            border-radius: var(--radius-round);
            background: var(--layer-background-4);
            border: 1px solid var(--outline);
            cursor: pointer;
            transition: all 0.3s var(--ease-3);
            opacity: 0.6;
        }

        .scroll-marker:hover {
            transform: scale(1.2);
            opacity: 1;
        }

        .scroll-marker.active {
            background: var(--primary);
            border-color: var(--primary);
            opacity: 1;
        }

        /* Scroll buttons */
        .carousel--scroll-buttons {
            &::scroll-button(left),
            &::scroll-button(right) {
                cursor: pointer;
                -webkit-tap-highlight-color: transparent;
                position: absolute;
                z-index: 1;
                position-anchor: --carousel;
                inline-size: 44px;
                margin: var(--size-3);
                font-family: "Material Symbols Outlined";
                line-height: 1;
                font-variation-settings: "FILL" 0,"wght" 100,"GRAD" 0,"opsz" 24;
                display: flex;
                place-items: center;
                place-content: center;
                aspect-ratio: 1;
                background: var(--layer-background-2);
                border: 1px solid var(--layer-background-3);
                border-radius: var(--radius-full);
                transition: transform .3s var(--ease-emphasized),opacity .5s var(--ease-3),background-color .3s var(--ease-3),outline-offset .25s var(--ease-3);
                top: 50%;
                transform: translateY(-50%);
            }

            &::scroll-button(right) {
                right: -60px;
                content: "arrow_forward" / "Scroll Right";
            }

            &::scroll-button(left) {
                left: -60px;
                content: "arrow_back" / "Scroll Left";
            }

            &::scroll-button(left):not(:disabled):is(:hover,:focus-visible),
            &::scroll-button(right):not(:disabled):is(:hover,:focus-visible) {
                background-color: var(--layer-background-1);
                border-color: var(--layer-background-4);
                font-variation-settings: "opsz" 30;
                transform: translateY(-50%) scale(1.1);
            }

            &::scroll-button(left):not(:active):focus-visible,
            &::scroll-button(right):not(:active):focus-visible {
                outline-offset: 2px;
                outline: 2px solid var(--primary);
            }

            &::scroll-button(right):not(:disabled):active {
                transform: translateY(-50%) translate(5px) scale(.95);
            }

            &::scroll-button(left):not(:disabled):active {
                transform: translateY(-50%) translate(-5px) scale(.95);
            }

            &::scroll-button(left):disabled,
            &::scroll-button(right):disabled {
                opacity: 25%;
                cursor: not-allowed;
            }
        }

        /* Fallback scroll buttons using regular CSS */
        .scroll-button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: var(--layer-background-2);
            border: 1px solid var(--layer-background-3);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-family: "Material Symbols Outlined";
            font-size: var(--font-size-3);
            color: var(--gray-0);
            transition: all 0.3s var(--ease-3);
            z-index: 2;
        }

        .scroll-button:hover {
            background: var(--layer-background-1);
            transform: translateY(-50%) scale(1.1);
        }

        .scroll-button.left {
            left: -60px;
        }

        .scroll-button.right {
            right: -60px;
        }

        @keyframes scale-in-and-out {
            entry 0% {
                transform: scale(0.25);
            }
            entry 100% {
                transform: scale(1);
            }
            exit 0% {
                transform: scale(1);
            }
            exit 100% {
                transform: scale(0.25);
            }
        }

        @keyframes offscreen-inert {
            entry 0%,exit 100% {
                interactivity: inert;
            }
            entry 100%,exit 0% {
                interactivity: auto;
            }
        }
    }

    /* Card styling - using your carousel__card class name */
    .carousel__card {
        inline-size: min(var(--size-content-2), 90cqi);
        background: var(--layer-background-2);
        border-radius: var(--radius-medium);
        box-shadow: var(--elevation-2);
        overflow: clip;
        align-content: end;

        > figure {
            display: grid;
            place-items: end stretch;
            margin: 0;
            
            > * {
                grid-area: 1 / 1;
            }

            > figcaption {
                max-inline-size: 100%;
                display: grid;
                justify-items: start;
                gap: var(--size-2);
                transition: transform 0.3s var(--ease-3), opacity 0.3s var(--ease-3);
                background: linear-gradient(to top, #000, 75%, #0000);
                padding-inline: var(--size-5);
                padding-block: var(--size-9) var(--size-3);
                color: #FFF;

                &:focus-within {
                    transform: translateY(0);
                }

                & h5 {
                    color: var(--gray-0);
                    margin: 0;
                    font-size: 1.2rem;
                }

                & p {
                    color: var(--gray-4);
                    margin: 0;
                    line-height: 1.4;
                }
            }
        }

        img {
            width: 100%; height: 400px;
            /* margin-inline: auto; height: 480px; width: calc(0.6 * 480px); */
            /* object-fit: contain; */
            object-fit: cover;
            display: block;
        }
    }

    /* Container for carousel with markers */
    .carousel-container {
        position: relative;
        margin-bottom: 80px;
    }

    /* Scroll markers container */
    .scroll-markers {
        position: absolute;
        bottom: -50px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: var(--size-2);
        padding: 10px;
        background: rgba(0, 0, 0, 0.2);
        border-radius: var(--radius-medium);
        backdrop-filter: blur(10px);
    }
.pagy {
    font-size: var(--font-size-large);
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: var(--inline-space);
    [aria-disabled="true"] {
        color: var(--outline-variant);
    }
    a {
        text-decoration: none;
    }
    .current {
        font-weight: var(--font-weight-8);
        font-size: var(--font-size-4);
        color: inherit;
    }
}
/* .sheet {
    max-width: var(--size-content-5);
    width: 100%;
    margin-inline: auto;
} */
.panel {
    --panel-width: var(--size-content-4);
    --panel-padding-inline: 2lh;
    --panel-padding-block: 8ch;
    --sheet-width: var(--size-content-5);

    border-radius: var(--radius-small);
    border: 1px solid var(--outline-variant);
    padding: var(--panel-padding-inline) var(--panel-padding-block);
    margin-inline: auto;
    inline-size: min(100%, var(--panel-width));
    position: relative;
    &.sheet {
        --panel-width: var(--sheet-width);
        min-height: calc(90vh);
        background-color: var(--layer-surface);
        box-shadow: var(--elevation-2);
    }
    .card {
        background-color: var(--layer-container);
        &.filled {
            background-color: var(--primary-container);
            box-shadow: var(--elevation-2);
            color: var(--on-primary-container);
        }
    }

    &.tall {
        min-height: calc(90vh);
        display: flex;
        flex-direction: column;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    &.outlined {
        border: 0;

        @media (prefers-color-scheme: dark) {
            border: 1px solid var(--outline);
        }
    }
}


.container {
    --container-width: var(--size-content-5);
    --container-padding-inline: 2lh;
    --container-padding-block: var(--size-relative-11);

    padding: var(--container-padding-inline) var(--container-padding-block);
    inline-size: var(--container-width);
    margin: 0 auto;
}
.line-clamp-medium {
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;  
    line-clamp: 7;
    overflow: hidden;
}

@media(width < 768px) {
    .panel {
        --panel-width: 98%;
        --panel-padding-inline: 1ch;
        --panel-padding-block: 2ch;
        --sheet-width: 100%;
    }
    .container {
        --container-width: 100%;
        --container-padding-inline: 0;
        --container-padding-block: 1ch;
    }
    .line-clamp-medium {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;  
        line-clamp: 3;
        overflow: hidden;
    }
}
.posting_link {
  color: var(--on-layer-background);
  text-decoration: none;
}
.posting_time {
  color: var(--on-layer-background-variant);
}
.product {
    display: flex;
    flex-direction: column;
    flex: 1;
    background: green;
    margin-block: 4em;
    margin-inline: auto;
    padding-inline: 1em;
    width: 100%;

    .body {
        background-color: red;
        display: flex;
        flex-direction: column;
        gap: 3.25em;
        margin-inline: auto;
        order: 1;
        font-size: var(--size-4);
        .book-cover {
  
            width: 16rem;
            border-radius: var(--inline-space);
            aspect-ratio: 2/3;
            object-fit: cover;
            margin-inline: auto;
          }
    }

    aside {
        margin-inline: auto;
        background: blue;
        order: 0;
        width: min(100%, var(--size-content-2));
        header {
            display: flex;
            gap: 1em;
            justify-content: space-between;
            margin-block: 0;
        }
        div.product-buy {
            border-radius: var(--radius-medium);
            border: 1px solid var(--outline-variant);
            box-shadow: var(--elevation-3);
            padding: var(--block-space);
            .content a {
                font-weight: 800;
            }
        }
        dl {
            display: grid;
            font-size: var(--font-size-x-large);
            font-weight: bold;
            gap: 1em;
            grid-template-columns: 1fr 1fr;
            width: 100%;
        }
    }

    footer {
        font-size: var(--font-size-small);
        margin-inline: auto;
        padding-inline: var(--block-space);
    }
}


@media(min-width: 768px) {
    .product {
        display: grid;
        gap: var(--block-space);
        grid-template-columns: 2fr 1fr;
        justify-content: space-between;
        margin-top: 0;
        width: min(100%, var(--size-content-5));

        aside {
            order: 1;
            width: 100%;
        }

        .body {
            flex: 1;
            order: 0
        }
    }
}
/* Copy to Clipboard Component */
.copy-to-clipboard {
  display: flex;
  background: var(--color-bg--main);
  border: 1px solid var(--color-border);
  border-radius: 1.5em;
  color: var(--color-txt);
  position: relative;
  overflow: hidden;
  margin-block: var(--block-space);
}

.copy-to-clipboard__text {
  padding: 0.5rem 1rem;
  border: 1px solid var(--secondary);
  border-right: none;
  border-radius: 9999px 0 0 9999px;
  background: var(--color-surface);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
}

.copy-to-clipboard__btn {
  padding: 0.5rem 1rem;
  border: 1px solid var(--secondary);
  border-left: none;
  border-radius: 0 9999px 9999px 0;
  cursor: pointer;
  background: var(--secondary);
  color: var(--on-secondary);
}

.copy-to-clipboard__success-message {
  animation: fade-out 300ms both;
  animation-delay: 2s;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  z-index: 2;
  background: var(--secondary);
  color: var(--on-secondary);
  border-radius: 4rem;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.copy-to-clipboard--success .copy-to-clipboard__success-message {
  animation: slide-up-then-down 2s both;
  display: flex;
}
.subscriber-action {
  margin-block-start: var(--block-space);
  text-align: center;
  display: flex;
  justify-content: center;
  margin-inline: auto;


  input {
    margin: 0;
  }

  input[type='email'] {
    padding: 0.5rem 1rem;
    border: 1px solid var(--primary);
    border-right: none;
    border-radius: 9999px 0 0 9999px;
    background: var(--color-surface);
    min-width: 40ch;
  }

  @media (max-width: 767px) {
    max-width: 95%;
    
    input[type='email'] {
      min-width: 0;
      width: 100%;
      max-width: none;
    }
  }

  input[type='submit'] {
    padding: 0.5rem 1rem;
    border: 1px solid var(--primary);
    border-left: none;
    border-radius: 0 9999px 9999px 0;
    cursor: pointer;
    background: var(--primary);
    color: var(--on-primary);
  }

  /* background: red; */
}
/* Define custom properties for Material Design surface roles using Open Props */
:root {
    /* Surface colors */
    --layer-background: var(--layer-background-1); /* Default color for backgrounds */
    --on-surface: var(--on-surface-color, #000000); /* Text and icons against any surface color */
    --on-surface-variant: var(--on-surface-variant-color, rgba(0, 0, 0, 0.60)); /* Lower-emphasis color for text and icons */
  
    /* Surface container colors */
    --layer-surface: var(--layer-background-4); /* Lowest-emphasis container color */
    --layer-surface: var(--layer-background-3); /* Low-emphasis container color */
    --layer-container: var(--layer-background-2); /* Default container color */
    --layer-widget: var(--layer-background-3); /* High-emphasis container color */
    --layer-widget: var(--layer-background-4); /* Highest-emphasis container color */
  }
  
  /* Example usage of the colors */
  .surface {
    background-color: var(--layer-background);
  }
  
  .on-surface {
    color: var(--on-layer-background);
  }
  
  .on-surface-variant {
    color: var(--on-layer-background-variant);
  }
  
  .surface-0 {
    background-color: var(--layer-background-0);
  }
  
  .surface-container-low {
    background-color: var(--layer-surface);
  }
  
  .surface-container {
    background-color: var(--layer-container);
  }
  
  .surface-container-high {
    background-color: var(--layer-widget);
  }
  
  .surface-container-highest {
    background-color: var(--layer-widget);
  }
  
.switch {
    position: relative;
    display: inline-block;
    width: 45px; 
    height: 26px; 
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--outline);
    transition: 0.4s;
    border-radius: 26px; 
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 19.5px;
    width: 19.5px; 
    left: 3px; 
    bottom: 3px; 
    background-color: var(--layer-widget);
    transition: 0.4s;
    border-radius: 50%;
  }
  
  input[type="checkbox"] {
    display: none;
  }
  
  input[type="checkbox"]:checked + .slider {
    background-color: var(--primary);
  }
  
  input[type="checkbox"]:checked + .slider:before {
    transform: translateX(19.5px);
    background-color: var(--on-primary);
  }
  
table {
    border-collapse: collapse;
    width: 100%;
    td {
        padding: var(--inline-space);
    }
}
tr.highlight {
    background-color: var(--tertiary-container);
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */