@import 'tailwindcss';

@theme {
  /* Accent */
  --color-accent: #fca311;

  /* Text */
  --text-*: initial;

  --text-xs: 0.75rem; /* 12px */
  --text-xs--line-height: 1rem; /* 16px */

  --text-sm: 0.8125rem; /* 13px */
  --text-sm--line-height: 1.3125rem; /* 21px */

  --text-md: 0.875rem; /* 14px */
  --text-md--line-height: 1.375rem; /* 22px */

  /* Breakpoints */
  --breakpoint-xs: 30rem; /* 480px */
}

@theme inline {
  /* Fonts */
  --font-sans: var(--font-geist);
  --font-mono: var(--font-geist-mono);

  /* Text colors */
  --text-color-primary: var(--color-zinc-900);
  --text-color-secondary: var(--color-zinc-800);
  --text-color-tertiary: var(--color-zinc-700);
  --text-color-faded: var(--color-zinc-400);
  --text-color-contrast: var(--color-white);

  /* Borders colors */
  --border-color-layout-primary: var(--color-zinc-200);
  --border-color-layout-contrast: var(--color-zinc-500);

  /* Background colors */
  --background-color-layout-primary-active: var(--color-zinc-900);
  --background-color-layout-primary-hover: var(--color-zinc-700);
  --background-color-layout-primary-contrast: var(--color-zinc-600);

  --background-color-layout-secondary-active: var(--color-white);
  --background-color-layout-secondary-hover: var(--color-zinc-50);
  --background-color-layout-secondary-contrast: var(--color-zinc-50);
}
