/* CSS Custom Properties */

:root {
  --nav-width: clamp(200px, 20vw, 250px);
  --toolbar-height: 48px;
  --sidebar-resizer-hover: #b8a99a;
  --sidebar-resizer-active: #DFD0B8;

  /* Colors - Dark theme (default) */
  --bg: #1D2A3B;
  --text: #DFD0B8;
  --text-muted: #b8a99a;
  --border-muted: #3d4a54;

  --primary: #2F3941;
  --primary-hover: #3d4a54;
  --primary-inverse: #DFD0B8;
  --primary-underline: rgba(223, 208, 184, 0.5);

  --card-bg: #2F3941;

  /* Form elements */
  --input-bg: #2F3941;
  --input-border: #3d4a54;
  --input-text: #DFD0B8;
  --input-placeholder: #a89d8a;
  --input-focus: #DFD0B8;

  /* Typography */
  --font-sans: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Space Grotesk", "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --font-mono: "Hack", "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --font-size: 100%;
  --font-weight: 400;
  --line-height: 1.5;

  /* Fluid typography */
  --font-size-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem);
  --font-size-base: clamp(0.95rem, 0.9rem + 0.25vw, 1.1rem);
  --font-size-lg: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --font-size-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --font-size-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
  --font-size-3xl: clamp(1.75rem, 1.5rem + 1.5vw, 2.5rem);

  /* Spacing */
  --spacing: 1rem;
  --block-spacing-y: 1rem;
  --block-spacing-x: 1rem;

  /* Border */
  --radius: 0.25rem;
  --border-width: 1px;

  /* Code */
  --code-bg: #2F3941;
  --code-text: #e6b89c;

  /* Mark */
  --mark-bg: #b48e5a;
  --mark-text: #1D2A3B;

  /* Toolbar */
  --toolbar-bg: #253040;
  --toolbar-border: #3d4a54;

  /* Table */
  --table-border: var(--border-muted);

  /* Kbd */
  --kbd-bg: #b48e5a;
  --kbd-text: #1D2A3B;
}

html[data-theme="light"] {
  --sidebar-resizer-hover: #a0aec0;
  --sidebar-resizer-active: #4a5568;
  --bg: #f5f5f5;
  --text: #2d3748;
  --text-muted: #718096;
  --border-muted: #e2e8f0;

  --primary: #e2e8f0;
  --primary-hover: #cbd5e0;
  --primary-inverse: #2d3748;
  --primary-underline: rgba(45, 55, 72, 0.3);

  --card-bg: #ffffff;

  /* Form elements */
  --input-bg: #ffffff;
  --input-border: #e2e8f0;
  --input-text: #2d3748;
  --input-placeholder: #a0aec0;
  --input-focus: #4a5568;

  /* Code */
  --code-bg: #edf2f7;
  --code-text: #BC5215;

  /* Mark */
  --mark-bg: #faf089;
  --mark-text: #2d3748;

  /* Toolbar */
  --toolbar-bg: #edf2f7;
  --toolbar-border: #e2e8f0;

  /* Kbd */
  --kbd-bg: #e2e8f0;
  --kbd-text: #2d3748;
}

html[data-theme="moon"] {
  --sidebar-resizer-hover: #878580;
  --sidebar-resizer-active: #CECDC3;
  --bg: #1C1B1A;
  --text: #CECDC3;
  --text-muted: #878580;
  --border-muted: #403E3C;

  --primary: #282726;
  --primary-hover: #343331;
  --primary-inverse: #CECDC3;
  --primary-underline: rgba(206, 205, 195, 0.3);

  --card-bg: #282726;

  /* Form elements */
  --input-bg: #282726;
  --input-border: #403E3C;
  --input-text: #CECDC3;
  --input-placeholder: #6F6E69;
  --input-focus: #CECDC3;

  /* Code */
  --code-bg: #343331;
  --code-text: #DA702C;

  /* Mark */
  --mark-bg: #403E3C;
  --mark-text: #CECDC3;

  /* Toolbar */
  --toolbar-bg: #100F0F;
  --toolbar-border: #282726;

  /* Table */
  --table-border: var(--border-muted);

  /* Kbd */
  --kbd-bg: #403E3C;
  --kbd-text: #CECDC3;
}