@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --site-bg: #fbfbfa;
    --site-panel: #f6f6f5;
    --site-panel-strong: #ffffff;
    --site-text: #111111;
    --site-muted: #454545;
    --site-soft: #6f7480;
    --site-line: #e2e2e0;
    --site-input: #f2f2f1;
    --site-accent: #ff4f2e;
    --site-accent-text: #ffffff;
    --site-invert: #111111;
    --site-invert-text: #ffffff;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --site-bg: #050505;
      --site-panel: #080808;
      --site-panel-strong: #0d0d0d;
      --site-text: #f4f4f2;
      --site-muted: #c7c7c2;
      --site-soft: #8b8e96;
      --site-line: #252525;
      --site-input: #171717;
      --site-accent: #ff4f2e;
      --site-accent-text: #ffffff;
      --site-invert: #f4f4f2;
      --site-invert-text: #111111;
    }
  }

  html {
    font-family: Pretendard, ui-sans-serif, system-ui, sans-serif;
    color: var(--site-text);
    background: var(--site-bg);
  }

  body {
    min-width: 320px;
    margin: 0;
    background: var(--site-bg);
  }
}

@layer components {
  .site-shell {
    min-height: 100vh;
    color: var(--site-text);
    background: var(--site-bg);
  }

  .site-content-grid {
    @apply mx-auto grid max-w-[1294px] grid-cols-1 px-4 lg:grid-cols-[287px_minmax(0,720px)_287px] lg:px-0;
    min-height: calc(100vh - 57px);
    background: var(--site-bg);
  }

  .site-content-grid--menu-closed {
    @apply lg:grid-cols-[minmax(0,720px)_287px];
    max-width: 1007px;
  }

  .site-section {
    border-bottom: 1px solid var(--site-line);
    background: var(--site-bg);
  }

  .site-section-header {
    @apply px-6 py-8;
  }

  .site-section-body {
    @apply px-6 py-4;
  }

  .post-prose {
    @apply max-w-none text-[17px] leading-8;
    color: var(--site-text);
  }

  .site-header {
    height: 57px;
    border-bottom: 1px solid var(--site-line);
    background: var(--site-panel);
    color: var(--site-text);
  }

  .site-main {
    min-height: calc(100vh - 57px);
    border-left: 1px solid var(--site-line);
    border-right: 1px solid var(--site-line);
    background: var(--site-bg);
  }

  .site-main--menu-closed {
    border-left: 0;
  }

  .site-sidebar {
    min-height: calc(100vh - 57px);
    background: var(--site-panel);
    color: var(--site-text);
  }

  .site-sidebar-section {
    border-bottom: 1px solid var(--site-line);
  }

  .site-muted {
    color: var(--site-muted);
  }

  .site-soft {
    color: var(--site-soft);
  }

  .site-input {
    border: 1px solid var(--site-line);
    background: var(--site-input);
    color: var(--site-text);
  }

  .site-button {
    background: var(--site-invert);
    color: var(--site-invert-text);
  }

  .site-accent-button {
    background: var(--site-accent);
    color: var(--site-accent-text);
  }
}