@import "./tokens.css";

html {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.7;
  font-variation-settings: 'WONK' 0, 'SOFT' 50;
  background: rgb(var(--color-bg));
  color: rgb(var(--color-fg));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  color: rgb(var(--color-fg));
}

h1, h2, h3, h4, h5, h6 {
  font-variation-settings: 'WONK' 1, 'SOFT' 50;
}

h1 { font-weight: 900; letter-spacing: -0.5px; }
h2 { font-weight: 800; letter-spacing: -0.3px; }
h3 { font-weight: 700; }

code, pre, kbd, samp {
  font-family: var(--font-mono);
}

::selection {
  background: rgb(var(--color-aqua) / 0.25);
  color: rgb(var(--color-fg));
}

:root, .dark {
  --color-fd-background: rgb(var(--color-bg));
  --color-fd-foreground: rgb(var(--color-fg));
  --color-fd-muted: rgb(var(--color-surface));
  --color-fd-muted-foreground: rgb(var(--color-fg-muted));
  --color-fd-popover: rgb(var(--color-surface));
  --color-fd-popover-foreground: rgb(var(--color-fg));
  --color-fd-card: rgb(var(--color-surface));
  --color-fd-card-foreground: rgb(var(--color-fg));
  --color-fd-border: rgb(var(--color-border));
  --color-fd-primary: rgb(var(--color-accent));
  --color-fd-primary-foreground: rgb(var(--color-accent-fg));
  --color-fd-secondary: rgb(var(--color-bg-subtle));
  --color-fd-secondary-foreground: rgb(var(--color-fg));
  --color-fd-accent: rgb(var(--color-bg-subtle));
  --color-fd-accent-foreground: rgb(var(--color-fg));
  --color-fd-ring: rgb(var(--color-accent) / 0.3);

  --color-fd-info: rgb(var(--color-aqua));
  --color-fd-warn: rgb(var(--color-sun));
  --color-fd-error: rgb(var(--color-magenta));
  --color-fd-success: rgb(var(--color-mint));
  --color-fd-idea: rgb(var(--color-sun));
}

.surface-card {
  background: rgb(var(--color-surface));
  border: 1px solid rgb(var(--color-border));
  border-radius: var(--radius-lg);
}