@import "tailwindcss";

@font-face {
  font-family: "IBM VGA";
  src: url("/Web437_IBM_VGA_8x16.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-sans: "IBM VGA", ui-monospace, "SF Mono", "Monaco", "Inconsolata", "Roboto Mono", "Source Code Pro", monospace;
  --font-mono: "IBM VGA", ui-monospace, "SF Mono", "Monaco", "Inconsolata", "Roboto Mono", "Source Code Pro", monospace;

  /* 16-color palette */
  --black: #000000;
  --blue: #0000AA;
  --green: #00AA00;
  --cyan: #00AAAA;
  --red: #AA0000;
  --magenta: #AA00AA;
  --brown: #AA5500;
  --light-gray: #AAAAAA;
  --dark-gray: #555555;
  --light-blue: #5555FF;
  --light-green: #55FF55;
  --light-cyan: #55FFFF;
  --light-red: #FF5555;
  --light-magenta: #FF55FF;
  --yellow: #FFFF55;
  --white: #FFFFFF;
}
  
  /* Global BBS-style 80-character width constraint - responsive */
  html {
    height: 100%;
    width: min(80ch, 100vw); /* 80 characters wide on desktop, full width on mobile */
    padding: 1rem;
    margin: 0 auto;
    font-family: "IBM VGA", monospace;
    font-size: 1.25rem; /* Smaller font size for mobile */
    white-space: normal;
    line-height: 1;
    box-sizing: border-box;
  }

  /* Desktop font size */
  @media (min-width: 768px) {
    html {
      font-size: 1.5rem;
    }
  }
  
  /* Apply CGA theme to body */
  body {
    height: 100%;
    background-color: var(--black);
    color: var(--white);
    margin: 0;
    padding: 0;
  }
  
  /* Global focus ring styles for all tabbable elements */
  button:focus,
  a:focus,
  input:focus,
  textarea:focus,
  select:focus,
  [tabindex]:focus,
  [contenteditable]:focus {
    outline: 2px solid white;
    outline-offset: -2px;
    border-radius: 0;
  }
  
  /* Link styles - blue without underline */
  a {
    color: var(--light-blue);
    text-decoration: none;
}
  
  a:hover {
    color: var(--blue);
  }
  
  
