@layer theme {

  :where(.t-dune) {
    
    /* TODO: theme can control if light/dark is possible */
    /* --feature--dark-mode: var( --ON ); */

    /* Palette */

    /* Dust of Ages */
    --dust-of-ages-bg: #F2F2EF;      /* Pale Sediment */
    --dust-of-ages-fg: #4A4A4A;      /* Weathered Slate */
    --dust-of-ages-hc: #2F2F2F;      /* Ruin Ink */

    /* DARK: Ash Silence */
    --ash-silence-bg: #1A1A1A;       /* Charcoal Dune */
    --ash-silence-fg: #C0C0BC;       /* Silver Dust */
    --ash-silence-hc: #E0E0DA;       /* Ghost Trace */

    /* Spice Bloom */
    --spice-bloom-bg: #F4EAD5;       /* Pale Sand */
    --spice-bloom-fg: #C86B21;       /* Melange Rust */
    --spice-bloom-hc: #E85C00;       /* Flame of Arrakis */

    /* DARK: Deep Spice Vein */
    --deep-spice-vein-bg: #2B1A12;   /* Subterranean Clay */
    --deep-spice-vein-fg: #FF9440;   /* Glowing Spice Ember */
    --deep-spice-vein-hc: #FFB366;   /* Ember Scream */

    /* Sietch Whisper */
    --sietch-whisper-bg: #E1EFE8;    /* Oasis Mist */
    --sietch-whisper-fg: #365547;    /* Stilltent Green */
    --sietch-whisper-hc: #1F6E5E;    /* Verdant Pulse */

    /* DARK: Sietch Dusk */
    --sietch-dusk-bg: #1F2B27;       /* Deep Stilltent Green */
    --sietch-dusk-fg: #A8D8C3;       /* Dewlit Moss */
    --sietch-dusk-hc: #B0E8D0;       /* Fremen Echo */

    /* Mentat Grey */
    --mentat-grey-bg: #F5F5F5;       /* Logic Dust */
    --mentat-grey-fg: #2C2F33;       /* Thoughtstone */
    --mentat-grey-hc: #1F1F22;       /* Absolute Directive */

    /* DARK: Cerebral Static */
    --cerebral-static-bg: #121212;   /* Mentat Void */
    --cerebral-static-fg: #B8BBC4;   /* Cold Logic Trace */
    --cerebral-static-hc: #D0D3DE;   /* Mentat Spark */

    /* Sunshield Mirage */
    --sunshield-mirage-bg: #FFF8E7;  /* Mirage Light */
    --sunshield-mirage-fg: #A67C52;  /* Burnished Dune */
    --sunshield-mirage-hc: #8B5B2C;  /* Bronze Canticle */

    /* DARK: Desert Eclipse */
    --desert-eclipse-bg: #2C2115;    /* Eclipse Dune */
    --desert-eclipse-fg: #E3C7A1;    /* Fading Light */
    --desert-eclipse-hc: #F0D6B4;    /* Horizon Gleam */

    /* Scheme - Default */

    /* Colors */
    --background-color: light-dark( var( --dust-of-ages-bg ), var( --ash-silence-bg ) );
    --border-color: color-mix(in srgb, var( --background-color ), var( --color ) 25% );
    --color: light-dark( var( --dust-of-ages-fg ), var( --ash-silence-fg ) );

    /* UI Semantic Colors */
    --ui-target-color: light-dark( var( --dust-of-ages-fg ), var( --ash-silence-fg ) );
    --ui-active-color: light-dark( var( --dust-of-ages-hc ), var( --ash-silence-hc ) );
    --ui-contrast-color: light-dark( white, black );

    /* Decorations */
    /* TODO: how should nested box shadows work? */
    --box-shadow-color: light-dark( #00000033, #00000066 );

    /* Typography overrides */
    --heading-font-weight: 400;

    /* Theme: High Contrast */
    /* high congrast; lighest / darkest possible background */
    /* should still have good contrast with main light and dark colors */
    .t-high-contrast {
      --background-color: light-dark(
        var( white ),
        var( black )
      );
    }

    /* Scheme 01 - Spice Bloom / Deep Spice Vein */
    .t-scheme-01 {
      --background-color: light-dark( var( --spice-bloom-bg ), var( --deep-spice-vein-bg ) );
      --border-color: color-mix(in srgb, var( --background-color ), var( --color ) 25% );
      --color: light-dark( var( --spice-bloom-fg ), var( --deep-spice-vein-fg ) );

      --ui-target-color: light-dark( var( --spice-bloom-fg ), var( --deep-spice-vein-fg ) );
      --ui-active-color: light-dark( var( --spice-bloom-hc ), var( --deep-spice-vein-hc ) );
      --ui-contrast-color: light-dark( white, black );
    }

    /* Scheme 02 - Sietch Whisper / Sietch Dusk */
    .t-scheme-02 {
      --background-color: light-dark( var( --sietch-whisper-bg ), var( --sietch-dusk-bg ) );
      --border-color: color-mix(in srgb, var( --background-color ), var( --color ) 25% );
      --color: light-dark( var( --sietch-whisper-fg ), var( --sietch-dusk-fg ) );

      --ui-target-color: light-dark( var( --sietch-whisper-fg ), var( --sietch-dusk-fg ) );
      --ui-active-color: light-dark( var( --sietch-whisper-hc ), var( --sietch-dusk-hc ) );
      --ui-contrast-color: light-dark( white, black );
    }

    /* Scheme 03 - Mentat Grey / Cerebral Static */
    .t-scheme-03 {
      --background-color: light-dark( var( --mentat-grey-bg ), var( --cerebral-static-bg ) );
      --border-color: color-mix(in srgb, var( --background-color ), var( --color ) 25% );
      --color: light-dark( var( --mentat-grey-fg ), var( --cerebral-static-fg ) );

      --ui-target-color: light-dark( var( --mentat-grey-fg ), var( --cerebral-static-fg ) );
      --ui-active-color: light-dark( var( --mentat-grey-hc ), var( --cerebral-static-hc ) );
      --ui-contrast-color: light-dark( white, black );
    }

    /* Scheme 04 - Sunshield Mirage / Desert Eclipse */
    .t-scheme-04 {
      --background-color: light-dark( var( --sunshield-mirage-bg ), var( --desert-eclipse-bg ) );
      --border-color: color-mix(in srgb, var( --background-color ), var( --color ) 25% );
      --color: light-dark( var( --sunshield-mirage-fg ), var( --desert-eclipse-fg ) );

      --ui-target-color: light-dark( var( --sunshield-mirage-fg ), var( --desert-eclipse-fg ) );
      --ui-active-color: light-dark( var( --sunshield-mirage-hc ), var( --desert-eclipse-hc ) );
      --ui-contrast-color: light-dark( white, black );
    }

}

}