@charset "utf-8";

:root {
    --base-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol",
    "Apple Color Emoji", Roboto, Helvetica, Arial, sans-serif;
    --code-font-family: "Menlo", "Inconsolata", "Consolas", "Roboto Mono", "Ubuntu Mono", "Liberation Mono",
    "Courier New", monospace;

    --base-font-size: 16px;
    --base-font-weight: 400;
    --small-font-size: calc(var(--base-font-size) * 0.875);
    --base-line-height: 1.5;
    --spacing-unit: 30px;
    --spacing-unit-half: calc(var(--spacing-unit) * 0.5);
    --spacing-unit-third: calc(var(--spacing-unit) * 0.3);
    --spacing-unit-two-thirds: calc(var(--spacing-unit) * 0.6);

    --table-text-align: left;

    --content-width: 800px;

    --on-palm:    600px;
    --on-laptop:  800px;

    --on-medium:  var(--on-palm);
    --on-large:   var(--on-laptop);
}


/*// Notice the following mixin uses max-width, in a deprecated, desktop-first*/
/*// approach, whereas media queries used elsewhere now use min-width.*/
/*@mixin media-query($device) {*/
/*    @media screen and (max-width: $device) {*/
/*        @content;*/
/*    }*/
/*}*/

/*@mixin relative-font-size($ratio) {*/
/*    font-size: #{$ratio}rem;*/
/*}*/