@layer theme {
  :root {
    --theme-primary: coral;
    --theme-primary-contrast: contrast-color(var(--theme-primary));
    --theme-secondary: lightcyan;
    --theme-secondary-contrast: contrast-color(var(--theme-secondary));
    --theme-tertiary: skyblue;
    --theme-tertiary-contrast: contrast-color(var(--theme-tertiary));
    --theme-quaternary: powderblue;
    --theme-tertiary-contrast: contrast-color(var(--theme-quaternary));

    --status-error: orangered;
    --status-error-contrast: contrast-color(var(--status-error));
    --status-success: lightseagreen;
    --status-success-contrast: contrast-color(var(--status-success));
    --status-info: var(--theme-secondary);
    --status-info-contrast: contrast-color(var(--status-info));
    --status-warning: darkgoldenrod;
    --status-warning-contrast: contrast-color(var(--status-warning));

    --highlight: coral;
    --highlight-contrast: contrast-color(var(--highlight));

    --bright: white;
    --dark: black;
    --accent: cyan;
    --dividers: whitesmoke;

    --pen: light-dark(var(--dark), var(--bright));
    --paper: light-dark(var(--bright), var(--dark));
  }
}