@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #211a1d;

  /* Brand palette — SRS BAB IX §9.4.5 / Brand Visual Guideline v1.0 */
  --color-kolabora-primary: #ff4e00;
  --color-kolabora-secondary: #ffffae;
  --color-kolabora-tertiary: #6ca0c0;
  --color-kolabora-neutral-dark: #211a1d;
  --color-kolabora-neutral-white: #ffffff;

  /* Signaturee 2026 palette — Signature Event's own visual key, deliberately
     separate from kolabora-*. Exact hex from
     `Signaturee visual key/kode color pelatte.txt`. */
  --color-signaturee-orange: #f96b01;
  --color-signaturee-red: #ef070d;
  --color-signaturee-yellow: #ffda33;
  --color-signaturee-cream: #fff6db;
  --color-signaturee-orange-light: #f97b01;
  --color-signaturee-amber: #f99901;
  --color-signaturee-red-light: #ef2a0d;
  --color-signaturee-red-orange: #ef470d;
  --color-signaturee-yellow-light: #ffc833;
  --color-signaturee-amber-light: #ffad33;
  --color-signaturee-cream-light: #fff6c4;
  --color-signaturee-cream-dark: #fff69a;
  --color-signaturee-green: #009251;
  --color-signaturee-green-light: #37b151;
  --color-signaturee-pink: #ffa3da;
  --color-signaturee-pink-light: #ffbbda;
  --color-signaturee-blue: #1f6bd3;
  --color-signaturee-blue-light: #2a72d3;
}

@keyframes toast-enter {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.toast-enter {
  animation: toast-enter 0.2s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .toast-enter {
    animation: none;
  }
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  /* Kolabora's real brand fonts (BAB IX §9.4/9.5), self-hosted via
     next/font/local (see layout.tsx) from `font kolabora/`. Main/second
     font logic: Archivo (--font-sans) is the body/default face everywhere;
     Clash Display (brand heading font, §9.5.5) is the second/display face,
     wired into --font-heading so it applies wherever font-heading is used
     across Kolabora's own pages. Two deliberate exceptions stay pinned to
     Archivo directly (not via --font-heading) rather than following this:
     HeroBanner's "KOLABORA" title (HeroBanner.module.css .heroTitle), and
     SignatureDocumentation.tsx's heading — that component renders inside
     the Signaturee page and must not pick up a Kolabora-only font change. */
  --font-sans: var(--font-archivo);
  --font-heading: var(--font-clashdisplay), var(--font-archivo), sans-serif;
  --font-clash-display: var(--font-clashdisplay), var(--font-archivo), sans-serif;
  /* Signaturee 2026's real typefaces (Brand Visual Guideline) — Rushen
     Curvy for display/heading use (font-signaturee), Plus Jakarta Sans for
     body copy (font-signaturee-body). Both self-hosted via next/font/local
     (see layout.tsx) from `font siganturee/`. */
  --font-signaturee: var(--font-rushen-curvy);
  --font-signaturee-body: var(--font-plus-jakarta-sans);

  --color-kolabora-primary: var(--color-kolabora-primary);
  --color-kolabora-secondary: var(--color-kolabora-secondary);
  --color-kolabora-tertiary: var(--color-kolabora-tertiary);
  --color-kolabora-neutral-dark: var(--color-kolabora-neutral-dark);
  --color-kolabora-neutral-white: var(--color-kolabora-neutral-white);

  --color-signaturee-orange: var(--color-signaturee-orange);
  --color-signaturee-red: var(--color-signaturee-red);
  --color-signaturee-yellow: var(--color-signaturee-yellow);
  --color-signaturee-cream: var(--color-signaturee-cream);
  --color-signaturee-orange-light: var(--color-signaturee-orange-light);
  --color-signaturee-amber: var(--color-signaturee-amber);
  --color-signaturee-red-light: var(--color-signaturee-red-light);
  --color-signaturee-red-orange: var(--color-signaturee-red-orange);
  --color-signaturee-yellow-light: var(--color-signaturee-yellow-light);
  --color-signaturee-amber-light: var(--color-signaturee-amber-light);
  --color-signaturee-cream-light: var(--color-signaturee-cream-light);
  --color-signaturee-cream-dark: var(--color-signaturee-cream-dark);
  --color-signaturee-green: var(--color-signaturee-green);
  --color-signaturee-green-light: var(--color-signaturee-green-light);
  --color-signaturee-pink: var(--color-signaturee-pink);
  --color-signaturee-pink-light: var(--color-signaturee-pink-light);
  --color-signaturee-blue: var(--color-signaturee-blue);
  --color-signaturee-blue-light: var(--color-signaturee-blue-light);

  /* Homepage "Get Ticket" circular badge (BAB IX-adjacent, homepage redesign) —
     slow continuous rotation for the running-text ring; respects
     prefers-reduced-motion via the override below. */
  --animate-spin-slow: spin-slow 18s linear infinite;
}

@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .animate-spin-slow {
    animation: none;
  }
}

/* Kolabora is light-theme only (Brand Visual Guideline v1.0) — no dark mode
   feature/toggle/tokens exist anywhere in the design system. A stray
   `prefers-color-scheme: dark` override here (leftover from the default
   Next.js starter template) flipped the page background dark for users with
   OS-level dark mode enabled, while every component still renders dark text
   assuming a light background — making most secondary text/borders
   (text-kolabora-neutral-dark/NN opacity variants) effectively invisible.
   Intentionally not reintroducing this without a real dark theme. */

/* Every page ends in the dark footer (`#site-footer`, bg-kolabora-neutral-dark)
   as its last element, but neither <html> nor <body> had a matching
   background — so any elastic/rubber-band overscroll past the true bottom
   (trackpad momentum scroll, mobile Safari bounce) revealed the browser's
   default white canvas underneath, flashing a white gap right below the
   dark footer. Matching <html>'s background to the footer means that gap
   blends in instead of flashing white, and disabling y-axis overscroll
   chaining removes the bounce range itself in browsers that support it. */
html {
  background-color: var(--color-kolabora-neutral-dark);
  overscroll-behavior-y: none;
}

body {
  background: var(--background);
  color: var(--foreground);
}

/* Horizontal-scroll affordance for wide data tables on narrow (mobile)
   viewports — fades the leading/trailing edge so it's visually obvious
   there's more to scroll, and the fade retreats as you scroll toward
   that edge since the cover gradients scroll with the content while the
   shadow gradients stay pinned to the container. No-op on desktop where
   the table already fits (both cover gradients collapse to nothing). */
.scroll-fade-x {
  background:
    linear-gradient(to right, var(--color-kolabora-neutral-white) 30%, transparent),
    linear-gradient(to left, var(--color-kolabora-neutral-white) 30%, transparent) 100% 0,
    linear-gradient(to right, rgba(0, 0, 0, 0.12), transparent),
    linear-gradient(to left, rgba(0, 0, 0, 0.12), transparent) 100% 0;
  background-repeat: no-repeat;
  background-color: var(--color-kolabora-neutral-white);
  background-size: 32px 100%, 32px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* Toggled by SignatureCustomCursor while mounted (Signature Event page
   only) — hides the system cursor everywhere on the page, including on
   elements that set their own `cursor: pointer` (links/buttons), so the
   custom cursor image is the only one visible. Removed on unmount, so
   leaving the Signature page restores the normal cursor everywhere else. */
.signaturee-cursor-none,
.signaturee-cursor-none * {
  cursor: none !important;
}