/* k의 놀이터 - 프론트엔드(zinc 팔레트)와 톤을 맞춘 관리자 화면 테마 */

:root,
html[data-theme="light"] {
  --primary: #18181b;
  --primary-fg: #fafafa;
  --secondary: #3f3f46;
  --accent: #18181b;

  --body-fg: #18181b;
  --body-bg: #fafafa;
  --body-quiet-color: #71717a;
  --body-loud-color: #18181b;

  --header-color: #fafafa;
  --header-branding-color: #fafafa;
  --header-bg: #18181b;
  --header-link-color: #fafafa;

  --breadcrumbs-fg: #52525b;
  --breadcrumbs-link-fg: #fafafa;
  --breadcrumbs-bg: #3f3f46;

  --link-fg: #18181b;
  --link-hover-color: #3f3f46;
  --link-selected-fg: #18181b;

  --hairline-color: #e4e4e7;
  --border-color: #e4e4e7;

  --button-fg: #fafafa;
  --button-bg: #18181b;
  --button-hover-bg: #3f3f46;
  --default-button-bg: #18181b;
  --default-button-hover-bg: #3f3f46;

  --selected-bg: #f4f4f5;
  --selected-row: #f4f4f5;
}

html[data-theme="dark"] {
  --primary: #f4f4f5;
  --primary-fg: #18181b;
  --accent: #f4f4f5;

  --body-fg: #fafafa;
  --body-bg: #000000;
  --body-quiet-color: #a1a1aa;
  --body-loud-color: #fafafa;

  --header-color: #fafafa;
  --header-branding-color: #fafafa;
  --header-bg: #09090b;
  --header-link-color: #fafafa;

  --breadcrumbs-fg: #a1a1aa;
  --breadcrumbs-link-fg: #fafafa;
  --breadcrumbs-bg: #18181b;

  --link-fg: #fafafa;
  --link-hover-color: #d4d4d8;
  --link-selected-fg: #fafafa;

  --hairline-color: #27272a;
  --border-color: #27272a;
  --darkened-bg: #09090b;

  --button-fg: #18181b;
  --button-bg: #f4f4f5;
  --button-hover-bg: #d4d4d8;
  --default-button-bg: #f4f4f5;
  --default-button-hover-bg: #d4d4d8;

  --selected-bg: #18181b;
  --selected-row: #18181b;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: #f4f4f5;
    --primary-fg: #18181b;
    --accent: #f4f4f5;

    --body-fg: #fafafa;
    --body-bg: #000000;
    --body-quiet-color: #a1a1aa;
    --body-loud-color: #fafafa;

    --header-color: #fafafa;
    --header-branding-color: #fafafa;
    --header-bg: #09090b;
    --header-link-color: #fafafa;

    --link-fg: #fafafa;
    --link-hover-color: #d4d4d8;

    --hairline-color: #27272a;
    --border-color: #27272a;

    --button-fg: #18181b;
    --button-bg: #f4f4f5;
    --button-hover-bg: #d4d4d8;
    --default-button-bg: #f4f4f5;
    --default-button-hover-bg: #d4d4d8;
  }
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", Arial, sans-serif;
}

.button,
input[type="submit"],
input[type="button"],
.submit-row input,
select,
textarea,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"] {
  border-radius: 0.5rem !important;
}

#header {
  border-bottom: none;
}