/* 
Inspired by: 
  - Mike Mai @ https://mikemai.net/ 
  - David Bushell @ https://dbushell.com/
  - Viznut @ http://viznut.fi/
*/
@layer reset, config, font, utilities, theme;
@import "reset.css" layer(reset);
@import "theme.css" layer(theme);

@font-face {
  font-family: "unscii16";
  src:
    url("unscii-16.woff") format("woff"),
    url("unscii-16.ttf") format("ttf");
}
@font-face {
  font-family: "unscii8";
  src:
    url("unscii-8.woff") format("woff"),
    url("unscii-8.ttf") format("ttf");
}

@layer font {
  :root {
    /* Traditional point sizes for 16px font */
    --pt-double-canon: 3.75rem; /*60px*/
    --pt-canon: 3.25rem; /*52px*/
    --pt-double-great-primer: 2.5rem; /*40px*/
    --pt-double-english: 2rem; /*32px*/
    --pt-double-pica: 1.75rem; /*28px*/
    --pt-paragon: 1.5rem; /*24px*/
    --pt-great-primer: 1.375rem; /*22px*/
    --pt-english: 1.125rem; /*18px*/
    --pt-pica: 1rem; /*16px*/
    --pt-small-pica: 0.875rem; /*14px*/
    --pt-long-primer: 0.75rem; /*12px*/
    --pt-bourgeois: 0.625rem; /*10px*/
    --pt-minion: 0.5rem; /*8px*/
  }
}

@layer utilities {
  .hidden {
    display: none;
    visibility: hidden;
  }
}

@layer config {
  :root {
    /* Color */
    --color-fg: oklch(1 0 0);
    --color-mg: oklch(0.5 0 0);
    --color-bg: oklch(0 0 0);
    --color-accent: oklch(0.6 0.18 142.5);
    --color-accent-bright: oklch(0.8 0.18 142.5);
    --color-glow: oklch(0.8328 0 0);
    --color-accent-transparent: oklch(0.6 0.18 142.5 / 50%);

    /* Spacing */
    --gutter-large: clamp(3ch, 2.5vmax, 3.75ch);
    --stack-large: clamp(1.25ex, 2.5vmax, 1.75ex);
    --gutter-small: clamp(0.5ch, 1vmax, 1ch);
    --stack-small: clamp(0.25ex, 0.5vmax, 0.5ex);
    --line-length: 75ch;
    --page-max-inline-size: min(
      var(--line-length),
      100dvi - var(--gutter-large) * 2
    );
    --page-padding-inline: calc((100dvi - var(--page-max-inline-size)) / 2);

    /* Typography */
    --font: unscii16, "Courier New", monospace;
    --font-alternative: unscii8, "Courier New", monospace;
    --font-weight: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 900;
    --font-size-min: 100%;
    --font-size-max: 150%;
    --font-size-clamp: clamp(
      var(--font-size-min),
      var(--font-size-min) * 0.9 + 0.5dvi,
      var(--font-size-max)
    );
    --leading: 1.4;

    /* Traditional point sizes for 12px font */
    --pt-double-canon: 4.666rem; /*56px*/
    --pt-canon: 3.999rem; /*48px*/
    --pt-double-great-primer: 2.999rem; /*36px*/
    --pt-double-english: 2.333rem; /*28px*/
    --pt-double-pica: 2rem; /*24px*/
    --pt-paragon: 1.666rem; /*20px*/
    --pt-great-primer: 1.5rem; /*18px*/
    --pt-english: 1.166rem; /*14px*/
    --pt-pica: 1rem; /*12px*/
    --pt-small-pica: 0.916rem; /*11px*/
    --pt-long-primer: 0.833rem; /*10px*/
    --pt-bourgeois: 0.75rem; /*9px*/
    --pt-minion: 0.583rem; /*7px*/

    font-size: var(--font-size-clamp);
    font: -apple-system-body;
    font-family: var(--font);
    font-weight: var(--font-weight);
    line-height: var(--leading);
    color: var(--color-fg);
    background-color: var(--color-bg);
    accent-color: var(--color-accent);
    color-scheme: dark light;
  }

  @supports (font: -apple-system-body) and
    (not (-webkit-touch-callout: default)) {
    :root {
      font-size: var(--font-size-clamp);
    }
  }

  @media (prefers-color-scheme: light) {
    :root {
      --color-fg: #404040;
      --color-bg: #f4f4f4;
      --color-accent: crimson;
    }
  }

  @media (prefers-contrast: more) {
    :root {
      --color-fg: white;
      --color-bg: black;
      --color-accent: cyan;
    }
  }

  @media (prefers-color-scheme: light) and (prefers-contrast: more) {
    :root {
      --color-fg: black;
      --color-bg: white;
      --color-accent: firebrick;
    }
  }
}