@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; }
  ul, ol { padding-inline-start: 1.25rem; }
}

@layer tokens {
  :root {
    color-scheme: light;
    --bg:       #fafafa;
    --surface:  #ffffff;
    --fg:       #0f172a;
    --muted:    #64748b;
    --line:     #e2e8f0;
    --pri:      oklch(58% 0.18 258);
    --pri-soft: color-mix(in oklch, var(--pri), white 88%);
    --pri-edge: color-mix(in oklch, var(--pri), white 70%);
    --accent:   oklch(70% 0.16 35);
    --warn:     oklch(60% 0.18 25);
    --warn-soft: color-mix(in oklch, var(--warn), white 90%);
    --ok:       oklch(60% 0.15 145);
    --hi:       oklch(96% 0.05 90);
    --radius:   0.75rem;
    --radius-sm: 0.4rem;
    --space-1: 0.25rem; --space-2: 0.5rem;
    --space-3: 1rem;    --space-4: 1.5rem;
    --space-5: 2.5rem;  --space-6: 4rem;
    --font-sans: -apple-system, BlinkMacSystemFont, "Pretendard", "Apple SD Gothic Neo", sans-serif;
    --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
    --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.04), 0 1px 1px oklch(0% 0 0 / 0.03);
    --shadow-md: 0 4px 16px oklch(0% 0 0 / 0.06), 0 1px 2px oklch(0% 0 0 / 0.04);
  }
}

@layer base {
  body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--fg);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3, h4 { line-height: 1.25; letter-spacing: -0.015em; font-weight: 700; }
  h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
  h2 { font-size: clamp(1.4rem, 2.4vw, 1.875rem); }
  h3 { font-size: 1.2rem; }
  h4 { font-size: 1rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }

  p { color: var(--fg); }
  strong { color: var(--fg); font-weight: 600; }
  a { color: var(--pri); text-decoration: underline; text-underline-offset: 3px; }
}

@layer components {
  .container {
    width: min(100%, 960px);
    margin-inline: auto;
    padding-inline: var(--space-3);
  }

  .hero {
    padding-block: var(--space-6) var(--space-5);
    background:
      radial-gradient(60% 80% at 50% 0%, var(--pri-soft) 0%, transparent 70%),
      linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
    border-bottom: 1px solid var(--line);

    & .eyebrow {
      color: var(--pri);
      font-weight: 600;
      font-size: 0.85rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      margin-block-end: var(--space-2);
    }

    & .lede {
      margin-block: var(--space-3) var(--space-5);
      font-size: 1.05rem;
      color: var(--muted);
      max-width: 70ch;
    }
  }

  .kpi-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3);

    & li {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: var(--space-3);
      box-shadow: var(--shadow-sm);
      display: flex;
      flex-direction: column;
      gap: var(--space-1);
    }

    & .kpi-num {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--pri);
      font-variant-numeric: tabular-nums;
    }

    & .kpi-lbl {
      font-size: 0.85rem;
      color: var(--muted);
    }
  }

  main {
    padding-block: var(--space-5) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  section {
    container-type: inline-size;
  }

  .section-title {
    border-block-end: 2px solid var(--pri);
    padding-block-end: var(--space-2);
    margin-block-end: var(--space-4);
  }

  section > .card + .card,
  section > article + article {
    margin-block-start: var(--space-3);
  }

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

    & h3 {
      margin-block-end: var(--space-3);
      color: var(--fg);
      display: flex;
      align-items: baseline;
      gap: var(--space-2);
    }

    & h4 {
      margin-block: var(--space-3) var(--space-2);
    }

    & p + p,
    & p + ul,
    & p + ol,
    & ul + p,
    & ol + p {
      margin-block-start: var(--space-2);
    }

    & ul, & ol {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }
  }

  .card.highlight {
    background: linear-gradient(180deg, var(--pri-soft) 0%, var(--surface) 80%);
    border-color: var(--pri-edge);
  }

  .card.warn {
    background: var(--warn-soft);
    border-color: color-mix(in oklch, var(--warn), white 60%);

    & h3 { color: var(--warn); }
  }

  .callout {
    margin-block-start: var(--space-3);
    padding: var(--space-3);
    background: var(--hi);
    border-inline-start: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
  }

  .tldr {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    counter-reset: tldr;
    list-style: none;
    padding-inline-start: 0;

    & li {
      counter-increment: tldr;
      position: relative;
      padding-inline-start: 2.25rem;
      padding-block: var(--space-1);
    }

    & li::before {
      content: counter(tldr);
      position: absolute;
      inset-inline-start: 0;
      inset-block-start: 0.1rem;
      width: 1.6rem;
      height: 1.6rem;
      display: grid;
      place-items: center;
      background: var(--pri);
      color: white;
      border-radius: 50%;
      font-size: 0.85rem;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
    }
  }

  .table-wrap {
    overflow-x: auto;
    margin-block: var(--space-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
  }

  table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;

    & th, & td {
      padding: 0.65rem 0.85rem;
      text-align: start;
      border-block-end: 1px solid var(--line);
      vertical-align: top;
    }

    & thead th {
      background: var(--pri-soft);
      color: var(--fg);
      font-weight: 600;
      font-size: 0.85rem;
      letter-spacing: 0.02em;
      white-space: nowrap;
    }

    & tbody tr:last-child td { border-block-end: 0; }

    & tbody tr:hover { background: color-mix(in oklch, var(--bg), var(--pri) 4%); }
  }

  table.compact {
    font-size: 0.85rem;

    & th, & td { padding: 0.5rem 0.6rem; }
  }

  .spec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-2);

    & > div {
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      padding: var(--space-2) var(--space-3);
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
    }

    & dt {
      font-size: 0.75rem;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-weight: 600;
    }

    & dd {
      margin: 0;
      font-size: 0.95rem;
      color: var(--fg);
      font-weight: 500;
    }
  }

  .principles {
    list-style: none;
    padding-inline-start: 0;

    & li {
      padding-inline-start: 1.5rem;
      position: relative;
    }

    & li::before {
      content: "▸";
      position: absolute;
      inset-inline-start: 0;
      color: var(--pri);
      font-weight: 700;
    }
  }

  .two-col {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1fr;
  }

  @container (min-width: 640px) {
    .two-col {
      grid-template-columns: 1fr 1fr;
    }
  }

  footer {
    margin-block-start: var(--space-5);
    padding-block: var(--space-3);
    border-block-start: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.85rem;
    text-align: center;
  }
}

@layer utilities {
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }
}