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

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { min-width: 320px; scroll-behavior: smooth; }
  body, h1, h2, h3, p { margin: 0; }
  button, input, select, textarea { font: inherit; }
  button, a { -webkit-tap-highlight-color: transparent; }
  img, svg { display: block; max-width: 100%; }
}

@layer tokens {
  :root {
    color-scheme: dark;
    --color-bg: #0b1018;
    --color-bg-deep: #070b11;
    --color-surface: #121a26;
    --color-surface-raised: #192434;
    --color-surface-soft: #101722;
    --color-border: #2b3a4d;
    --color-border-strong: #40536b;
    --color-text: #e8eef7;
    --color-text-muted: #a5b3c6;
    --color-text-faint: #7889a0;
    --color-accent: #66d9ef;
    --color-accent-strong: #37b9d1;
    --color-accent-ink: #06151a;
    --color-success: #69dfa3;
    --color-success-bg: #102a22;
    --color-warning: #f4c66a;
    --color-warning-bg: #30240e;
    --color-danger: #ff8b92;
    --color-danger-bg: #32171d;
    --color-neutral-bg: #172131;
    --font-sans: Inter, "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
    --font-mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --shadow-panel: 0 12px 32px rgb(0 0 0 / 0.18);
    --shadow-dialog: 0 28px 90px rgb(0 0 0 / 0.55);
    --focus-ring: 0 0 0 3px rgb(102 217 239 / 0.3);
    --topbar-height: 72px;
    --sidebar-width: 248px;
    --transition-fast: 140ms ease;
  }
}

@layer base {
  body.manager-body {
    min-height: 100vh;
    background:
      radial-gradient(circle at 88% -8%, rgb(49 104 128 / 0.13), transparent 34rem),
      var(--color-bg);
    color: var(--color-text);
    font: 400 15px/1.55 var(--font-sans);
    text-rendering: optimizeLegibility;
  }

  ::selection { background: rgb(102 217 239 / 0.25); color: var(--color-text); }

  a { color: var(--color-accent); }
  a:hover { color: #a5effb; }

  h1, h2, h3 { color: var(--color-text); font-weight: 680; line-height: 1.15; }
  h1 { font-size: clamp(2rem, 3vw, 2.75rem); letter-spacing: -0.035em; }
  h2 { font-size: clamp(1.15rem, 1.7vw, 1.45rem); letter-spacing: -0.018em; }
  h3 { font-size: 1rem; }
  p { color: var(--color-text-muted); }
  code, pre { font-family: var(--font-mono); font-variant-ligatures: none; }

  :where(button, a, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    box-shadow: var(--focus-ring);
  }

  .skip-link {
    position: fixed;
    z-index: 200;
    top: var(--space-3);
    left: var(--space-3);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: var(--color-accent);
    color: var(--color-accent-ink);
    font-weight: 750;
    text-decoration: none;
    transform: translateY(-160%);
    transition: transform var(--transition-fast);
  }
  .skip-link:focus { transform: translateY(0); }

  * { scrollbar-color: var(--color-border-strong) var(--color-bg-deep); scrollbar-width: thin; }
}

@layer utilities {
  .hidden, [hidden] { display: none !important; }
  .hint { color: var(--color-text-muted); font-size: 0.8rem; line-height: 1.55; }
  .empty { padding: var(--space-6); color: var(--color-text-muted); text-align: center; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  }
}