@layer reset, tokens, base, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; }
  img, picture, video { display: block; max-width: 100%; }
  input, button, textarea { font: inherit; }
  table { border-collapse: collapse; width: 100%; }
}

@layer tokens {
  :root {
    color-scheme: light;
    --bg: light-dark(#fafafa, #0f1115);
    --surface: light-dark(#ffffff, #161a22);
    --fg: light-dark(#1a1a1a, #e6e8ee);
    --muted: light-dark(#6b7280, #9aa3b2);
    --line: light-dark(#e5e7eb, #2a2f3a);
    --line-strong: light-dark(#d1d5db, #3a4150);
    --pri: oklch(58% 0.16 250);
    --ok-fg: oklch(45% 0.14 155);
    --ok-bg: oklch(95% 0.05 155);
    --warn-fg: oklch(55% 0.14 75);
    --warn-bg: oklch(96% 0.07 90);
    --bad-fg: oklch(55% 0.20 25);
    --bad-bg: oklch(96% 0.05 25);
    --radius: 0.625rem;
    --radius-sm: 0.375rem;
    --space-1: 0.25rem; --space-2: 0.5rem;
    --space-3: 1rem; --space-4: 1.5rem; --space-5: 2rem;
    --font-sans: -apple-system, BlinkMacSystemFont, "Pretendard", "Apple SD Gothic Neo", sans-serif;
    --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  }
  :root[data-theme="dark"] { color-scheme: dark; }
}

@layer base {
  body {
    font-family: var(--font-sans);
    line-height: 1.6;
    background: var(--bg);
    color: var(--fg);
    padding: clamp(1rem, 3vw, 3rem);
    max-width: 1200px;
    margin-inline: auto;
  }
  h1 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; letter-spacing: -0.02em; }
  h2 { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: var(--space-3); }
  h3 { font-size: 0.95rem; font-weight: 600; margin: var(--space-3) 0 var(--space-2); color: var(--muted); }
  code { font-family: var(--font-mono); font-size: 0.85em; background: light-dark(#f1f3f5, #1f2430); padding: 0.1em 0.35em; border-radius: var(--radius-sm); }
  small { color: var(--muted); font-size: 0.8em; }
  p { color: var(--fg); }
}

@layer components {
  .page-header {
    padding-block: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--line);
    margin-bottom: var(--space-5);
  }
  .eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    color: var(--muted);
    margin-bottom: var(--space-2);
  }
  .page-header .meta {
    color: var(--muted);
    font-size: 0.875rem;
    margin-top: var(--space-2);
  }

  .tldr {
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--pri);
    border-radius: var(--radius);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
  }
  .tldr ol { padding-left: 1.25rem; display: grid; gap: var(--space-2); }
  .tldr li { font-size: 0.95rem; }

  .layout {
    display: grid;
    gap: var(--space-4);
    container-type: inline-size;
  }
  @container (min-width: 720px) {
    .layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .layout .span-full { grid-column: 1 / -1; }
  }

  .card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--space-4);
  }

  @scope (.card) {
    table { font-size: 0.875rem; }
    th, td {
      text-align: left;
      padding: 0.5rem 0.625rem;
      border-bottom: 1px solid var(--line);
      vertical-align: top;
    }
    thead th {
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--muted);
      font-weight: 600;
      border-bottom: 1px solid var(--line-strong);
    }
    tbody tr:last-child td,
    tbody tr:last-child th { border-bottom: none; }
    tbody th {
      font-weight: 500;
      color: var(--muted);
      width: 40%;
    }
    .note {
      font-size: 0.8125rem;
      color: var(--muted);
      margin-top: var(--space-2);
      padding-left: var(--space-2);
      border-left: 2px solid var(--line);
    }
  }

  .ok, .warn, .bad {
    display: inline-block;
    padding: 0.1em 0.55em;
    border-radius: 999px;
    font-size: 0.8em;
    font-weight: 500;
  }
  .ok { color: var(--ok-fg); background: var(--ok-bg); }
  .warn { color: var(--warn-fg); background: var(--warn-bg); }
  .bad { color: var(--bad-fg); background: var(--bad-bg); }

  .tag {
    display: inline-block;
    padding: 0.15em 0.6em;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  .tag-critical { color: var(--bad-fg); background: var(--bad-bg); }
  .tag-p1 { color: var(--bad-fg); background: var(--bad-bg); }
  .tag-p2 { color: var(--warn-fg); background: var(--warn-bg); }
  .tag-p3 { color: var(--muted); background: light-dark(#eef0f3, #1f2430); }

  .page-footer {
    margin-top: var(--space-5);
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.8125rem;
    text-align: center;
  }
}

@layer utilities {
  @media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
  }
}