@import "tailwindcss";

@theme {
  --font-sans:
    "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono:
    var(--font-geist-mono), ui-monospace, "SFMono-Regular", "Menlo", monospace;
  --font-display:
    var(--font-rajdhani), "Helvetica Neue", Helvetica, Arial, ui-sans-serif,
    system-ui, sans-serif;
  --font-serif:
    var(--font-playfair), ui-serif, Georgia, serif;
  --font-app-sans:
    var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
  --font-racehub:
    var(--font-titillium), "Helvetica Neue", Helvetica, Arial, ui-sans-serif,
    system-ui, sans-serif;
  --font-hristudio:
    var(--font-inter), "Helvetica Neue", Helvetica, Arial, ui-sans-serif,
    system-ui, sans-serif;

  --color-bg: var(--surface-page);
  --color-surface: var(--surface-card);
  --color-surface-hover: var(--surface-hover);
  --color-text: var(--text);
  --color-text-secondary: var(--text-secondary);
  --color-muted: var(--muted);
  --color-faint: var(--faint);
  --color-border: var(--border);
  --color-border-faint: var(--border-faint);
  --color-border-strong: var(--border-strong);

  --color-accent: var(--accent);
  --color-accent-hover: var(--accent-hover);
  --color-accent-faint: var(--accent-faint);
  --color-on-accent: var(--on-accent);
  --color-accent-bg: var(--accent-bg);
  --color-accent-bg-soft: var(--accent-bg-soft);
  --color-accent-border: var(--accent-border);

  --color-scrim-b-from: var(--hero-scrim-b-from);
  --color-scrim-b-to: var(--hero-scrim-b-to);
  --color-scrim-l-from: var(--hero-scrim-l-from);
  --color-scrim-l-mid: var(--hero-scrim-l-mid);
  --color-scrim-l-end: var(--hero-scrim-l-end);
  --color-hero-overlay-start: var(--hero-overlay-start);
  --color-hero-overlay-mid: var(--hero-overlay-mid);
  --color-hero-overlay-end: var(--hero-overlay-end);

  --color-racetix-red: var(--racetix-red);
  --color-racetix-overlay-start: var(--racetix-overlay-start);
  --color-racetix-overlay-mid: var(--racetix-overlay-mid);
  --color-racetix-overlay-end: var(--racetix-overlay-end);
  --color-racehub-red: var(--racehub-red);
  --color-hristudio-teal: var(--hristudio-teal);
}

:root {
  color-scheme: dark light;

  /* Page and surface colors */
  --surface-page: light-dark(#f4f1ea, #060a10);
  --surface-card: light-dark(#fffefa, #0a1019);
  --surface-hover: light-dark(#efece2, #0e1521);

  /* Text colors */
  --text: light-dark(#171716, #ffffff);
  --text-secondary: light-dark(#3f3d37, #cbd5e1);
  --muted: light-dark(#6b675e, #94a3b8);
  --faint: light-dark(#8a867b, #64748b);

  /* Border colors */
  --border: light-dark(#d9d3c6, rgba(255, 255, 255, 0.1));
  --border-faint: light-dark(#e5e0d5, rgba(255, 255, 255, 0.05));
  --border-strong: light-dark(#c9c3b7, rgba(255, 255, 255, 0.2));

  /* Brand accent — Hadlock blue */
  --accent: #0076a0;
  --accent-hover: light-dark(#006082, #178dbf);
  --accent-faint: light-dark(#0a8fc0, #3aa8d4);
  --on-accent: #ffffff;
  --accent-bg: light-dark(rgba(0, 118, 160, 0.1), rgba(0, 118, 160, 0.14));
  --accent-bg-soft: light-dark(rgba(0, 118, 160, 0.06), rgba(0, 118, 160, 0.08));
  --accent-border: light-dark(rgba(0, 118, 160, 0.3), rgba(0, 118, 160, 0.4));
  --accent-glow: light-dark(rgba(0, 118, 160, 0.1), rgba(0, 118, 160, 0.18));

  /* Hero photo and scrims */
  --hero-photo-opacity: 0.68;
  --hero-photo-filter: saturate(0.95);
  --hero-scrim-b-from: light-dark(rgba(244, 241, 234, 0.95), rgba(6, 10, 16, 0.7));
  --hero-scrim-b-to: light-dark(rgba(244, 241, 234, 1), rgba(6, 10, 16, 1));
  --hero-scrim-l-from: light-dark(rgba(244, 241, 234, 0.95), rgba(6, 10, 16, 0.85));
  --hero-scrim-l-mid: light-dark(rgba(244, 241, 234, 0.78), rgba(6, 10, 16, 0.3));
  --hero-scrim-l-end: light-dark(rgba(244, 241, 234, 0.25), transparent);
  --hero-overlay-start: light-dark(transparent, rgba(6, 10, 16, 0.55));
  --hero-overlay-mid: light-dark(transparent, rgba(6, 10, 16, 0.4));
  --hero-overlay-end: light-dark(transparent, rgba(6, 10, 16, 0.3));

  /* Racetix card */
  --racetix-red: #b00000;
  --racetix-overlay-start: light-dark(rgba(244, 241, 234, 0.95), rgba(16, 16, 16, 0.96));
  --racetix-overlay-mid: light-dark(rgba(244, 241, 234, 0.78), rgba(16, 16, 16, 0.84));
  --racetix-overlay-end: light-dark(rgba(244, 241, 234, 0.25), rgba(16, 16, 16, 0.7));

  /* beenvoice card — grid + animated blob backdrop */
  --beenvoice-grid-line: light-dark(rgba(128, 128, 128, 0.07), rgba(128, 128, 128, 0.07));
  --beenvoice-blob: light-dark(rgba(163, 163, 163, 0.4), rgba(115, 115, 115, 0.3));

  /* racehub card — checkered band (stays dark in both themes) */
  --racehub-red: #d72727;
  --racehub-base: #343a40;

  /* hristudio card — teal dot-grid backdrop */
  --hristudio-teal: #14b8a5;
  --hristudio-dot: light-dark(rgba(20, 184, 165, 0.22), rgba(20, 184, 165, 0.18));

  /* Photo treatment defaults (dark) */
  --racetix-photo-opacity: 0.55;
  --racetix-photo-filter: none;
}

/* Light treatment for non-color values, following the system media query */
@media (prefers-color-scheme: light) {
  :root:not(.dark) {
    --hero-photo-filter: saturate(0.9) contrast(0.95);
    --racetix-photo-opacity: 0.68;
    --racetix-photo-filter: saturate(0.9) contrast(0.95);
  }
}

/* Dark treatment for non-color values, following the system media query */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --hero-photo-opacity: 0.5;
    --hero-photo-filter: brightness(0.65) saturate(0.95);
  }
}

/* Manual overrides — force light or dark regardless of system preference */
:root.light {
  color-scheme: light;
  --hero-photo-filter: saturate(0.9) contrast(0.95);
  --racetix-photo-opacity: 0.68;
  --racetix-photo-filter: saturate(0.9) contrast(0.95);
}

:root.dark {
  color-scheme: dark;
  --hero-photo-opacity: 0.5;
  --hero-photo-filter: brightness(0.65) saturate(0.95);
  --racetix-photo-opacity: 0.55;
  --racetix-photo-filter: none;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--surface-page);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition:
    background-color 200ms ease,
    color 200ms ease;
}

::selection {
  background-color: color-mix(in oklab, var(--accent) 35%, transparent);
  color: #ffffff;
}

/* Faint technical grid used behind the hero */
.bg-grid {
  background-image:
    linear-gradient(
      to right,
      color-mix(in oklab, #ffffff 4%, transparent) 1px,
      transparent 1px
    ),
    linear-gradient(
      to bottom,
      color-mix(in oklab, #ffffff 4%, transparent) 1px,
      transparent 1px
    );
  background-size: 56px 56px;
}

/* beenvoice backdrop — 24px hairline grid + soft animated blob */
.beenvoice-grid {
  background-image:
    linear-gradient(to right, var(--beenvoice-grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--beenvoice-grid-line) 1px, transparent 1px);
  background-size: 24px 24px;
}

.beenvoice-blob {
  animation: beenvoice-blob 7s infinite;
}

@keyframes beenvoice-blob {
  0% {
    transform: translate(0px, 0px) scale(1);
  }

  33% {
    transform: translate(30px, -50px) scale(1.1);
  }

  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }

  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

.racehub-checkered {
  background-color: var(--racehub-base);
  background-image: url("/racehub/checkered.svg");
  background-repeat: repeat;
  background-size: 200px 200px;
  background-position: center;
}

/* hristudio backdrop — 28px teal dot grid */
.hristudio-dots {
  background-image: radial-gradient(var(--hristudio-dot) 1px, transparent 1px);
  background-size: 28px 28px;
}

.hero-photo {
  opacity: var(--hero-photo-opacity);
  filter: var(--hero-photo-filter);
}

.racetix-photo {
  opacity: var(--racetix-photo-opacity);
  filter: var(--racetix-photo-filter);
}

/* Racetix logo swap between light and dark themes.
   The light logo shows when the effective theme is light: either the system
   media query, or an explicit .light override. */
.theme-logo-dark {
  display: inline-flex;
}

.theme-logo-light {
  display: none;
}

@media (prefers-color-scheme: light) {
  :root:not(.dark) .theme-logo-light {
    display: inline-flex;
  }

  :root:not(.dark) .theme-logo-dark {
    display: none;
  }
}

:root.light .theme-logo-light {
  display: inline-flex;
}

:root.light .theme-logo-dark {
  display: none;
}
