@layer theme {

  :root {

    /* Palette */

    /* Void — deep purple darks */
    --void-000: #0a0014;
    --void-100: #10001f;
    --void-200: #1a0030;
    --void-300: #240040;
    --void-400: #2e0052;
    --void-500: #3d006e;
    --void-600: #4e008a;
    --void-700: #6200a8;
    --void-800: #7a00c8;
    --void-900: #9400e8;

    /* Neon — electric purples and pinks */
    --neon-100: #9d00ff;
    --neon-200: #aa22ff;
    --neon-300: #bb44ff;
    --neon-400: #cc66ff;
    --neon-500: #dd88ff;
    --neon-600: #e8aaff;
    --neon-700: #f0ccff;
    --neon-800: #f5e0ff;
    --neon-900: #faf0ff;

    /* Glow — hot pink / magenta */
    --glow-100: #c2006e;
    --glow-200: #e0007e;
    --glow-300: #ff0090;
    --glow-400: #ff2baa;
    --glow-500: #ff55bb;
    --glow-600: #ff80cc;
    --glow-700: #ffaadd;
    --glow-800: #ffccee;
    --glow-900: #ffeef7;

    /* Haze — lavender neutrals */
    --haze-100: #1c0d2e;
    --haze-200: #2a1540;
    --haze-300: #3a2252;
    --haze-400: #4e3468;
    --haze-500: #6a4e88;
    --haze-600: #8a70aa;
    --haze-700: #aa98cc;
    --haze-800: #ccc0e8;
    --haze-900: #e8e0f8;

    /* Base Light Colors */
    --light--background-color: var( --neon-900 );
    --light--border-color: var( --neon-400 );
    --light--color: var( --void-300 );
    --light--color-dim: var( --haze-500 );
    --light--heading-color: var( --void-200 );

    --light--ui-target-color: var( --neon-100 );
    --light--ui-contrast-color: white;
    --light--ui-active-color: var( --neon-200 );

    --light--table-alt-background-color: var( --neon-800 );
    --light--table-background-color: var( --neon-900 );
    --light--table-border-color: var( --neon-500 );
    --light--table-head-background-color: var( --neon-300 );
    --light--table-head-color: white;

    /* Base Dark Colors */
    --dark--background-color: var( --void-100 );
    --dark--border-color: var( --void-700 );
    --dark--color: var( --haze-900 );
    --dark--color-dim: var( --haze-600 );
    --dark--heading-color: var( --neon-700 );

    --dark--ui-target-color: var( --void-600 );
    --dark--ui-contrast-color: var( --neon-800 );
    --dark--ui-active-color: var( --neon-100 );

    --dark--table-alt-background-color: var( --haze-100 );
    --dark--table-background-color: var( --void-100 );
    --dark--table-border-color: var( --void-500 );
    --dark--table-head-background-color: var( --void-600 );
    --dark--table-head-color: var( --neon-700 );

    /* High Contrast Colors */
    --light--background-color--hc: var( --void-000 );
    --dark--background-color--hc: var( --neon-900 );

    /* Colors */
    --background-color: light-dark( var( --light--background-color ), var( --dark--background-color ) );
    --border-color: light-dark( var( --light--border-color ), var( --dark--border-color ) );
    --color: light-dark( var( --light--color ), var( --dark--color ) );
    --color-dim: light-dark( var( --light--color-dim ), var( --dark--color-dim ) );
    --heading-color: light-dark( var( --light--heading-color ), var( --dark--heading-color ) );

    /* UI Semantic Colors */
    --ui-target-color: light-dark( var( --light--ui-target-color ), var( --dark--ui-target-color ) );
    --ui-contrast-color: light-dark( var( --light--ui-contrast-color ), var( --dark--ui-contrast-color ) );
    --ui-active-color: light-dark( var( --light--ui-active-color ), var( --dark--ui-active-color ) );

    /* Element Colors */
    --table-alt-background-color: light-dark( var( --light--table-alt-background-color ), var( --dark--table-alt-background-color ) );
    --table-background-color: light-dark( var( --light--table-background-color ), var( --dark--table-background-color ) );
    --table-border-color: light-dark( var( --light--table-border-color ), var( --dark--table-border-color ) );
    --table-head-background-color: light-dark( var( --light--table-head-background-color ), var( --dark--table-head-background-color ) );
    --table-head-color: light-dark( var( --light--table-head-color ), var( --dark--table-head-color ) );

    /* Theme: High Contrast */
    .t-high-contrast {
      --background-color: light-dark( var( --light--background-color--hc ), var( --dark--background-color--hc ) );
      --color: light-dark( var( --dark--color ), var( --light--color ) );
    }
  }

}