sori.studio/assets/css/main.css

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

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

  :root[data-theme='dark'] {
    --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;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
      --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);
  }

  html.admin-post-editor-document,
  body.admin-post-editor-document {
    height: 100%;
    overflow: hidden;
    background: #ffffff;
  }
}

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

  .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);
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  }

  .site-button {
    background: var(--site-invert);
    color: var(--site-invert-text);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .site-button:hover {
    opacity: 0.9;
  }

  .site-accent-button {
    background: var(--site-accent);
    color: var(--site-accent-text);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .site-accent-button:hover {
    opacity: 0.92;
  }

  .site-interactive {
    transition: color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
  }

  .site-interactive:hover {
    color: var(--site-text);
  }

  .site-input:hover,
  .site-input:focus-visible {
    border-color: color-mix(in srgb, var(--site-text) 24%, var(--site-line));
  }

  .site-panel-hover {
    transition: background-color 0.2s ease;
  }

  .site-panel-hover:hover {
    background: color-mix(in srgb, var(--site-panel) 72%, var(--site-text));
  }

}