@import "tailwindcss";
@import "@fontsource-variable/unbounded";
@import "@fontsource-variable/onest";
@import "@fontsource-variable/jetbrains-mono";

@theme {
  --color-abyss: #0d1416;
  --color-slate: #142226;
  --color-shoal: #1f3238;
  --color-frost: #9fb3b0;
  --color-snow: #eef5f3;
  --color-ember: #e8835a;
  /* Matches the Amber preset (#FFE69A43) so first paint agrees with the default theme. */
  --color-ice: #e69a43;

  --font-display: "Unbounded Variable", system-ui, sans-serif;
  --font-sans: "Onest Variable", system-ui, sans-serif;
  --font-code: "JetBrains Mono Variable", ui-monospace, monospace;

  --text-hero: 3.8125rem;
  --text-hero--line-height: 1.05;
  --radius-panel: 10px;
  /* Buttons, inputs and their containers. The landing CTAs hard-code the same value, so one
     control cannot land at 6px while its neighbour in the same row lands at 10px. */
  --radius-ctl: 10px;
}

/* The page accent follows the active ClickGui theme (useActiveTheme sets it on :root);
   registering it as a color lets theme switches cross-fade instead of snapping. */
@property --color-ice {
  syntax: "<color>";
  inherits: true;
  initial-value: #e69a43;
}
@property --page-accent-glow {
  syntax: "<color>";
  inherits: true;
  initial-value: rgb(230 154 67 / 0.35);
}

@layer base {
  html {
    /* Height reserved for the floating top bar (TopBar): its top margin plus the bar itself. */
    --topbar-h: 4.25rem;
    scroll-padding-top: calc(var(--topbar-h) + 1rem);
    color-scheme: dark;
    /* 100vw full-bleed sections exceed the scrollbar-less client width by a few px;
       clip on html too so the document can never pan horizontally. */
    overflow-x: clip;
    transition: --color-ice 400ms ease, --page-accent-glow 400ms ease;
  }
  body {
    @apply bg-abyss text-snow font-sans antialiased;
    min-height: 100dvh;
    /* Full-bleed sections span 100vw; never let that turn into a horizontal scrollbar. */
    overflow-x: clip;
  }
  h1,
  h2,
  h3 {
    @apply font-display font-bold;
  }
  :focus-visible {
    outline: 2px solid var(--color-ice);
    outline-offset: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Konami easter egg: the whole page cycles through the hue wheel for a few seconds. */
html.lv-konami { animation: lv-konami-hue 1.4s linear infinite; }
@keyframes lv-konami-hue { to { filter: hue-rotate(360deg); } }