/* =========================================================================
   Xpandi Design System v1.0 — portable token sheet
   Drop this file into any project and import it once:
     <link rel="stylesheet" href="/xpandi-design-system.css">
   Works with or without Tailwind. With Tailwind v4, map the tokens in
   `@theme inline` (see DESIGN-SYSTEM.md).
   Fonts: Satoshi (UI/display) + JetBrains Mono (accents/code).
   ========================================================================= */

:root {
  /* ---------- radii ---------- */
  --radius: 1rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);

  /* ---------- base surface / ink ---------- */
  --background: oklch(1 0 0);
  --foreground: oklch(0.16 0.005 270);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.16 0.005 270);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.16 0.005 270);
  --primary: oklch(0.16 0.005 270);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.978 0.003 270);
  --secondary-foreground: oklch(0.16 0.005 270);
  --muted: oklch(0.97 0.003 270);
  --muted-foreground: oklch(0.52 0.012 270);

  /* ---------- brand accent (swap only these 3 to re-skin) ---------- */
  --brand: oklch(0.58 0.24 290);
  --brand-soft: oklch(0.95 0.055 292);
  --brand-foreground: oklch(1 0 0);
  --accent: var(--brand);
  --accent-foreground: var(--brand-foreground);

  /* ---------- structural neutrals ---------- */
  --hairline: oklch(0.93 0.003 270);
  --rule: oklch(0.93 0.003 270);
  --panel: oklch(0.985 0.003 270);
  --surface: oklch(0.992 0.002 270);
  --surface-elevated: oklch(0.97 0.006 285);
  --ink-soft: oklch(0.35 0.008 270);
  --border: oklch(0.93 0.003 270);
  --input: oklch(0.93 0.003 270);
  --ring: var(--brand);

  /* ---------- status ---------- */
  --success: oklch(0.72 0.18 150);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.984 0.003 247.858);

  /* ---------- data viz ---------- */
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);

  /* ---------- typography ---------- */
  --font-sans: "Satoshi", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --tracking-display: -0.035em;
  --tracking-heading: -0.03em;

  /* ---------- motion ---------- */
  --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-slow: 700ms;
}

.dark {
  --background: oklch(0.129 0.042 264.695);
  --foreground: oklch(0.984 0.003 247.858);
  --card: oklch(0.208 0.042 265.755);
  --card-foreground: oklch(0.984 0.003 247.858);
  --popover: oklch(0.208 0.042 265.755);
  --popover-foreground: oklch(0.984 0.003 247.858);
  --primary: oklch(0.929 0.013 255.508);
  --primary-foreground: oklch(0.208 0.042 265.755);
  --secondary: oklch(0.279 0.041 260.031);
  --secondary-foreground: oklch(0.984 0.003 247.858);
  --muted: oklch(0.279 0.041 260.031);
  --muted-foreground: oklch(0.704 0.04 256.788);

  --brand: oklch(0.64 0.24 292);
  --brand-soft: oklch(0.32 0.095 292);
  --brand-foreground: oklch(0.984 0.003 247.858);
  --accent: oklch(0.62 0.24 292);
  --accent-foreground: oklch(0.984 0.003 247.858);

  --hairline: oklch(1 0 0 / 10%);
  --rule: oklch(1 0 0 / 10%);
  --panel: oklch(0.17 0.043 264.695);
  --surface: oklch(0.17 0.043 264.695);
  --surface-elevated: oklch(0.235 0.045 265.755);
  --ink-soft: oklch(0.78 0.032 256.788);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.64 0.24 292);

  --success: oklch(0.72 0.18 150);
  --destructive: oklch(0.704 0.191 22.216);
  --destructive-foreground: oklch(0.984 0.003 247.858);
}

/* =========================== primitives ================================= */

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "ss02", "tnum";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  letter-spacing: var(--tracking-heading);
  font-weight: 500;
}

code, kbd, .font-mono, .font-mono-accent { font-family: var(--font-mono); }

.tnum { font-variant-numeric: tabular-nums; }

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.02em;
  font-weight: 500;
  color: var(--muted-foreground);
}

.display-light { font-weight: 300; letter-spacing: var(--tracking-display); }
.display-black { font-weight: 500; letter-spacing: -0.045em; }
.font-display { font-family: var(--font-sans); font-weight: 500; letter-spacing: var(--tracking-display); }

/* ---------- surfaces ---------- */
.hairline { border-color: var(--hairline); }
.rule { border-color: var(--rule); }
.bg-panel { background-color: var(--panel); }
.bg-surface { background-color: var(--surface); }
.bg-surface-elevated { background-color: var(--surface-elevated); }
.text-ink-soft { color: var(--ink-soft); }
.bg-brand-soft { background-color: var(--brand-soft); }

/* ---------- elevation ---------- */
.shadow-soft {
  box-shadow:
    0 1px 0 0 color-mix(in oklab, var(--foreground) 4%, transparent),
    0 8px 24px -12px color-mix(in oklab, var(--foreground) 12%, transparent);
}
.shadow-pop,
.shadow-card {
  box-shadow:
    0 1px 0 0 color-mix(in oklab, var(--foreground) 5%, transparent),
    0 24px 60px -24px color-mix(in oklab, var(--foreground) 22%, transparent);
}
.shadow-glow { box-shadow: 0 20px 60px -24px color-mix(in oklab, var(--brand) 45%, transparent); }
.ring-hairline { box-shadow: inset 0 0 0 1px var(--hairline); }

/* ---------- brand gradients & textures ---------- */
.bg-gradient-primary {
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--brand) 96%, white 4%) 0%,
    var(--brand) 48%,
    oklch(0.47 0.22 286) 100%);
}
.text-gradient-primary {
  background-image: linear-gradient(135deg,
    color-mix(in oklab, var(--brand) 88%, white 12%) 0%,
    var(--brand) 55%,
    oklch(0.47 0.22 286) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.text-fade {
  background-image: linear-gradient(180deg,
    color-mix(in oklab, var(--foreground) 100%, transparent) 0%,
    color-mix(in oklab, var(--foreground) 95%, transparent) 40%,
    color-mix(in oklab, var(--foreground) 60%, transparent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.bg-hero-glow {
  background-image:
    radial-gradient(60% 50% at 50% 0%, color-mix(in oklab, var(--brand) 16%, transparent) 0%, transparent 60%),
    radial-gradient(40% 40% at 80% 30%, color-mix(in oklab, var(--brand) 8%, transparent) 0%, transparent 70%);
}
.bg-dotted {
  background-image: radial-gradient(color-mix(in oklab, var(--foreground) 8%, transparent) 1px, transparent 1px);
  background-size: 20px 20px;
}
.progress-fill {
  background: linear-gradient(90deg, var(--foreground), var(--brand));
  box-shadow: 0 0 14px color-mix(in oklab, var(--brand) 45%, transparent);
}

/* ---------- interaction & motion ---------- */
.card-hover {
  transition: transform var(--dur-base) var(--ease-out-expo),
              box-shadow var(--dur-base) var(--ease-out-expo),
              border-color var(--dur-base);
}
.card-hover:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 0 color-mix(in oklab, var(--foreground) 5%, transparent),
    0 24px 60px -24px color-mix(in oklab, var(--foreground) 22%, transparent);
  border-color: color-mix(in oklab, var(--brand) 35%, var(--border));
}

.scrollbar-none { scrollbar-width: none; }
.scrollbar-none::-webkit-scrollbar { display: none; }

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--muted) 80%, var(--foreground) 0%) 0%,
    color-mix(in oklab, var(--muted) 72%, var(--foreground) 8%) 50%,
    color-mix(in oklab, var(--muted) 80%, var(--foreground) 0%) 100%);
  background-size: 200% 100%;
  animation: shimmer 2.2s ease-in-out infinite;
  border-radius: 0.75rem;
}

@keyframes soft-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.85); }
}
.animate-soft-pulse { animation: soft-pulse 2.2s ease-in-out infinite; }

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.animate-marquee { animation: marquee 40s linear infinite; }

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease-out-expo),
              transform var(--dur-slow) var(--ease-out-expo);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .animate-marquee, .animate-soft-pulse, .skeleton { animation: none; }
}