/* only apply a value in browsers that support functions */
@function --if-support(--value) { result: var(--value); }

.warning {
  display: --if-support(none);
}

html {
  --color-steps: 10;
  
  /* a warning for browsers without support */
  background: repeating-linear-gradient(-45deg, yellow 0 1em, black 1em 2em);
  
  /* We can also use @suports */
  /* this is needed because we're also using variables */
  /* see: https://codepen.io/miriamsuzanne/pen/WbNXbVP */
  @supports (color: --fn()) {    
    background: linear-gradient(
      to right, 
      --to-black(MediumVioletRed, var(--color-steps)) 20%,
      --to-black(MediumVioletRed) 20% 40%,
      MediumVioletRed 40% 60%,
      --to-white(MediumVioletRed) 60% 80%,
      --to-white(MediumVioletRed, var(--color-steps)) 80%
    );
  }

  color-scheme: var(--color-scheme, --media-scheme());
}

body {  
  /* we can also provide inline fallbacks */
  background: Canvas;
  color: CanvasText;
  
  /* these will be ignored in other browsers */
  background: --transparent(--canvas(teal), 85%);
  color: --text(teal);
}

@function --media-scheme() {
  result: light;
  @media (prefers-color-scheme: dark) { result: dark; }
}

@function --transparent(
  --color <color>, 
  --alpha: 0.5
) {
  result: oklch(from var(--color) l c h / var(--alpha, 0.5));
}

@function --to-white(
  --color <color>, 
  --step: round(var(--color-steps) / 2)
) {
  result: color-mix(in oklch,
    var(--color),
    white --color-step-mix(var(--step))
  );
}

@function --to-black(
  --color <color>, 
  --step: round(var(--color-steps) / 2)
) {
  result: color-mix(in oklch,
    var(--color),
    black --color-step-mix(var(--step))
  );
}

@function --canvas(
  --color <color>, 
  --step: round(var(--color-steps) * 0.9)
) {
  result: color-mix(in oklch,
    var(--color),
    Canvas --color-step-mix(var(--step))
  );
}

@function --text(
  --color <color>, 
  --step: round(var(--color-steps) * 0.9)
) {
  result: color-mix(in oklch,
    var(--color),
    CanvasText --color-step-mix(var(--step))
  );
}

@function --color-step-mix(--step) {
  --step-value: calc(95% / var(--color-steps));
  result: calc(var(--step, 1) * var(--step-value));
}



@layer reset, props, base;

@layer base {
  html {
    font-family: var(--serif);
    block-size: 100%;
    display: grid;
    padding: 1em;
    place-content: safe center;
  }
  
  [color-scheme=dark] { --color-scheme: dark; }
  [color-scheme=light] { --color-scheme: light; }

  body {    
    border: medium solid teal;
    font-size: var(--text-normal);
    padding: var(--gap);
  }
    
  [demo-style] {
    border-block: thin dashed;
    display: block;
    font-family: monospace;
    margin-block: 0.5lh;
    overflow: auto;
    padding-block: 0.5lh;
    white-space: pre;
  }

  code:not(pre *) {
    background: linear-gradient(
      -80deg,
      transparent 0.5ch,
      var(--pink-bg) 0.5ch calc(100% - 0.5ch),
      transparent calc(100% - 0.5ch)
    ) no-repeat 0 1ex;
    text-shadow: 2px 2px 0 Canvas;
  }
}

@layer props {
  html {
    /* from https://modernfontstacks.com/ */
    /* old style, industrial, slab */
    --serif: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
    --sans: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
    --slab: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
  }
  
  body {
    --text-normal: clamp(1em, 0.9em + 0.5vi, 2em);
    --gap: clamp(2cqi, 0.5lh, 5cqi);
  }
}

@layer reset {
  * { box-sizing: border-box; }
  html { block-size: 100%; }
  body { margin: unset; }
  
  h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
  }
  
  p, li {
    text-wrap: pretty;
  }
  
  picture { display: contents; }
  img { display: block; }

  img,
  svg {
    max-inline-size: 100%;
    block-size: auto;
  }
    
  input,
  button,
  textarea,
  select {
    font: inherit;
  }
}