@layer reset, tokens, base, specimen;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { color-scheme: light dark; }
  body, h1, h2, h3, p { margin: 0; }
  button, input, select, textarea { font: inherit; }
  img, svg { display: block; max-width: 100%; }
}

@layer tokens {
  :root {
    --background: #ffffff;
    --foreground: #0a0a0a;
    --card: #ffffff;
    --card-foreground: #0a0a0a;
    --popover: #ffffff;
    --popover-foreground: #0a0a0a;
    --primary: #171717;
    --primary-foreground: #fafafa;
    --secondary: #f5f5f5;
    --secondary-foreground: #171717;
    --muted: #f5f5f5;
    --muted-foreground: #737373;
    --accent: #f5f5f5;
    --accent-foreground: #171717;
    --destructive: #e7000b;
    --destructive-foreground: #ffffff;
    --border: #e5e5e5;
    --input: #e5e5e5;
    --ring: #a1a1a1;
    --radius: 0.625rem;
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --background: #0a0a0a;
      --foreground: #fafafa;
      --card: #171717;
      --card-foreground: #fafafa;
      --popover: #262626;
      --popover-foreground: #fafafa;
      --primary: #e5e5e5;
      --primary-foreground: #171717;
      --secondary: #262626;
      --secondary-foreground: #fafafa;
      --muted: #262626;
      --muted-foreground: #a1a1a1;
      --accent: #404040;
      --accent-foreground: #fafafa;
      --destructive: #ff6467;
      --destructive-foreground: #171717;
      --border: rgb(255 255 255 / 0.1);
      --input: rgb(255 255 255 / 0.15);
      --ring: #737373;
    }
  }
}

@layer base {
  html { min-width: 320px; background: var(--background); }
  body {
    min-height: 100vh;
    background: var(--background);
    color: var(--foreground);
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
  ::selection { background: var(--primary); color: var(--primary-foreground); }
}

@layer specimen {
  .specimen {
    width: min(100%, 960px);
    min-height: 100vh;
    margin-inline: auto;
    padding: clamp(24px, 5vw, 64px);
    display: grid;
    align-content: start;
    gap: 28px;
  }
  .specimen-header { display: grid; gap: 5px; }
  .specimen-header h1 { font-size: 24px; line-height: 1.25; letter-spacing: -0.025em; font-weight: 650; }
  .specimen-header > p:last-child { max-width: 65ch; color: var(--muted-foreground); }
  .specimen-kicker { color: var(--muted-foreground); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
  .atom-stage {
    min-height: 360px;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 4px);
    background-color: var(--background);
    background-image: radial-gradient(var(--border) .7px, transparent .7px);
    background-size: 16px 16px;
    padding: clamp(24px, 6vw, 64px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
    overflow: visible;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  @media (max-width: 540px) {
    .specimen { padding: 20px 14px; }
    .atom-stage { min-height: 320px; padding: 24px 16px; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  }
}