@layer base, components, utilities;

@layer base {
  /* Root variables */
  :root {
    /* Font families */
    --font-primary: "IBM Plex Mono";

    /* Colors */
    --color-background: #101010;
    --color-theme-primary: #bc35ff;
    --color-theme-alert: #FFB000;
    --color-scanline: rgba(18, 16, 16, 0.1);
    --color-danger: #FF4757;
    --color-success: #2ECC71;
    --color-info: #3498DB;
    --color-warning: #FFB000;
    --color-white: #FFFFFF;
    --color-black: #000000;

    /* Color glow */
    --color-glow-white: hsla(0, 0%, 100%, 55%);
    --color-glow-primary: hsl(291, 100%, 75%);
  }

  body {
    font-family: var(--font-primary), monospace;
    background: var(--color-background);
    color: var(--color-theme-primary);
    font-weight: 500;
    min-height: 100vh;
    padding-block-end: clamp(3rem, 6vw, 5.75rem);
  }

  hr {
    outline: none;
    border: none;
    color: transparent;
    height: 1px;
    background-color: hsl(from var(--color-theme-primary) h s calc(l - 14) / 20%);
    margin-block: clamp(1.85rem, 5vw, 5rem);
  }

  :where(:focus) {
    outline: 2px solid hsl(from var(--color-theme-primary) h s calc(l + 5) / 30%);
    outline-offset: 4px;
  }

  :where(input, select, textarea, fieldset) {
    width: 100%;
    margin-block-end: 0;
  }

  [data-css-module]:not([data-mounted]) {
    opacity: 0;
  }

  input[disabled] {
    background-color: rgba(0, 0, 0, .25);
    border: none;
    color: hsl(from var(--color-theme-primary) h s calc(l - 14));
    padding: 0;
    width: max-content;
  }

  [type="submit"][disabled] {
    pointer-events: none;
  }

  main[role="main"] {
    padding-inline: .5rem;
  }
}