:root {
  color-scheme: light dark;

  --clr-main: #ff9100;
  --clr-main-text: light-dark(#b35c00, #ffa733);
  --clr-main-soft: color-mix(in srgb, var(--clr-main) 16%, transparent);

  --clr-bg: light-dark(#f4f1ec, #1e1f29);
  --clr-surface: light-dark(#ffffff, #282a37);
  --clr-surface-hover: light-dark(#faf8f5, #303242);
  --clr-border: light-dark(#e7e2d9, #383a4b);
  --clr-text: light-dark(#1e1f29, #ecebf2);
  --clr-text-muted: light-dark(#5d5f6e, #a6a8b8);
  --clr-success: light-dark(#1f8a4c, #4ade80);
  --clr-danger: light-dark(#c62828, #f87171);

  --shadow: 0 1px 2px light-dark(rgba(30, 31, 41, 0.06), rgba(0, 0, 0, 0.3)),
            0 4px 12px light-dark(rgba(30, 31, 41, 0.06), rgba(0, 0, 0, 0.25));

  --fa-primary-color: currentColor;
  --fa-secondary-color: var(--clr-main);
  --fa-secondary-opacity: 0.55;

  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;

  --clr-code-bg: light-dark(#f7f4ef, #1e1f29);
  --clr-code-text: light-dark(#2b2d3a, #c8cad8);
  --clr-code-comment: light-dark(#6e7181, #7f8296);
  --clr-code-string: light-dark(#1f7a3d, #9ece6a);
  --clr-code-number: light-dark(#b45309, #ff9e64);
  --clr-code-keyword: light-dark(#7c3aed, #bb9af7);
  --clr-code-type: light-dark(#0e7490, #7dcfff);
  --clr-code-function: light-dark(#2563eb, #7aa2f7);
  --clr-code-variable: light-dark(#be185d, #f7768e);
  --clr-code-property: light-dark(#0369a1, #73daca);
  --clr-code-meta: light-dark(#a21caf, #e0af68);
  --clr-code-tag: light-dark(#c2410c, #ff9100);
  --clr-code-attribute: light-dark(#a16207, #e0af68);

  --border-radius: 12px;

  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  --grid-max-width: none;
  --grid-row-height: 180px;
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}