/* ============================================================================
   NiyuktiAI Design Tokens
   Lifted verbatim from the React build's globals.css. These were already
   plain CSS custom properties, so the colours, radii, shadows and type scale
   are the same values the old UI painted with — only the framework around
   them changed. Nothing here is Bootstrap's; Bootstrap's own variables are
   pointed at these in app.css, so one palette drives both.
   ========================================================================== */

:root {
  /* --- Brand scale (violet) ------------------------------------------------ *
   * Anchored on #6D3DF5, which is the landing page's own primary, so the app
   * behind the login is visibly the same product as the page that sold it.
   * Hue is held at 286 across the whole scale and only lightness and chroma
   * move, which is what keeps a tint at 50 and a shadow at 950 reading as the
   * same colour rather than two different purples.                            */
  --brand-50: oklch(0.972 0.014 286);
  --brand-100: oklch(0.946 0.031 286);
  --brand-200: oklch(0.898 0.062 286);
  --brand-300: oklch(0.828 0.108 286);
  --brand-400: oklch(0.724 0.169 286);
  --brand-500: oklch(0.635 0.221 286);
  --brand-600: oklch(0.521 0.253 286); /* #6936ef — the landing primary */
  --brand-700: oklch(0.452 0.222 286);
  --brand-800: oklch(0.39 0.183 286);
  --brand-900: oklch(0.336 0.146 286);
  --brand-950: oklch(0.246 0.108 286);

  /* --- Accent scale (deep ink, for contrast against the violet) ------------ */
  --accent-50: oklch(0.971 0.004 265);
  --accent-100: oklch(0.94 0.007 265);
  --accent-200: oklch(0.887 0.011 265);
  --accent-300: oklch(0.808 0.015 265);
  --accent-400: oklch(0.63 0.019 264);
  --accent-500: oklch(0.478 0.021 264);
  --accent-600: oklch(0.386 0.021 265);
  --accent-700: oklch(0.315 0.02 266);
  --accent-800: oklch(0.256 0.019 266);
  --accent-900: oklch(0.21 0.018 267);

  /* --- Neutral surface ramp (cooled toward lavender) ----------------------- *
   * Carried round to the brand's own hue at a chroma you would not name as a
   * colour. The reasoning is unchanged from when these greys were warm — a
   * neutral that leans away from the accent reads dirty beside it — only the
   * accent moved, so the greys followed it from gold to violet. This is also
   * the landing page's ground (#FAFAFF), so the two surfaces meet cleanly.    */
  --neutral-0: oklch(1 0 0);
  --neutral-25: oklch(0.985 0.003 286);
  --neutral-50: oklch(0.976 0.005 286);
  --neutral-100: oklch(0.957 0.008 286);
  --neutral-200: oklch(0.925 0.012 286);
  --neutral-300: oklch(0.873 0.015 286);
  --neutral-400: oklch(0.715 0.018 286);
  --neutral-500: oklch(0.567 0.019 286);
  --neutral-600: oklch(0.453 0.019 286);
  --neutral-700: oklch(0.373 0.018 286);
  --neutral-800: oklch(0.28 0.017 286);
  --neutral-900: oklch(0.212 0.016 286);
  --neutral-950: oklch(0.149 0.014 286);

  /* --- Status ramps ------------------------------------------------------- */
  --success-50: oklch(0.972 0.024 158);
  --success-100: oklch(0.944 0.049 157);
  --success-200: oklch(0.895 0.083 156);
  --success-500: oklch(0.7 0.15 158);
  --success-600: oklch(0.613 0.135 159);
  --success-700: oklch(0.514 0.11 160);
  --success-900: oklch(0.36 0.07 161);

  --warning-50: oklch(0.98 0.028 84);
  --warning-100: oklch(0.958 0.062 87);
  --warning-200: oklch(0.917 0.106 87);
  --warning-500: oklch(0.795 0.157 74);
  --warning-600: oklch(0.706 0.157 60);
  --warning-700: oklch(0.588 0.14 51);
  --warning-900: oklch(0.41 0.096 46);

  --danger-50: oklch(0.972 0.014 18);
  --danger-100: oklch(0.943 0.031 18);
  --danger-200: oklch(0.892 0.058 18);
  --danger-500: oklch(0.637 0.208 25);
  --danger-600: oklch(0.577 0.214 27);
  --danger-700: oklch(0.505 0.19 27);
  --danger-900: oklch(0.365 0.13 28);

  --info-50: oklch(0.977 0.014 236);
  --info-100: oklch(0.951 0.028 237);
  --info-200: oklch(0.901 0.055 238);
  --info-500: oklch(0.685 0.15 240);
  --info-600: oklch(0.588 0.158 243);
  --info-700: oklch(0.5 0.14 244);
  --info-900: oklch(0.36 0.095 245);

  /* --- Semantic surface tokens -------------------------------------------- */
  --background: oklch(0.982 0.004 286); /* #fafaff — the landing page's ground */
  --foreground: oklch(0.211 0.013 267); /* #111827 */

  --surface: var(--neutral-0);
  --surface-subtle: oklch(0.966 0.008 286); /* #f5f3ff */
  --surface-sunken: var(--neutral-100);
  --surface-inverse: var(--neutral-900);
  --surface-inverse-foreground: var(--neutral-50);

  --card: var(--neutral-0);
  --card-foreground: var(--neutral-900);
  --popover: var(--neutral-0);
  --popover-foreground: var(--neutral-900);

  --primary: var(--brand-600);          /* #6936ef */
  --primary-hover: var(--brand-700);
  --primary-foreground: oklch(1 0 0);
  --primary-subtle: var(--brand-50);
  --primary-subtle-foreground: var(--brand-700);

  --secondary: var(--neutral-100);
  --secondary-foreground: var(--neutral-800);

  --muted: var(--neutral-100);
  --muted-foreground: var(--neutral-500);

  --accent: var(--accent-600);
  --accent-foreground: oklch(1 0 0);
  --accent-subtle: var(--accent-50);
  --accent-subtle-foreground: var(--accent-700);

  --destructive: var(--danger-600);
  --destructive-foreground: oklch(1 0 0);

  --success: var(--success-600);
  --success-foreground: oklch(1 0 0);
  --warning: var(--warning-600);
  --warning-foreground: oklch(1 0 0);
  --info: var(--info-600);
  --info-foreground: oklch(1 0 0);

  --border: oklch(0.928 0.012 286);     /* #e7e3f6 — the landing hairline */
  --border-strong: var(--neutral-300);
  --input: var(--neutral-300);
  --ring: var(--brand-500);

  /* ---------------------------------------------------------------------- *
   * Night palette — the marketing surface only.                            *
   *                                                                        *
   * The signed-in product stays light; the landing page is its own dark    *
   * world, so these live as a separate scale rather than a `.dark` theme   *
   * that would leak into the workspace.                                    *
   * ---------------------------------------------------------------------- */
  --night-950: oklch(0.125 0.028 277);
  --night-900: oklch(0.163 0.033 277);
  --night-850: oklch(0.196 0.036 277);
  --night-800: oklch(0.232 0.039 277);
  --night-700: oklch(0.303 0.043 277);
  --night-600: oklch(0.412 0.045 277);
  --night-400: oklch(0.632 0.038 277);
  --night-300: oklch(0.742 0.030 277);
  --night-200: oklch(0.846 0.022 277);

  --violet-300: oklch(0.809 0.105 293);
  --violet-400: oklch(0.702 0.166 292);
  --violet-500: oklch(0.606 0.223 292);
  --violet-600: oklch(0.541 0.245 293);

  /* --- Radius ------------------------------------------------------------- */
  --radius: 0.75rem;

  /* --- Elevation ---------------------------------------------------------- */
  --elevation-xs: 0 1px 2px 0 oklch(0.214 0.017 267 / 0.05);
  --elevation-sm: 0 1px 3px 0 oklch(0.214 0.017 267 / 0.06), 0 1px 2px -1px oklch(0.214 0.017 267 / 0.05);
  --elevation-md: 0 4px 14px -3px oklch(0.214 0.017 267 / 0.08), 0 2px 5px -2px oklch(0.214 0.017 267 / 0.05);
  --elevation-lg: 0 14px 32px -8px oklch(0.214 0.017 267 / 0.12), 0 4px 12px -4px oklch(0.214 0.017 267 / 0.06);
  --elevation-xl: 0 28px 56px -14px oklch(0.214 0.017 267 / 0.16), 0 8px 20px -8px oklch(0.214 0.017 267 / 0.07);
  --elevation-brand: 0 10px 28px -8px oklch(0.535 0.198 267 / 0.35);
}

.dark {
  --background: var(--neutral-950);
  --foreground: var(--neutral-100);

  --surface: var(--neutral-900);
  --surface-subtle: oklch(0.185 0.016 267);
  --surface-sunken: var(--neutral-950);
  --surface-inverse: var(--neutral-100);
  --surface-inverse-foreground: var(--neutral-900);

  --card: var(--neutral-900);
  --card-foreground: var(--neutral-100);
  --popover: var(--neutral-900);
  --popover-foreground: var(--neutral-100);

  --primary: var(--brand-500);
  --primary-hover: var(--brand-400);
  --primary-foreground: oklch(0.15 0.015 268);
  --primary-subtle: oklch(0.278 0.07 267);
  --primary-subtle-foreground: var(--brand-200);

  --secondary: var(--neutral-800);
  --secondary-foreground: var(--neutral-100);

  --muted: var(--neutral-800);
  --muted-foreground: var(--neutral-400);

  --accent: var(--accent-500);
  --accent-foreground: oklch(0.15 0.015 268);
  --accent-subtle: oklch(0.29 0.08 303);
  --accent-subtle-foreground: var(--accent-200);

  --destructive: var(--danger-500);
  --success: var(--success-500);
  --warning: var(--warning-500);
  --info: var(--info-500);

  --border: oklch(0.32 0.017 266);
  --border-strong: oklch(0.4 0.018 266);
  --input: oklch(0.36 0.017 266);
  --ring: var(--brand-400);

}

/* The type scale and semantic aliases. In the React build these lived in
   Tailwind's `@theme inline` block, which only ever held custom properties —
   the wrapper is gone, the values are untouched. */
:root {
  /* Typography ------------------------------------------------------------- */
  --font-sans: var(--font-inter), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /*
   * Product UI is sans. The serif is a *marketing* voice — scoped to that
   * surface below rather than set here, because a serif on a dashboard's
   * card headings reads decorative where it should read functional.
   */
  --font-display: var(--font-jakarta), var(--font-inter), ui-sans-serif, system-ui, sans-serif;
  --font-serif: var(--font-playfair), Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
  --font-hand: var(--font-caveat), "Segoe Script", cursive;

  --text-2xs: 0.6875rem;
  --text-2xs--line-height: 1rem;
  --text-2xs--letter-spacing: 0.01em;
  --text-xs: 0.75rem;
  --text-xs--line-height: 1.125rem;
  --text-sm: 0.8125rem;
  --text-sm--line-height: 1.25rem;
  --text-base: 0.875rem;
  --text-base--line-height: 1.4375rem;
  --text-md: 0.9375rem;
  --text-md--line-height: 1.5rem;
  --text-lg: 1.0625rem;
  --text-lg--line-height: 1.625rem;
  --text-xl: 1.25rem;
  --text-xl--line-height: 1.75rem;
  --text-2xl: 1.5rem;
  --text-2xl--line-height: 2rem;
  --text-2xl--letter-spacing: -0.014em;
  --text-3xl: 1.875rem;
  --text-3xl--line-height: 2.25rem;
  --text-3xl--letter-spacing: -0.02em;
  --text-4xl: 2.25rem;
  --text-4xl--line-height: 2.625rem;
  --text-4xl--letter-spacing: -0.024em;
  --text-5xl: 2.875rem;
  --text-5xl--line-height: 3.125rem;
  --text-5xl--letter-spacing: -0.028em;
  --text-6xl: 3.5rem;
  --text-6xl--line-height: 3.75rem;
  --text-6xl--letter-spacing: -0.032em;

  /* Radius ----------------------------------------------------------------- */
  --radius-xs: calc(var(--radius) - 6px);
  --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) + 16px);

  /* Elevation -------------------------------------------------------------- */
  --shadow-xs: var(--elevation-xs);
  --shadow-sm: var(--elevation-sm);
  --shadow-md: var(--elevation-md);
  --shadow-lg: var(--elevation-lg);
  --shadow-xl: var(--elevation-xl);
  --shadow-brand: var(--elevation-brand);

  /* Colour ----------------------------------------------------------------- */
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-surface: var(--surface);
  --color-surface-subtle: var(--surface-subtle);
  --color-surface-sunken: var(--surface-sunken);
  --color-surface-inverse: var(--surface-inverse);
  --color-surface-inverse-foreground: var(--surface-inverse-foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-hover: var(--primary-hover);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary-subtle: var(--primary-subtle);
  --color-primary-subtle-foreground: var(--primary-subtle-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent-subtle: var(--accent-subtle);
  --color-accent-subtle-foreground: var(--accent-subtle-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
  --color-info: var(--info);
  --color-info-foreground: var(--info-foreground);
  --color-border: var(--border);
  --color-border-strong: var(--border-strong);
  --color-input: var(--input);
  --color-ring: var(--ring);

  --color-brand-50: var(--brand-50);
  --color-brand-100: var(--brand-100);
  --color-brand-200: var(--brand-200);
  --color-brand-300: var(--brand-300);
  --color-brand-400: var(--brand-400);
  --color-brand-500: var(--brand-500);
  --color-brand-600: var(--brand-600);
  --color-brand-700: var(--brand-700);
  --color-brand-800: var(--brand-800);
  --color-brand-900: var(--brand-900);
  --color-brand-950: var(--brand-950);

  --color-ai-50: var(--accent-50);
  --color-ai-100: var(--accent-100);
  --color-ai-200: var(--accent-200);
  --color-ai-300: var(--accent-300);
  --color-ai-400: var(--accent-400);
  --color-ai-500: var(--accent-500);
  --color-ai-600: var(--accent-600);
  --color-ai-700: var(--accent-700);
  --color-ai-800: var(--accent-800);
  --color-ai-900: var(--accent-900);

  --color-success-50: var(--success-50);
  --color-success-100: var(--success-100);
  --color-success-200: var(--success-200);
  --color-success-500: var(--success-500);
  --color-success-600: var(--success-600);
  --color-success-700: var(--success-700);
  --color-success-900: var(--success-900);
  --color-warning-50: var(--warning-50);
  --color-warning-100: var(--warning-100);
  --color-warning-200: var(--warning-200);
  --color-warning-500: var(--warning-500);
  --color-warning-600: var(--warning-600);
  --color-warning-700: var(--warning-700);
  --color-warning-900: var(--warning-900);
  --color-danger-50: var(--danger-50);
  --color-danger-100: var(--danger-100);
  --color-danger-200: var(--danger-200);
  --color-danger-500: var(--danger-500);
  --color-danger-600: var(--danger-600);
  --color-danger-700: var(--danger-700);
  --color-danger-900: var(--danger-900);
  --color-info-50: var(--info-50);
  --color-info-100: var(--info-100);
  --color-info-200: var(--info-200);
  --color-info-500: var(--info-500);
  --color-info-600: var(--info-600);
  --color-info-700: var(--info-700);
  --color-info-900: var(--info-900);

  --color-neutral-25: var(--neutral-25);
  --color-neutral-50: var(--neutral-50);
  --color-neutral-100: var(--neutral-100);
  --color-neutral-200: var(--neutral-200);
  --color-neutral-300: var(--neutral-300);
  --color-neutral-400: var(--neutral-400);
  --color-neutral-500: var(--neutral-500);
  --color-neutral-600: var(--neutral-600);
  --color-neutral-700: var(--neutral-700);
  --color-neutral-800: var(--neutral-800);
  --color-neutral-900: var(--neutral-900);
  --color-neutral-950: var(--neutral-950);

  /* Motion ----------------------------------------------------------------- */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --animate-shimmer: shimmer 1.8s ease-in-out infinite;
  --animate-marquee: marquee 38s linear infinite;
  --animate-aurora: aurora 22s ease-in-out infinite;
  --animate-float-slow: float-slow 7s ease-in-out infinite;

  /* Night palette ---------------------------------------------------------- */
  --color-night-950: var(--night-950);
  --color-night-900: var(--night-900);
  --color-night-850: var(--night-850);
  --color-night-800: var(--night-800);
  --color-night-700: var(--night-700);
  --color-night-600: var(--night-600);
  --color-night-400: var(--night-400);
  --color-night-300: var(--night-300);
  --color-night-200: var(--night-200);

  --color-violet-300: var(--violet-300);
  --color-violet-400: var(--violet-400);
  --color-violet-500: var(--violet-500);
  --color-violet-600: var(--violet-600);
}

@keyframes shimmer {
  0% {
    background-position: -180% 0;
  }
  100% {
    background-position: 180% 0;
  }
}

/* The track is duplicated in the markup, so half a translation is one loop. */
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Slow drift of the brand light behind hero and CTA sections. */
@keyframes aurora {
  0%,
  100% {
    transform: translate3d(-6%, -4%, 0) scale(1);
    opacity: 0.75;
  }
  33% {
    transform: translate3d(5%, 3%, 0) scale(1.12);
    opacity: 1;
  }
  66% {
    transform: translate3d(-3%, 6%, 0) scale(1.05);
    opacity: 0.85;
  }
}

@keyframes float-slow {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* --- Small helpers the markup uses directly ------------------------------ */
  .text-balance {
    text-wrap: balance;
  }
  .text-pretty {
    text-wrap: pretty;
  }
  .tabular {
    font-variant-numeric: tabular-nums;
  }

  /* Narrow, unobtrusive scrollbars for in-app scroll regions. */
  .scrollbar-slim {
    scrollbar-width: thin;
    scrollbar-color: var(--neutral-300) transparent;
  }
  .scrollbar-slim::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  .scrollbar-slim::-webkit-scrollbar-track {
    background: transparent;
  }
  .scrollbar-slim::-webkit-scrollbar-thumb {
    background-color: var(--neutral-300);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
  }

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

  /* Soft brand wash used behind hero and feature surfaces. */
  .bg-brand-wash {
    background-image:
      radial-gradient(60rem 30rem at 50% -14rem, var(--brand-100) 0%, transparent 62%),
      radial-gradient(40rem 24rem at 88% 2%, var(--accent-50) 0%, transparent 60%);
  }

  .bg-grid-subtle {
    background-image:
      linear-gradient(to right, var(--neutral-200) 1px, transparent 1px),
      linear-gradient(to bottom, var(--neutral-200) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 100% 70% at 50% 0%, #000 38%, transparent 78%);
  }

  .shimmer {
    background-image: linear-gradient(90deg, transparent 0%, oklch(1 0 0 / 0.6) 50%, transparent 100%);
    background-size: 180% 100%;
    animation: var(--animate-shimmer);
  }

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

/* ============================================================================
   Marketing surface
   ========================================================================== */

/*
 * Re-points the display face to the serif for everything inside the landing
 * page.
 *
 * Note this targets the utility class, not the custom property. `@theme inline`
 * *inlines* token values into the generated utility, so `font-display` compiles
 * to a literal font stack rather than `var(--font-display)` — redefining the
 * property on an ancestor therefore does nothing at all. The descendant
 * selector also out-specifies the single-class utility, which is what makes it
 * win without `!important`.
 */
[data-surface="marketing"] .font-display {
  font-family: var(--font-playfair), Georgia, "Times New Roman", serif;
}