/*
 * Base Styles
 * Default element styling applied globally
 */

@layer base {
  html {
    font-family: var(--font-body);
    font-feature-settings: var(--font-body-features);
    font-weight: 400;
    font-size: var(--text-normal);
    line-height: var(--leading-normal);
    color: var(--color-gray-darker);

    /* Scale font size at content breakpoint */
    @media (min-width: 100ch) {
      font-size: 0.9375rem;
    }
  }

  body {
    background-color: var(--color-white);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    interpolate-size: allow-keywords;
    /* Safe area insets for mobile devices with notches */
    padding-block-end: env(safe-area-inset-bottom);
  }

  /* Grouped interactive elements — transitions, focus, disabled */
  :is(a, button, input, textarea, .toggle-switch, .btn) {
    transition: 150ms ease;
    transition-property: background-color, border-color, box-shadow, color, filter, outline;
    touch-action: manipulation;

    &:where(:focus-visible) {
      outline: var(--focus-ring);
      outline-offset: var(--focus-ring-offset);
    }

    &:where([disabled]) {
      cursor: not-allowed;
      opacity: 0.5;
      pointer-events: none;
    }
  }

  /* Prevent Turbo frames from breaking flex/grid layouts */
  turbo-frame {
    display: contents;
  }

  /* p5.js canvas — fixed background behind all content */
  canvas {
    position: fixed !important;
    inset: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
  }

  /* Typography */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: inherit;
    line-height: var(--leading-tight);
    color: var(--color-gray-darker);
  }

  h1 {
    font-size: var(--text-xx-large);
  }

  h2 {
    font-size: var(--text-x-large);
  }

  h3 {
    font-size: var(--text-large);
  }

  h4 {
    font-size: var(--text-medium);
  }

  p {
    line-height: var(--leading-relaxed);
  }

  /* Links */
  a {
    color: var(--color-gray-dark);
  }

  @media (any-hover: hover) {
    a:hover {
      color: var(--color-gray-darker);
    }
  }

  /* Lists */
  ul,
  ol {
    padding-left: var(--block-space-double);
  }

  li {
    margin-bottom: var(--block-space-half);
  }

  /* Emphasis */
  em,
  i {
    font-style: normal;
  }

  /* Blockquote */
  blockquote {
    padding-left: var(--block-space);
    border-left: 4px solid var(--color-gray-medium);
    color: var(--color-gray-darker);
  }

  /* Code */
  code {
    font-family: ui-monospace, monospace;
    font-size: 0.9em;
    background-color: var(--color-gray-lighter);
    padding: 0.125em 0.25em;
    border-radius: var(--radius);
  }

  pre {
    font-family: ui-monospace, monospace;
    background-color: var(--color-gray-lighter);
    padding: var(--block-space);
    border-radius: var(--radius);
    overflow-x: auto;
  }

  pre code {
    background: none;
    padding: 0;
  }

  /* Horizontal rule */
  hr {
    border: none;
    border-top: var(--border-standard);
    margin: var(--block-space-double) 0;
  }

  /* Images */
  img {
    height: auto;
  }

  /* Main content */
  main {
    flex: 1;
  }

  /* Selection */
  ::selection {
    background-color: var(--color-blue-dark);
    color: var(--color-white);
  }
}