/* ==========================================================================
   exma styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts — local copies of the exma.systems brand faces.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Sintesi Semi";
  src: url("/assets/fonts/SintesiSemi.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Sintesi Semi";
  src: url("/assets/fonts/SintesiSemi-Bold.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("/assets/fonts/OpenSans-Regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("/assets/fonts/OpenSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

:root {
  --bg: #141414;
  --bg-elevated: #1c1c1c;
  --fg: #e5e5e3;
  --fg-muted: #c8c8c6;
  --fg-dim: #999;
  --border-subtle: #2a2a2a;
  --display: "Sintesi Semi", Arial, sans-serif;
  --body: "Open Sans", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   FrankenUI custom theme — HSL values without the hsl() wrapper, as the
   FrankenUI CDN build expects. The class is applied to <html> by the init
   script in base.html, giving it specificity to override built-in themes.
   Palette derived from the exma.systems --bg/--fg variables above.
   -------------------------------------------------------------------------- */

.uk-theme-exma {
  --background: 0 0% 8%; /* #141414 */
  --foreground: 60 4% 89%; /* #e5e5e3 */

  --muted: 0 0% 11%; /* #1c1c1c */
  --muted-foreground: 0 0% 60%; /* #999 */

  --card: 0 0% 11%;
  --card-foreground: 60 4% 89%;

  --popover: 0 0% 11%;
  --popover-foreground: 60 4% 89%;

  --border: 0 0% 16%; /* #2a2a2a */
  --input: 0 0% 16%;

  --primary: 60 4% 89%; /* exma's "primary" is the foreground tone — */
  --primary-foreground: 0 0% 8%; /* same trick as the corner button on exma.systems */

  --secondary: 0 0% 16%;
  --secondary-foreground: 60 4% 89%;

  --accent: 0 0% 60%;
  --accent-foreground: 0 0% 8%;

  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;

  --ring: 60 4% 89%;
  --radius: 0.5rem;
}

/* Dark mode uses the same palette — exma is dark-first. */
.uk-theme-exma.dark {
  --background: 0 0% 8%;
  --foreground: 60 4% 89%;

  --muted: 0 0% 11%;
  --muted-foreground: 0 0% 60%;

  --card: 0 0% 11%;
  --card-foreground: 60 4% 89%;

  --popover: 0 0% 11%;
  --popover-foreground: 60 4% 89%;

  --border: 0 0% 16%;
  --input: 0 0% 16%;

  --primary: 60 4% 89%;
  --primary-foreground: 0 0% 8%;

  --secondary: 0 0% 16%;
  --secondary-foreground: 60 4% 89%;

  --accent: 0 0% 60%;
  --accent-foreground: 0 0% 8%;

  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;

  --ring: 60 4% 89%;
  --radius: 0.5rem;
}

/* --------------------------------------------------------------------------
   FrankenUI Component Adjustments
   Tailwind v4 preflight resets padding/background/radius on <button> and
   <a>; we restore them so FrankenUI's classes look right.
   -------------------------------------------------------------------------- */

.uk-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem !important;
  height: 2.5rem;
  border-radius: var(--radius, 0.5rem) !important;
  font-weight: 500;
  font-size: 0.875rem;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    transform 0.2s ease;
  white-space: nowrap;
}

.uk-button-primary {
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

.uk-button-primary:hover {
  background-color: hsl(var(--primary)) !important;
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.uk-button-default {
  background-color: hsl(var(--secondary)) !important;
  color: hsl(var(--secondary-foreground)) !important;
  border-color: hsl(var(--secondary)) !important;
}

.uk-button-default:hover {
  background-color: hsl(var(--muted)) !important;
  color: hsl(var(--foreground)) !important;
}

.uk-button:disabled,
.uk-button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.uk-button-primary:disabled,
.uk-button-primary[disabled] {
  background-color: hsl(var(--secondary)) !important;
  color: hsl(var(--foreground)) !important;
}

.uk-button-large {
  padding: 0 2rem !important;
  height: 3rem;
  font-size: 1.125rem;
}

.uk-tab > * > a:hover {
  color: var(--fg);
}

.uk-form-label {
  color: hsl(var(--foreground)) !important;
}

/* --------------------------------------------------------------------------
   Typography — Open Sans for body, Sintesi Semi for the display wordmark
   and headings, matching exma.systems.
   -------------------------------------------------------------------------- */

* {
  font-family: var(--body);
}

.brand,
.logo-text {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--fg);
}

.brand {
  font-size: 1.75rem;
  text-decoration: none;
}

.brand:hover {
  color: #ffffff;
}

.logo-text {
  font-size: clamp(3.5rem, 10vw, 6rem);
  line-height: 1;
}

.tagline {
  font-size: clamp(14px, 2.5vw, 16px);
  letter-spacing: 0.12em;
  color: var(--fg-dim);
}

/* --------------------------------------------------------------------------
   Custom Components
   -------------------------------------------------------------------------- */

.panel-gradient {
  background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg) 100%);
  border: 1px solid var(--border-subtle);
}

.stat-card {
  background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg) 100%);
  border: 1px solid var(--border-subtle);
}

/* Subtle radial wash behind the hero — replaces media-hulk's red glow with a
   soft white-ish vignette that matches the exma.systems palette. */
.hero-gradient {
  background: radial-gradient(
    circle at 50% 0%,
    rgba(229, 229, 227, 0.06) 0%,
    transparent 60%
  );
}

.racing-accent {
  border-left: 3px solid var(--fg-dim);
}

.feature-card {
  transition:
    transform 0.2s ease,
    border-color 0.2s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--fg-dim);
}

/* --------------------------------------------------------------------------
   Hex landing background — adapted from exma.systems main.css. Used on the
   landing page when needed; the current landing template uses the simpler
   hero-gradient instead, but this is here so it can be opted into later.
   -------------------------------------------------------------------------- */

.hex-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
}
.hex-bg::before,
.hex-bg::after {
  content: "";
  position: absolute;
  inset: 0;
}
.hex-bg::before {
  background: url("/assets/img/background.jpg") center / cover no-repeat;
}
.hex-bg::after {
  background:
    radial-gradient(
      ellipse at center,
      transparent 0%,
      rgba(20, 20, 20, 0.55) 80%
    ),
    linear-gradient(
      to bottom,
      rgba(20, 20, 20, 0.45) 0%,
      rgba(20, 20, 20, 0.25) 40%,
      var(--bg) 100%
    );
}
