/* Design system CSS variables for Tailwind CDN */
:root {
  --background: oklch(0.98 0.001 250);
  --foreground: oklch(0.15 0.01 250);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.15 0.01 250);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.15 0.01 250);
  --primary: #f01716;
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.92 0.01 250);
  --secondary-foreground: oklch(0.15 0.01 250);
  --muted: oklch(0.88 0.01 250);
  --muted-foreground: oklch(0.45 0.02 250);
  --accent: #b10b0b;
  --accent-foreground: oklch(1 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.92 0.01 250);
  --input: oklch(0.95 0.01 250);
  --ring: #f01716;
  --radius: 0.625rem;
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: #f01716;
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: #f01716;
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: #f01716;
}

* {
  border-color: var(--border);
  outline-color: var(--ring);
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family:
    'Geist',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif;
  line-height: 1.5;
}

/* Custom Tailwind color classes using CSS variables */
.bg-background {
  background-color: var(--background);
}

.bg-foreground {
  background-color: var(--foreground);
}

.bg-card {
  background-color: var(--card);
}

.bg-primary {
  background-color: var(--primary);
}

.bg-secondary {
  background-color: var(--secondary);
}

.bg-muted {
  background-color: var(--muted);
}

.bg-accent {
  background-color: var(--accent);
}

.bg-destructive {
  background-color: var(--destructive);
}

.text-foreground {
  color: var(--foreground);
}

.text-card-foreground {
  color: var(--card-foreground);
}

.text-primary-foreground {
  color: var(--primary-foreground);
}

.text-secondary-foreground {
  color: var(--secondary-foreground);
}

.text-muted-foreground {
  color: var(--muted-foreground);
}

.text-accent-foreground {
  color: var(--accent-foreground);
}

.text-accent {
  color: var(--accent);
}

.text-primary {
  color: var(--primary);
}

.border-border {
  border-color: var(--border);
}

.focus\:ring-primary:focus {
  outline-color: var(--ring);
}

/* Opacity variants for background colors */
.bg-primary-5 {
  background-color: rgb(240 23 22 / 0.05);
}

.bg-primary-10 {
  background-color: rgb(240 23 22 / 0.1);
}

.bg-primary-20 {
  background-color: rgb(240 23 22 / 0.2);
}

.bg-primary-30 {
  background-color: rgb(240 23 22 / 0.3);
}

.bg-primary-40 {
  background-color: rgb(240 23 22 / 0.4);
}

.bg-primary-50 {
  background-color: rgb(240 23 22 / 0.5);
}

.bg-primary-60 {
  background-color: rgb(240 23 22 / 0.6);
}

.bg-primary-70 {
  background-color: rgb(240 23 22 / 0.7);
}

.bg-primary-80 {
  background-color: rgb(240 23 22 / 0.8);
}

.bg-primary-90 {
  background-color: rgb(240 23 22 / 0.9);
}

.bg-accent-5 {
  background-color: rgb(240 23 22 / 0.05);
}

.bg-accent-10 {
  background-color: rgb(240 23 22 / 0.1);
}

.bg-accent-20 {
  background-color: rgb(240 23 22 / 0.2);
}

.bg-accent-30 {
  background-color: rgb(240 23 22 / 0.3);
}

.bg-accent-40 {
  background-color: rgb(240 23 22 / 0.4);
}

.bg-accent-50 {
  background-color: rgb(240 23 22 / 0.5);
}

/* Opacity variants for text colors */
.text-primary-40 {
  color: rgb(240 23 22 / 0.4);
}

.text-primary-60 {
  color: rgb(240 23 22 / 0.6);
}

.text-accent-10 {
  color: rgb(240 23 22 / 0.1);
}

/* Opacity variants for border colors */
.border-primary-30 {
  border-color: rgb(240 23 22 / 0.3);
}

.border-primary-50 {
  border-color: rgb(240 23 22 / 0.5);
}

.border-accent-50 {
  border-color: rgb(240 23 22 / 0.5);
}

/* Simple gradient backgrounds - direct approach */
.gradient-accent-to-primary {
  background: linear-gradient(
    135deg,
    rgb(240 23 22 / 0.2) 0%,
    rgb(240 23 22 / 0.1) 100%
  );
}

.gradient-primary-fade {
  background: linear-gradient(
    135deg,
    rgb(240 23 22 / 0.05) 0%,
    transparent 100%
  );
}

.gradient-primary-to-accent {
  background: linear-gradient(
    135deg,
    rgb(240 23 22 / 0.2) 0%,
    rgb(240 23 22 / 0.1) 100%
  );
}

/* Button interaction styles (hover, active, focus) */
button.bg-primary,
a.bg-primary,
.inline-flex.bg-primary,
button.bg-primary,
.inline-flex.bg-primary {
  transition:
    transform 120ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 120ms cubic-bezier(0.4, 0, 0.2, 1),
    background-color 120ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 120ms;
  will-change: transform, box-shadow, background-color;
  -webkit-tap-highlight-color: transparent;
}

button.bg-primary:hover,
a.bg-primary:hover,
.inline-flex.bg-primary:hover {
  background-color: var(--accent);
  transform: none;
  box-shadow: none;
}
button.bg-primary:active,
a.bg-primary:active,
.inline-flex.bg-primary:active {
  transform: scale(0.98);
  box-shadow: none;
  background-color: var(--accent);
}

button.bg-primary:focus-visible,
a.bg-primary:focus-visible,
.inline-flex.bg-primary:focus-visible {
  outline: none;
  /* Use --accent for focus ring (subtle) */
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 12%, transparent);
}