@import "tailwindcss";
@import "./styles/tokens.css";

@theme inline {
  --color-background: var(--bg);
  --color-foreground: var(--ink);
  --color-card: var(--surface);
  --color-card-foreground: var(--ink);
  --color-popover: var(--surface);
  --color-popover-foreground: var(--ink);
  --color-primary: var(--accent-deep);
  --color-primary-foreground: oklch(0.98 0.005 45);
  --color-secondary: var(--surface-2);
  --color-secondary-foreground: var(--ink);
  --color-muted: var(--surface-week);
  --color-muted-foreground: var(--ink-muted);
  --color-accent: var(--accent-soft);
  --color-accent-foreground: var(--accent-deep);
  --color-destructive: var(--danger);
  --color-destructive-foreground: oklch(0.98 0.005 45);
  --color-border: var(--hairline);
  --color-input: var(--hairline);
  --color-ring: var(--accent);
  --font-sans: var(--font-manrope);
  --font-mono: var(--font-manrope);
  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);
}

:root {
  --background: var(--bg);
  --foreground: var(--ink);
  --card: var(--surface);
  --card-foreground: var(--ink);
  --popover: var(--surface);
  --popover-foreground: var(--ink);
  --primary: var(--accent-deep);
  --primary-foreground: oklch(0.98 0.005 45);
  --secondary: var(--surface-2);
  --secondary-foreground: var(--ink);
  --muted: var(--surface-week);
  --muted-foreground: var(--ink-muted);
  --accent-foreground: var(--accent-deep);
  --destructive: var(--danger);
  --destructive-foreground: oklch(0.98 0.005 45);
  --border: var(--hairline);
  --input: var(--hairline);
  --ring: var(--accent);
  --radius: 0.625rem;
}

@layer base {
  * {
    border-color: var(--border);
  }
  body {
    background-color: var(--bg);
    background-image: var(--paper-pattern);
    background-size: 16px 16px;
    color: var(--ink);
    font-family: var(--font-sans), system-ui, sans-serif;
  }

  ::selection {
    background: var(--accent-soft);
    color: var(--accent-deep);
  }
}