:root {
  --font-main: "Luciole", system-ui, sans-serif;
  --line-height-base: 1.6;

  --bg-main: #f4f4f5;
  --bg-soft: #fafafa;
  --bg-hover: #e5e7eb;

  --text-main: #3f3f46;
  --text-strong: #18181b;

  --accent: #4b5563;
  --accent-hover: #1f2937;

  --border-soft: #d4d4d8;
  --border-strong: #18181b;

  --card-1: #ffffff;
  --card-2: #f4f4f5;
  --card-3: #e4e4e7;
  --card-4: #f0f0f0;

  --code-bg: #ececec;
  --code-border: #d4d4d8;
  --code-text: #18181b;

  --syntax-comment: #71717a;
  --syntax-keyword: #1f2937;
  --syntax-string:  #9a3412;
  --syntax-number:  #7c2d12;
  --syntax-function:#065f46;
  --syntax-type:    #5b21b6;
  --syntax-operator:#3f3f46;

  --text-code: #18181b;

  --btn-primary-hover-bg: #18181b;
  --btn-primary-hover-text: #fff;

  --slug-text: var(--text-strong);
  --slug-bg: #ffffff;
  --slug-border: var(--border-soft);

  --status-public-text: #166534;
  --status-public-bg: rgba(22, 101, 52, 0.12);
  --status-public-border: rgba(22, 101, 52, 0.35);

  --status-private-text: #c2410c;
  --status-private-bg: rgba(194, 65, 12, 0.12);
  --status-private-border: rgba(194, 65, 12, 0.35);

  color-scheme: light;
}

/* Dark variant */
:root[data-theme="dark"] {
  --bg-main: #111113;
  --bg-soft: #18181b;
  --bg-hover: #232326;

  --text-main: #d4d4d8;
  --text-strong: #ffffff;

  --accent: #a1a1aa;
  --accent-hover: #d4d4d8;

  --border-soft: #27272a;
  --border-strong: #3f3f46;

  --card-1: #18181b;
  --card-2: #1f1f23;
  --card-3: #232326;
  --card-4: #2a2a2e;

  --code-bg: #0f0f11;
  --code-border: #2a2a2e;
  --code-text: #e4e4e7;

  --syntax-comment: #9ca3af;
  --syntax-keyword: #d4d4d8;
  --syntax-string:  #fca5a5;
  --syntax-number:  #fcd34d;
  --syntax-function:#6ee7b7;
  --syntax-type:    #c4b5fd;
  --syntax-operator:#e4e4e7;

  --btn-primary-hover-bg: #ffffff;
  --btn-primary-hover-text: #000;

  --slug-text: #a1a1aa;
  --slug-bg: rgba(161, 161, 170, 0.12);
  --slug-border: rgba(161, 161, 170, 0.4);

  --status-public-text: #4ade80;
  --status-private-text: #fb923c;

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
  }
}