globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
	:root {
		--background: 0 0% 100%;
		--foreground: 0 0% 3.9%;

		--card: 0 0% 100%;
		--card-foreground: 0 0% 3.9%;

		--popover: 0 0% 100%;
		--popover-foreground: 0 0% 3.9%;

		--primary: 0 0% 9%;
		--primary-foreground: 0 0% 98%;

		--secondary: 0 0% 96.1%;
		--secondary-foreground: 0 0% 9%;

		--muted: 0 0% 96.1%;
		--muted-foreground: 0 0% 45.1%;

		--accent: 0 0% 96.1%;
		--accent-foreground: 0 0% 9%;

		--destructive: 0 84.2% 60.2%;
		--destructive-foreground: 0 0% 98%;

		--border: 0 0% 89.8%;
		--input: 0 0% 89.8%;
		--ring: 0 0% 3.9%;

		--radius: 0.5rem;

		--novel-highlight-default: #ffffff;
		--novel-highlight-purple: #f6f3f8;
		--novel-highlight-red: #fdebeb;
		--novel-highlight-yellow: #fbf4a2;
		--novel-highlight-blue: #c1ecf9;
		--novel-highlight-green: #acf79f;
		--novel-highlight-orange: #faebdd;
		--novel-highlight-pink: #faf1f5;
		--novel-highlight-gray: #f1f1ef;
		--sidebar-background: 0 0% 98%;
		--sidebar-foreground: 240 5.3% 26.1%;
		--sidebar-primary: 240 5.9% 10%;
		--sidebar-primary-foreground: 0 0% 98%;
		--sidebar-accent: 240 4.8% 95.9%;
		--sidebar-accent-foreground: 240 5.9% 10%;
		--sidebar-border: 220 13% 91%;
		--sidebar-ring: 217.2 91.2% 59.8%;
		--sidebar-background: 0 0% 100%; /* Pure white */
		--sidebar-accent: 0 0% 96%; /* Neutral gray for active items */
		--sidebar-accent-foreground: 0 0% 9%; /* Dark text on gray background */

		/* ── Event category palette (light) ──────────────────────────────────
		   Drawn from the footer seal rainbow, re-assigned by meaning. One source
		   of truth for the calendar grid, agenda chips, and events-page chips
		   (the email carries its own hex copy). Dark overrides live in .dark.
		   Design = LisboaUX peach-blush · Engineering = JS yellow · Startups =
		   green (money/growth) · Product = cyan · AI = lavender. See
		   docs/design-system.md → "Event categories". */
		--cat-design-fill: oklch(0.94 0.045 31);
		--cat-design-edge: oklch(0.85 0.08 31);
		--cat-design-ink: oklch(0.5 0.115 31);
		--cat-design-dot: oklch(0.75 0.11 31);
		--cat-engineering-fill: #fcf3d2;
		--cat-engineering-edge: #f2d469;
		--cat-engineering-ink: #7a5a12;
		--cat-engineering-dot: #e0be34;
		--cat-startups-fill: #def3df;
		--cat-startups-edge: #8cda8f;
		--cat-startups-ink: #236929;
		--cat-startups-dot: #4fb255;
		--cat-product-fill: #d6f4f6;
		--cat-product-edge: #5fd8e0;
		--cat-product-ink: #0a6e76;
		--cat-product-dot: #1fb7c1;
		--cat-ai-fill: #e8e2ff;
		--cat-ai-edge: #b6a8ff;
		--cat-ai-ink: #4a3c9e;
		--cat-ai-dot: #8470e8;

		/* World Cup fixtures (light) — a gold register reserved for the fixed
		   national markers on the events calendar (Portugal's games + the final),
		   deliberately *outside* the 5 category tints so a match never reads as a
		   community category. Gold = the brand's CTA/atmospheric warmth; here it's
		   a pale gold-wash surface with deep gold-brown ink (not navy-on-gold — the
		   CTA-pill rule is about saturated gold-hue fills, not this tint surface).
		   See lib/events/world-cup-fixtures.ts. */
		--wc-fill: #f5ead5;
		--wc-edge: #e6cd97;
		--wc-ink: #6e5214;
		--wc-dot: #d4a657;
	}

	.dark {
		/* Event category palette (dark): fill = hue @ 18% on the navy surface,
		   edge = hue @ 45%, ink = navy-lifted (#cfe4ef) across all categories. */
		--cat-design-fill: oklch(0.75 0.11 31 / 0.18);
		--cat-design-edge: oklch(0.75 0.11 31 / 0.45);
		--cat-design-ink: #cfe4ef;
		--cat-design-dot: oklch(0.75 0.11 31);
		--cat-engineering-fill: rgba(249, 221, 115, 0.18);
		--cat-engineering-edge: rgba(249, 221, 115, 0.45);
		--cat-engineering-ink: #cfe4ef;
		--cat-engineering-dot: #f9dd73;
		--cat-startups-fill: rgba(140, 218, 143, 0.18);
		--cat-startups-edge: rgba(140, 218, 143, 0.45);
		--cat-startups-ink: #cfe4ef;
		--cat-startups-dot: #8cda8f;
		--cat-product-fill: rgba(52, 221, 229, 0.18);
		--cat-product-edge: rgba(52, 221, 229, 0.45);
		--cat-product-ink: #cfe4ef;
		--cat-product-dot: #34dde5;
		--cat-ai-fill: rgba(182, 168, 255, 0.18);
		--cat-ai-edge: rgba(182, 168, 255, 0.45);
		--cat-ai-ink: #cfe4ef;
		--cat-ai-dot: #b6a8ff;

		/* World Cup fixtures (dark) — same pattern as the categories: gold @ 18%
		   fill, @ 45% edge, navy-lifted ink, full-strength gold dot. */
		--wc-fill: rgba(212, 166, 87, 0.18);
		--wc-edge: rgba(212, 166, 87, 0.45);
		--wc-ink: #cfe4ef;
		--wc-dot: #d4a657;

		/* Dark mode = navy (2026-05-31 migration off the cyan anchor). Values are
		   the email C_DARK ramp, HSL-encoded for shadcn's hsl(var(--…)). Surfaces
		   stay flat (page = card = popover = sidebar, the email canvas #0A1C24) —
		   no layered ramp; the navy-edge border is what separates surfaces. Text
		   is navy-lifted (#CFE4EF, anti-halation vs pure white); secondary text is
		   navy-dim; interactive fills (secondary/muted/accent) lift to the navy
		   veil (#15323F). Borders + focus ring carry the brand: navy-edge + tint. */
		--background: 199 58% 9%;
		--foreground: 201 50% 87%;

		--card: 199 58% 9%;
		--card-foreground: 201 50% 87%;

		--popover: 199 58% 9%;
		--popover-foreground: 201 50% 87%;

		--primary: 201 50% 87%;
		--primary-foreground: 199 58% 9%;

		--secondary: 199 50% 16%;
		--secondary-foreground: 201 50% 87%;

		--muted: 199 50% 16%;
		--muted-foreground: 199 29% 66%;

		--accent: 199 50% 16%;
		--accent-foreground: 201 50% 87%;

		--destructive: 0 62.8% 30.6%;
		--destructive-foreground: 210 40% 98%;

		--border: 199 36% 27%;
		--input: 199 36% 27%;
		--ring: 199 94% 82%;

		--novel-highlight-default: #000000;
		--novel-highlight-purple: #3f2c4b;
		--novel-highlight-red: #5c1a1a;
		--novel-highlight-yellow: #5c4b1a;
		--novel-highlight-blue: #1a3d5c;
		--novel-highlight-green: #1a5c20;
		--novel-highlight-orange: #5c3a1a;
		--novel-highlight-pink: #5c1a3a;
		--novel-highlight-gray: #3a3a3a;
		--sidebar-background: 199 58% 9%;
		--sidebar-foreground: 201 50% 87%;
		--sidebar-primary: 201 50% 87%;
		--sidebar-primary-foreground: 199 58% 9%;
		--sidebar-accent: 199 50% 16%;
		--sidebar-accent-foreground: 201 50% 87%;
		--sidebar-border: 199 36% 27%;
		--sidebar-ring: 199 94% 82%;
	}
}

@layer base {
	* {
		@apply border-border;
	}
	body {
		@apply bg-background text-foreground;
	}
}

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

button:not(:disabled),
[role="button"]:not([aria-disabled="true"]) {
	cursor: pointer;
}

button:disabled,
[role="button"][aria-disabled="true"] {
	cursor: not-allowed;
}

pre {
	background: #0d0d0d;
	border-radius: 0.5rem;
	color: #fff;
	font-family: "JetBrainsMono", monospace;
	padding: 0.75rem 1rem;

	code {
		background: none;
		color: inherit;
		font-size: 0.8rem;
		padding: 0;
	}

	.hljs-comment,
	.hljs-quote {
		color: #616161;
	}

	.hljs-variable,
	.hljs-template-variable,
	.hljs-attribute,
	.hljs-tag,
	.hljs-name,
	.hljs-regexp,
	.hljs-link,
	.hljs-name,
	.hljs-selector-id,
	.hljs-selector-class {
		color: #f98181;
	}

	.hljs-number,
	.hljs-meta,
	.hljs-built_in,
	.hljs-builtin-name,
	.hljs-literal,
	.hljs-type,
	.hljs-params {
		color: #fbbc88;
	}

	.hljs-string,
	.hljs-symbol,
	.hljs-bullet {
		color: #b9f18d;
	}

	.hljs-title,
	.hljs-section {
		color: #faf594;
	}

	.hljs-keyword,
	.hljs-selector-tag {
		color: #70cff8;
	}

	.hljs-emphasis {
		font-style: italic;
	}

	.hljs-strong {
		font-weight: 700;
	}
}

::selection {
	background-color: #e1f2f9; /* navy.veil — soft navy-tinted highlight */
	color: #0f0d2a;
}

.dark ::selection {
	background-color: #2c4f5e; /* navy-edge — visible on the dark surface */
	color: #cfe4ef; /* navy-lifted */
}

@keyframes animateIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.animate-in {
	animation: animateIn 180ms cubic-bezier(0.215, 0.61, 0.355, 1) 80ms both;
}

.route-content-enter {
	animation: routeContentEnter 180ms cubic-bezier(0.215, 0.61, 0.355, 1) both;
	will-change: opacity;
}

/* Route transitions crossfade on OPACITY ONLY — never translateY. A vertical
   slide implies a spatial move the page didn't make; a crossfade reads as the
   same editorial surface settling in. The restored events `loading.tsx`
   skeleton fills the data-fetch gap so the fade lands on content, not blank.
   See docs/animations.md "Route content settle". */
@keyframes routeContentEnter {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* /events filter-swap body crossfade. Like routeContentEnter but starts at
   half opacity rather than 0: switching city/category remounts the body, and a
   fade FROM 0 leaves a blank frame (the "flash") because the outgoing content
   has already unmounted. Starting at 0.5 keeps the new content legible from
   the first frame so the swap reads as a settle, not a blink. Opacity-only on
   purpose — the body can be a tall events list, and a full-surface blur there
   is expensive (Safari especially). The header's height morph (see
   EventsPageClient) handles the positional half of the smoothness. */
@keyframes eventsBodyEnter {
	from {
		opacity: 0.5;
	}
	to {
		opacity: 1;
	}
}
.events-body-enter {
	animation: eventsBodyEnter 190ms cubic-bezier(0.215, 0.61, 0.355, 1) both;
	will-change: opacity;
}

/* Subscribe slot blur-bridge. The slot swaps between two genuinely different
   states — the generic "Never miss an event again" card and the per-category
   CTA — when you switch category. That swap rides a route remount, so we can't
   crossfade the old out as the new comes in; instead the incoming card settles
   in from a slight blur, which masks the content change the same way Emil
   Kowalski's blur-bridge does for in-place two-state toggles (cf. our
   `.state-crossfade` copy buttons). Scoped to `.events-body-enter` so it fires
   ONLY on filter navigations, never on first paint. Opacity is left to the
   body's own fade — this adds only the blur — so the two don't compound. Blur
   stays small and on one card (not the full body), per the perf guidance. */
@keyframes eventsCardEnter {
	from {
		filter: blur(6px);
		transform: scale(0.99);
	}
	to {
		filter: blur(0);
		transform: scale(1);
	}
}
.events-body-enter .events-subscribe-card {
	/* ease-IN-OUT, not ease-out. A blur reads as "sharp" the instant it drops
	   under ~1px, so a front-loaded ease-out clears it in the first ~70ms and the
	   content snaps into focus — that's the "abrupt" feel. ease-in-out holds the
	   blur for a beat, then resolves it gradually across the full duration, so it
	   reads as a focus-pull. Longer (360ms) + a 1% scale settle for the same
	   reason; this is an occasional interaction, so a more deliberate, cinematic
	   settle is appropriate. will-change keeps the blur on the compositor. */
	animation: eventsCardEnter 360ms cubic-bezier(0.65, 0, 0.35, 1) both;
	will-change: filter, transform;
}

/* Microtransition: crossfade a SMALL element between two states (e.g. a button
   swapping "Copy" → "Copied"). The 2px blur bridges the visual gap so the eye
   reads one smooth transition instead of two distinct frames (Emil Kowalski,
   "Animations on the Web"). Keep the blur small and only on small elements —
   full-surface blur is costly, especially in Safari. Pair with a keyed remount
   so the animation re-fires on each state change. See docs/animations.md. */
.state-crossfade {
	animation: stateCrossfade 180ms cubic-bezier(0.215, 0.61, 0.355, 1) both;
	will-change: opacity, filter;
}
@keyframes stateCrossfade {
	from {
		opacity: 0;
		filter: blur(2px);
	}
	to {
		opacity: 1;
		filter: blur(0);
	}
}

/* Calendar navigation transition. When the visible month / range changes via
   the chevrons, the new grid enters from the side it came from — right→left for
   "next", left→right for "back" — with a crossfade and a little blur. The blur
   bridges the in-place content swap (react-day-picker and react-big-calendar
   both update the grid without remounting) so the eye reads one motion, not two
   frames. Re-fired imperatively via reflow; direction is set per-nav through
   `--cal-nav-from`. See docs/animations.md "Calendar navigation". */
.cal-nav-enter {
	animation: calNavEnter 280ms cubic-bezier(0.215, 0.61, 0.355, 1) both;
	will-change: opacity, transform, filter;
}
@keyframes calNavEnter {
	from {
		opacity: 0;
		transform: translateX(var(--cal-nav-from, 14px));
		filter: blur(4px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
		filter: blur(0);
	}
}

/* Mobile day-strip paging: a brief blur pulse while the strip scrolls one page
   via the hint chevrons, masking the fast horizontal motion. The strip's own
   `filter` transition eases the pulse in and out. */
.cal-strip {
	transition: filter 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.cal-strip-paging {
	filter: blur(2px);
}

/* Calendar view switch (month ↔ week ↔ day). react-big-calendar reserves the
   scrollbar gutter a frame *after* mounting a scrolling view, which reflows the
   day-header width — a visible jump. A width/margin change can't be smoothed
   (animating layout violates the transform/opacity golden rule), so instead we
   mask it: fade the new view in over the reflow so the settle happens while it's
   barely visible. See docs/animations.md "Calendar navigation". */
.cal-view-enter {
	animation: calViewEnter 260ms cubic-bezier(0.215, 0.61, 0.355, 1) both;
	will-change: opacity;
}
@keyframes calViewEnter {
	/* Hold fully invisible through the first ~90ms, then fade in. Applied to the
	   whole card content (toolbar + view), because the switch reflows both: rbc
	   reserves the scrollbar gutter inside a requestAnimationFrame *after* first
	   paint (measureGutter → checkOverflow), so the day-header resizes 1–2 frames
	   late, and the toolbar width tracks the card. A fade that climbed immediately
	   let those snaps show through at ~30% opacity; the hold keeps them off-screen
	   until the layout settles. If a sliver still shows on a slow device, widen
	   the hold %. */
	0%,
	35% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.dashboard-content-in {
	animation: dashboardContentIn 180ms cubic-bezier(0.215, 0.61, 0.355, 1) both;
	will-change: opacity;
}

@keyframes dashboardContentIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.animate-pulse,
	.animate-in,
	.route-content-enter,
	.events-body-enter,
	.events-body-enter .events-subscribe-card,
	.dashboard-content-in,
	.state-crossfade,
	.cal-nav-enter,
	.cal-view-enter {
		animation: none;
	}

	.cal-strip {
		transition: none;
	}
	.cal-strip-paging {
		filter: none;
	}

	.mobile-tab-bar,
	.mobile-tab-bar__tab,
	.mobile-tab-bar__label {
		transition: none !important;
	}
}

/* Mobile bottom tab bar */
.mobile-tab-bar {
	display: none;
}

@media (max-width: 767px) {
	body {
		padding-bottom: calc(92px + env(safe-area-inset-bottom));
	}

	.mobile-tab-bar {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 50;
		gap: 10px;
		padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
		background: rgba(255, 255, 255, 0.92);
		backdrop-filter: blur(20px) saturate(180%);
		-webkit-backdrop-filter: blur(20px) saturate(180%);
		border-top: 1px solid #e8f0f4;
		transform: translateY(0);
		transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
		will-change: transform;
	}

	.dark .mobile-tab-bar {
		background: hsla(199, 58%, 9%, 0.92); /* same hue as page (navy canvas), high opacity — blends in */
		backdrop-filter: blur(20px) saturate(180%);
		-webkit-backdrop-filter: blur(20px) saturate(180%);
		border-top-color: #2c4f5e; /* navy-edge — on-brand visible hairline */
	}

	.mobile-tab-bar--hidden {
		pointer-events: none;
		transform: translateY(calc(100% + env(safe-area-inset-bottom)));
		transition-duration: 0.25s;
		transition-timing-function: cubic-bezier(0.55, 0, 1, 0.95);
	}

	.mobile-tab-bar__tab {
		flex: 1 1 0%;
		min-width: 0;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0;
		padding: 12px 6px;
		border-radius: 18px;
		color: #4d7689; /* navy.tone — inactive */
		text-decoration: none;
		transition: flex-grow 0.28s cubic-bezier(0.25, 1, 0.5, 1), gap 0.28s cubic-bezier(0.25, 1, 0.5, 1), color 0.18s ease;
	}

	.dark .mobile-tab-bar__tab {
		color: rgba(143, 179, 194, 0.82); /* navy-dim — inactive */
	}

	.mobile-tab-bar__tab svg,
	.mobile-tab-bar__label {
		position: relative;
		z-index: 1;
	}

	.mobile-tab-bar__tab svg {
		transition: transform 0.28s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.18s ease;
	}

	.mobile-tab-bar__tab::before {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 18px;
		border: 1px solid rgba(16, 67, 87, 0.14); /* navy.shade @ 14% — quiet hairline */
		background: rgba(167, 225, 252, 0.55); /* navy.tint @ 55% — restrained fill */
		opacity: 0;
		transform: scale(0.96);
		transition: opacity 0.18s ease-out, transform 0.28s cubic-bezier(0.25, 1, 0.5, 1);
		pointer-events: none;
	}

	.dark .mobile-tab-bar__tab::before {
		background: rgba(167, 225, 252, 0.18); /* navy.tint @ 18% — dark highlight fill */
		border-color: rgba(167, 225, 252, 0.4); /* navy.tint @ 40% */
	}

	.mobile-tab-bar__tab--active {
		flex-grow: 1.35;
		gap: 8px;
		color: #104357; /* navy.shade — active */
	}

	.dark .mobile-tab-bar__tab--active {
		color: #cfe4ef; /* navy-lifted — active (the lifted-ink counterpart to navy.shade in light) */
	}

	.mobile-tab-bar__tab--active svg {
		transform: translateX(-1px);
	}

	.mobile-tab-bar__tab--active::before {
		opacity: 1;
		transform: scale(1);
	}

	.mobile-tab-bar__label {
		font-size: 13px;
		font-weight: 600;
		line-height: 1;
		max-width: 0;
		opacity: 0;
		overflow: hidden;
		white-space: nowrap;
		transform: translateX(-6px);
		transition: max-width 0.28s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.18s ease-out, transform 0.28s
			cubic-bezier(0.25, 1, 0.5, 1);
	}

	.mobile-tab-bar__tab--active .mobile-tab-bar__label {
		max-width: 90px;
		opacity: 1;
		transform: translateX(0);
	}
}

/* Smooth skeleton to content transition */
.editor-fade-in {
	animation: editorFadeIn 0.2s ease-out;
}

@keyframes editorFadeIn {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Prevent layout shift on title input */
.title-input::placeholder {
	opacity: 0.5;
	transition: opacity 0.2s ease;
}

/* Loading Screen Animations */
@keyframes fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes slide-up {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes pulse-dot {
	0%,
	100% {
		opacity: 0.5;
		transform: scale(1);
	}
	50% {
		opacity: 1;
		transform: scale(1.5);
	}
}

@keyframes pulse-slow {
	0%,
	100% {
		opacity: 0.1;
		transform: scale(1);
	}
	50% {
		opacity: 0.2;
		transform: scale(1.1);
	}
}

@keyframes float {
	0%,
	100% {
		transform: translate(0, 0);
	}
	25% {
		transform: translate(30px, -30px);
	}
	50% {
		transform: translate(-20px, -50px);
	}
	75% {
		transform: translate(40px, -20px);
	}
}

@keyframes float-reverse {
	0%,
	100% {
		transform: translate(0, 0);
	}
	25% {
		transform: translate(-30px, 30px);
	}
	50% {
		transform: translate(20px, 50px);
	}
	75% {
		transform: translate(-40px, 20px);
	}
}

/* Utility classes for animations */
.animate-fade-in {
	animation: fade-in 0.8s ease-out both;
}

.animate-slide-up {
	animation: slide-up 0.5s ease-out 0.2s both;
}

.animate-pulse-dot {
	animation: pulse-dot 1.5s ease-in-out infinite;
}

.animate-pulse-slow {
	animation: pulse-slow 4s ease-in-out infinite;
}

.animate-float {
	animation: float 20s ease-in-out infinite;
}

.animate-float-reverse {
	animation: float-reverse 25s ease-in-out infinite;
}

/* Animation delay utilities */
.animation-delay-200 {
	animation-delay: 0.2s;
}

.animation-delay-400 {
	animation-delay: 0.4s;
}

.animation-delay-600 {
	animation-delay: 0.6s;
}

.animation-delay-1000 {
	animation-delay: 1s;
}

/* Footer mark — click Easter egg.
   At rest: static, filled. Hover hint is cursor:pointer (from the wrapping
   <button>) and nothing else — discovery is part of the delight.
   On click: AdamastorMark.tsx runs a WAAPI animation directly on the SVG
   element (360° rotation with a mid-spin flash to brand orange, ~650ms).
   Rapid clicks cancel the in-progress animation and replay.
   transform-origin: center is required because SVG transforms default to
   (0,0), not the element's visual center. */
.adamastor-mark {
	transform-origin: center;
}