:root {
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", serif;
  --font-body: "Manrope", "Avenir Next", "Segoe UI", sans-serif;
}

@layer base {
  html {
    font-family: var(--font-body);
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="file"],
  select,
  textarea {
    width: 100%;
    border-radius: 1rem;
    border: 1px solid hsl(var(--b3) / 0.95);
    background: hsl(var(--b1) / 0.9);
    padding: 0.875rem 1rem;
    color: hsl(var(--bc));
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.03);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  }

  input[type="file"] {
    padding: 0.75rem;
  }

  input[type="checkbox"],
  input[type="radio"] {
    accent-color: hsl(var(--p));
  }

  input:focus,
  select:focus,
  textarea:focus {
    outline: none;
    border-color: hsl(var(--p));
    box-shadow: 0 0 0 4px hsl(var(--p) / 0.16);
  }

  body {
    font-family: var(--font-body);
    background:
      radial-gradient(circle at top left, rgba(110, 231, 183, 0.12), transparent 32%),
      radial-gradient(circle at top right, rgba(96, 165, 250, 0.12), transparent 28%),
      linear-gradient(180deg, rgba(11, 16, 32, 0.6), rgba(11, 16, 32, 0.95));
  }

  ::selection {
    background: rgba(110, 231, 183, 0.35);
    color: inherit;
  }

  img {
    display: block;
  }
}

@layer components {
  .font-display {
    font-family: var(--font-display);
  }

  .font-body {
    font-family: var(--font-body);
  }

  .surface-grid {
    background-image:
      linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 28px 28px;
  }
}