:root {
  color-scheme: light dark; /* follow user preference for light or dark settings */

  --theme: #be394f; /* prototype/theme/winterberry */

  --ltx: #000; /* light bg text */
  --dtx: #fff; /* dark bg text */
  
  --l5-tx: var(--ltx);
  --l5-bg: #fbf3f4;
  
  --l4-tx: var(--ltx);
  --l4-bg: #f3d6db;
  
  --l3-tx: var(--ltx);
  --l3-bg: #e7adb7;
  
  --l2-tx:  var(--dtx);
  --l2-bg: #da8493;
  
  --l1-tx: var(--dtx);
  --l1-bg: #ce5c6f;
  
  --d1-tx: var(--dtx);
  --d1-bg: #aa3347;
  
  --d2-tx: var(--dtx);
  --d2-bg: #972d3f;
  
  --d3-tx: var(--dtx);
  --d3-bg: #842737;
  
  --d4-tx: var(--dtx);
  --d4-bg: #71222f;
  
  --d5-tx: var(--dtx);
  --d5-bg: #5e1c27;
  
  --light-tx: var(--ltx);
  --light-bg: var(--l5-bg);
  
  --dark-tx: var(--dtx);
  --dark-bg: var(--d5-bg);
  
  --action-tx: var(--dtx);
  --action-bg: var(--d5-bg);
  
  --theme-tx: var(--theme);
  --theme-border: var(--theme);
  
  --hover-tx: var(--dtx);
  --hover-bg: var(--theme);
  
  --body: light-dark(var(--light-bg), var(--dark-bg));
  --text: light-dark(var(--light-tx), var(--dark-tx));
  
  --header:   var(--theme);
  --article:  white;
  --footer:   white;

  --sans-serif: system-ui, sans-serif;
  --serif:      ui-serif, serif;
  --mono:       ui-monospace, monospace;
  
  --mid: calc((100vw * 0.20) - 5.0rem); /* middle clamp() value */
  
  --border:   silver;
  --links:    var(--action-bg);
  
  --call-out: rgb(245 245 245 / 1);
  
  --CTA-bg: rgb(51 51 51 / 1.0);
  --CTA-tx: rgb(255 255 0 / 1.0);
}

html {
  box-sizing: border-box;
  *, *:before, *:after { box-sizing:inherit; }
  
  body {
    margin: 0.0rem auto;
    padding: 0.0rem 0.0rem;
    max-width: 75rem;
    font-size: 1.0rem;
    font-family: var(--sans-serif);
    line-height: 1.5;
    color: var(--text);
    background-color: var(--body);
        
    header { display: flex; }

    main {
      display: flex;
      flex-direction: column;
      align-items: center;

      article {
      }
    }

    footer { display: flex; }
  }
}