/* uxspire website core design system
   Derived from uxspire-design-system/colors_and_type.css */

@font-face {
  font-family: "Geist";
  src: url("/fonts/Geist_wght_.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("/fonts/Geist-Italic_wght_.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/GeistMono_wght_.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/GeistMono-Italic_wght_.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --radius-sm: 0.25rem;
  --radius: 0.375rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-pill: 9999px;

  --background: oklch(98.5% 0.006 85);
  --foreground: oklch(12% 0.02 75);
  --card: oklch(99.5% 0.003 85);
  --card-foreground: oklch(12% 0.02 75);
  --popover: oklch(100% 0 0);
  --popover-foreground: oklch(12% 0.02 75);

  --fg-1: oklch(12% 0.02 75);
  --fg-2: oklch(25% 0.015 75);
  --fg-3: oklch(45% 0.02 60);
  --fg-4: oklch(60% 0.015 75);

  --primary: oklch(62% 0.2 42);
  --primary-foreground: oklch(99% 0.003 85);
  --primary-12: oklch(62% 0.2 42 / 12%);
  --secondary: oklch(94% 0.008 75);
  --secondary-foreground: oklch(25% 0.015 75);
  --muted: oklch(95% 0.006 80);
  --muted-foreground: oklch(45% 0.02 60);
  --accent: oklch(96% 0.01 75);
  --accent-foreground: oklch(12% 0.02 75);
  --border: oklch(88% 0.01 80);
  --input: oklch(88% 0.01 80);
  --ring: oklch(62% 0.2 42 / 35%);

  --destructive: oklch(54% 0.20 27);
  --success: oklch(55% 0.16 150);
  --warning: oklch(72% 0.16 80);
  --info: oklch(65% 0.09 215);
  --score-excellent: oklch(55% 0.16 150);
  --score-good: oklch(65% 0.14 145);
  --score-neutral: oklch(74% 0.15 90);
  --score-warning: oklch(66% 0.18 50);
  --score-poor: oklch(54% 0.20 27);

  --chart-1: oklch(62% 0.2 42);
  --chart-2: oklch(55% 0.12 250);
  --chart-3: oklch(60% 0.14 150);
  --chart-4: oklch(65% 0.1 320);
  --chart-5: oklch(50% 0.08 75);
  --chart-6: oklch(60% 0.16 25);

  --tag-yellow: oklch(94% 0.06 95);
  --tag-yellow-fg: oklch(38% 0.08 95);
  --tag-orange: oklch(94% 0.06 45);
  --tag-orange-fg: oklch(38% 0.10 45);
  --tag-green: oklch(94% 0.04 150);
  --tag-green-fg: oklch(32% 0.08 150);
  --tag-blue: oklch(94% 0.04 250);
  --tag-blue-fg: oklch(32% 0.08 250);
  --tag-purple: oklch(94% 0.04 300);
  --tag-purple-fg: oklch(38% 0.08 300);

  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.04);
  --shadow-md: 0 2px 8px oklch(0% 0 0 / 0.06), 0 1px 2px oklch(0% 0 0 / 0.04);
  --shadow-lg: 0 4px 16px oklch(0% 0 0 / 0.08), 0 2px 4px oklch(0% 0 0 / 0.04);
  --shadow-xl: 0 8px 32px oklch(0% 0 0 / 0.10), 0 4px 8px oklch(0% 0 0 / 0.04);

  --duration-fast: 120ms;
  --duration-normal: 180ms;
  --duration-slow: 280ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Code", monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --ux-bg: var(--background);
  --ux-surface: var(--card);
  --ux-surface-soft: var(--muted);
  --ux-border: var(--border);
  --ux-ink: var(--foreground);
  --ux-ink-muted: var(--muted-foreground);
  --ux-accent: var(--primary);
  --ux-accent-strong: color-mix(in oklch, var(--primary) 88%, black);
  --ux-accent-soft: var(--primary-12);
  --ux-contrast: var(--chart-2);
  --ux-contrast-soft: color-mix(in oklch, var(--chart-2) 14%, transparent);
  --ux-mint: var(--chart-3);
  --ux-mint-soft: color-mix(in oklch, var(--chart-3) 14%, transparent);
  --ux-radius-sm: var(--radius-sm);
  --ux-radius-md: var(--radius-md);
  --ux-radius-lg: var(--radius-lg);
  --ux-shadow-sm: var(--shadow-sm);
  --ux-shadow-md: var(--shadow-md);
  --ux-shadow-lg: var(--shadow-lg);
  --ux-metric-nps: var(--score-excellent);
  --ux-metric-csat: var(--chart-2);
  --ux-metric-ueq: var(--primary);
}

.dark,
[data-theme="dark"] {
  --background: oklch(13% 0.015 75);
  --foreground: oklch(95% 0.006 85);
  --card: oklch(16% 0.018 75);
  --card-foreground: oklch(95% 0.006 85);
  --popover: oklch(18% 0.02 75);
  --popover-foreground: oklch(95% 0.006 85);
  --fg-1: oklch(95% 0.006 85);
  --fg-2: oklch(80% 0.01 75);
  --fg-3: oklch(58% 0.015 75);
  --fg-4: oklch(45% 0.015 75);
  --primary: oklch(68% 0.2 45);
  --primary-foreground: oklch(13% 0.015 75);
  --primary-12: oklch(68% 0.2 45 / 18%);
  --secondary: oklch(22% 0.02 75);
  --secondary-foreground: oklch(95% 0.006 85);
  --muted: oklch(20% 0.015 75);
  --muted-foreground: oklch(58% 0.015 75);
  --accent: oklch(24% 0.025 75);
  --accent-foreground: oklch(95% 0.006 85);
  --border: oklch(95% 0.006 85 / 10%);
  --input: oklch(95% 0.006 85 / 12%);
  --ring: oklch(68% 0.2 45 / 40%);
  --destructive: oklch(60% 0.18 28);
  --success: oklch(65% 0.14 155);
  --warning: oklch(75% 0.15 75);
  --info: oklch(65% 0.12 250);
  --chart-1: oklch(68% 0.2 45);
  --chart-2: oklch(62% 0.12 250);
  --chart-3: oklch(65% 0.14 150);
  --chart-4: oklch(70% 0.1 320);
  --chart-5: oklch(55% 0.06 75);
  --chart-6: oklch(62% 0.16 25);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--background);
  color: var(--foreground);
  color-scheme: light;
}

html.dark {
  color-scheme: dark;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--background) !important;
  color: var(--foreground) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-feature-settings: "rlig" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

::selection {
  background: var(--primary-12);
  color: var(--foreground);
}

h1,
.h1 {
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: clamp(2.35rem, 5vw, 4.8rem);
  font-weight: var(--weight-bold);
  line-height: 1.02;
  letter-spacing: var(--tracking-tight);
}

h2,
.h2 {
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: clamp(1.65rem, 3vw, 2.7rem);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

h3,
.h3 {
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

h4,
.h4 {
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

p,
li {
  color: var(--fg-2);
}

code,
kbd,
samp,
pre,
.font-data,
.metric-display,
.tabular-nums {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1, "ss01" 1;
  font-variant-numeric: tabular-nums;
}

.font-label,
.label-caps {
  color: var(--muted-foreground);
  font-size: 0.6875rem;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.metric-display {
  color: var(--foreground);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}

#main-content {
  min-height: 62vh;
  background: var(--background);
}

.page-transition {
  animation: ux-fade-up var(--duration-slow) var(--ease-out);
}

.lazy-load {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}

.lazy-load.loaded {
  opacity: 1;
  transform: translateY(0);
}

@keyframes ux-fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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