@import "tailwindcss" source(none);
@source "../src";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Fraunces", ui-serif, Georgia, serif;

  --color-black: var(--black);
  --color-panel: var(--panel);
  --color-panel-2: var(--panel-2);
  --color-line: var(--line);
  --color-line-strong: var(--line-strong);
  --color-gold-dark: var(--gold-dark);
  --color-gold: var(--gold);
  --color-gold-light: var(--gold-light);
  --color-ivory: var(--ivory);
  --color-ivory-dim: var(--ivory-dim);
  --color-ivory-faint: var(--ivory-faint);
  --color-clay: var(--clay);

  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--panel);
  --color-card-foreground: var(--ivory);
  --color-popover: var(--panel);
  --color-popover-foreground: var(--ivory);
  --color-primary: var(--gold);
  --color-primary-foreground: var(--black);
  --color-secondary: var(--panel-2);
  --color-secondary-foreground: var(--ivory);
  --color-muted: var(--panel-2);
  --color-muted-foreground: var(--ivory-dim);
  --color-accent: var(--gold);
  --color-accent-foreground: var(--black);
  --color-destructive: oklch(0.577 0.245 27.325);
  --color-destructive-foreground: var(--ivory);
  --color-border: var(--line);
  --color-input: var(--line);
  --color-ring: var(--gold);
}

:root {
  --radius: 0rem;

  --black: #0a0a0a;
  --panel: #131211;
  --panel-2: #1a1815;
  --line: rgba(201, 162, 77, 0.28);
  --line-strong: rgba(201, 162, 77, 0.55);
  --gold-dark: #8a6a2c;
  --gold: #c9a24d;
  --gold-light: #e8d08a;
  --ivory: #f3efe4;
  --ivory-dim: #cfc9ba;
  --ivory-faint: #948d7d;
  --clay: #a15c3e;

  --background: #0a0a0a;
  --foreground: #f3efe4;
}

.dark {
  --background: #0a0a0a;
  --foreground: #f3efe4;
}

@layer base {
  * {
    border-color: var(--color-border);
  }

  html {
    background-color: var(--black);
  }

  body {
    background-color: var(--black);
    color: var(--ivory);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: -0.01em;
  }

  ::selection {
    background: var(--gold);
    color: var(--black);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}