@layer base { /* semantic */
  
  :root { /* Color */

    /* Default — Dark Theme */
    color-scheme: dark;

    /* Theme Colors */
    --theme-hue: 275;
    --theme-chroma: 0.2;
    --theme-value-base:0.5;
    --theme-value-step:0.075;
    
    /* Background */
    --color-page: var(--dark-0);
    --color-read: var(--dark-3);
    --color-banner: var(--theme-2xd);
    --color-theme: var(--theme-m);
    --color-accent: var(--theme-m);
    
    /* Text */
    --text-main: var(--light-2);
    --text-link: var(--theme-xl);
    --text-link-hover: var(--theme-3xl);
    --text-banner: var(--theme-4xl);
    --text-theme: var(--theme-2xd);
    --text-accent: var(--theme-xl);
    
    /* Shadow */
    --shadow-color: var(--theme-3xd);
  }

  :root { /* Misc */

    --font-main:  var(--font-family-sans);
    --font-fancy: var(--font-family-serif);
    --font-math:  var(--font-family-latin);
    --font-code:  var(--font-family-mono);

    --opacity-none: 0;
    --opacity-button: 0.7;
    --opacity-full: 1;

    --z-page: 0;
    --z-content: 1;
    --z-interactive: 2;
    --z-header: 10;
    --z-feedback:11;
    --z-modal: 1000;
    
    --shadow-box:    0 0 6px 1px var(--shadow-color);
    --shadow-button: 0 0 15px 2px var(--shadow-color);
    --shadow-banner: 0 0 15px 2px var(--shadow-color);

    --max-text-width:70ch;
    
    /* Border - needs full border styling and semantic tags */
    /* --border-width-none: 0;
    --border-width-s: 1px;
    --border-width-m: 2px;
    --border-width-l: 3px;
    --border-width-xl:5px; */

  }

}