/* SPEC §2.1: layer order declared first. reset + tokens live here (global/foundational). */
@layer reset, tokens, layout, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html, body { min-block-size: 100%; }
  body { line-height: 1.5; -webkit-font-smoothing: antialiased; background: var(--color-bg); color: var(--color-text); }
  img, picture, video, canvas, svg { display: block; max-inline-size: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: none; padding: 0; }
  a { color: inherit; text-decoration: none; }
  ul, ol { list-style: none; padding: 0; }
  table { border-collapse: collapse; }
  :where(h1, h2, h3, h4, h5, h6) { font-weight: 600; line-height: 1.2; }
}

@layer tokens {
  :root {
    --color-bg: #ffffff;
    --color-surface: #f8f9fa;
    --color-surface-2: #eef0f2;
    --color-text: #1a1a1a;
    --color-muted: #6b7280;
    --color-border: #e2e5e9;
    --color-primary: #2563eb;
    --color-primary-weak: #dbeafe;
    --color-danger: #dc2626;
    --color-warning: #d97706;
    --color-success: #16a34a;
    --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
    --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem;
    --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --radius: 6px; --radius-lg: 10px;
    --shadow-1: 0 1px 3px rgb(0 0 0 / 0.1);
    --shadow-2: 0 4px 16px rgb(0 0 0 / 0.12);
    --z-sticky: 10; --z-overlay: 100; --z-modal: 200; --z-toast: 300;
    --micro-rows: 18;     /* 08:00 -> 翌日 02:00 */
    --micro-row-h: 3.5rem;
  }
}