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

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

@theme inline {
  --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;

  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-brand-red: var(--brand-red);
  --color-brand-blue: var(--brand-blue);
  --color-brand-blue-dark: var(--brand-blue-dark);
  --color-border: var(--border);
  --color-primary: var(--brand-red);
  --color-primary-foreground: oklch(1 0 0);
  --color-accent: var(--brand-blue);
  --color-accent-foreground: oklch(1 0 0);
}

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.18 0.02 250);
  --muted: oklch(0.97 0.005 250);
  --muted-foreground: oklch(0.45 0.02 250);
  --border: oklch(0.9 0.01 250);

  --brand-red: oklch(0.58 0.22 27);        /* Promist red */
  --brand-blue: oklch(0.62 0.16 240);      /* Promist blue */
  --brand-blue-dark: oklch(0.42 0.14 245);
}

@layer base {
  * {
    border-color: var(--color-border);
  }
  html, body {
    background-color: var(--color-background);
    color: var(--color-foreground);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, h4 {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
  }
}

@utility container-page {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

@utility rule-red {
  display: block;
  width: 64px;
  height: 3px;
  background: var(--brand-red);
}
@utility rule-blue {
  display: block;
  width: 64px;
  height: 3px;
  background: var(--brand-blue);
}
