@import "tailwindcss";
@source "../src";
@import "tw-animate-css";
@import "@fontsource/inter/300.css";
@import "@fontsource/inter/400.css";
@import "@fontsource/inter/500.css";
@import "@fontsource/inter/600.css";
@import "@fontsource/inter/700.css";
@import "@fontsource/inter/800.css";
@import "@fontsource/inter/900.css";

@custom-variant dark (&:is(.dark *));

@layer components {
  .dashboard-page .text-accent {
    color: var(--dashboard-accent, var(--accent));
  }

  .brand-wordmark {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.055em;
    line-height: 1;
  }

  .legal-prose {
    color: var(--muted-foreground);
    font-size: 0.9375rem;
    line-height: 1.75;
  }

  .legal-prose > :first-child {
    margin-top: 0;
  }

  .legal-prose h2 {
    margin-top: 2.25rem;
    margin-bottom: 0.75rem;
    color: var(--foreground);
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.02em;
  }

  .legal-prose h3 {
    margin-top: 1.75rem;
    margin-bottom: 0.625rem;
    color: var(--foreground);
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
  }

  .legal-prose p + p,
  .legal-prose ul + p,
  .legal-prose ol + p {
    margin-top: 1rem;
  }

  .legal-prose ul,
  .legal-prose ol {
    margin-block: 0.875rem 1.25rem;
    padding-left: 1.35rem;
  }

  .legal-prose ul {
    list-style: disc;
  }

  .legal-prose ol {
    list-style: decimal;
  }

  .legal-prose li + li {
    margin-top: 0.375rem;
  }

  .legal-prose strong {
    color: var(--foreground);
    font-weight: 650;
  }

  .legal-prose a {
    color: var(--primary);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: color-mix(in oklab, var(--primary) 35%, transparent);
    text-underline-offset: 0.2em;
  }

  .legal-prose .not-prose {
    margin-block: 1.25rem;
  }
}

/*
 * Explicit hover-alpha fallback for semantic muted surfaces. This mirrors
 * Tailwind's generated `bg-muted/50` rule and keeps hover states reliable
 * when the utility appears inside conditional class strings.
 */
@layer utilities {
  @media (hover: hover) {
    .hover\:bg-muted\/50:hover {
      background-color: color-mix(in oklab, var(--muted) 50%, transparent);
    }
  }
}

/*
 * ============================================================================
 * WACRM Design Token System
 * Palette source: DCDCDD · C5C3C6 · 46494C · 4C5C68 · 1985A1
 *
 * Tokens are grouped and expressed as CSS custom properties so light + dark
 * themes swap cleanly. All utility classes (bg-*, text-*, border-*, shadow-*,
 * rounded-*, text-{scale}, ease-*, animate-*, container-*, etc.) are generated
 * by Tailwind v4 from the @theme block below.
 * ============================================================================
 */

@theme inline {
  /* ── Colors — semantic (map to :root variables) ─────────────────────────── */
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-surface: var(--surface);
  --color-surface-elevated: var(--surface-elevated);
  --color-surface-sunken: var(--surface-sunken);

  --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-foreground: var(--primary-foreground);
  --color-primary-glow: var(--primary-glow);
  --color-primary-muted: var(--primary-muted);

  /* Glow tints — derived from the live accent/primary tokens. */
  --color-glow-primary: var(--glow-primary);
  --color-glow-accent: var(--glow-accent);
  --color-glow-secondary: var(--glow-secondary);

  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary-muted: var(--secondary-muted);

  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent-strong: var(--accent-strong);
  --color-accent-readable: var(--accent-readable);
  --color-accent-muted: var(--accent-muted);

  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);

  /* Hero (dark gradient surface — theme-aware foreground) */
  --color-hero-foreground: var(--hero-foreground);
  --color-hero-foreground-muted: var(--hero-foreground-muted);
  --color-hero-accent: var(--hero-accent);

  /* Status */
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-success-muted: var(--success-muted);
  /* WhatsApp channel accent — used on marketing surfaces to signal the
     messaging channel itself, never as a UI primary. */
  --color-whatsapp: var(--whatsapp);
  --color-whatsapp-foreground: var(--whatsapp-foreground);
  --color-whatsapp-muted: var(--whatsapp-muted);

  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
  --color-warning-muted: var(--warning-muted);
  --color-danger: var(--danger);
  --color-danger-foreground: var(--danger-foreground);
  --color-danger-muted: var(--danger-muted);
  --color-destructive: var(--danger);
  --color-destructive-foreground: var(--danger-foreground);
  --color-info: var(--info);
  --color-info-foreground: var(--info-foreground);
  --color-info-muted: var(--info-muted);

  /* Presence dots */
  --color-status-online: var(--status-online);
  --color-status-away: var(--status-away);
  --color-status-busy: var(--status-busy);
  --color-status-offline: var(--status-offline);

  /* Neutrals — explicit scale for editorial usage */
  --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);

  /* Borders + focus */
  --color-border: var(--border);
  --color-border-strong: var(--border-strong);
  --color-input: var(--input);
  --color-ring: var(--ring);

  /* Charts */
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-chart-6: var(--chart-6);
  --color-chart-7: var(--chart-7);
  --color-chart-8: var(--chart-8);

  /* Sidebar */
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  /* ── Typography ─────────────────────────────────────────────────────────── */
  /* Font families — 3 roles */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-heading: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-body: var(--font-sans);

  /* Type scale — 8pt-aligned rem values with paired line-heights.
     Naming: 2xs 11 · xs 12 · sm 14 · base 16 · lg 18 · xl 20 · 2xl 24 · 3xl 30 · 4xl 36 · 5xl 48 · 6xl 60 · 7xl 72 · 8xl 84 · 9xl 96 */
  /* Inter-tuned tracking (rsms.me/inter dynamic metrics):
     Inter opens up at small sizes and tightens at large sizes. */
  --text-2xs: 0.6875rem;
  --text-2xs--line-height: 1rem;
  --text-2xs--letter-spacing: 0.01em;
  --text-xs: 0.75rem;
  --text-xs--line-height: 1rem;
  --text-xs--letter-spacing: 0.005em;
  --text-sm: 0.84375rem;
  --text-sm--line-height: 1.25rem;
  --text-sm--letter-spacing: 0em;
  --text-base: 0.875rem;
  --text-base--line-height: 1.5rem;
  --text-base--letter-spacing: -0.003em;
  --text-lg: 1.125rem;
  --text-lg--line-height: 1.6875rem;
  --text-lg--letter-spacing: -0.011em;
  --text-xl: 1.25rem;
  --text-xl--line-height: 1.75rem;
  --text-xl--letter-spacing: -0.014em;
  --text-2xl: 1.5rem;
  --text-2xl--line-height: 2rem;
  --text-2xl--letter-spacing: -0.017em;
  --text-3xl: 1.875rem;
  --text-3xl--line-height: 2.25rem;
  --text-3xl--letter-spacing: -0.019em;
  --text-4xl: 2.25rem;
  --text-4xl--line-height: 2.5rem;
  --text-4xl--letter-spacing: -0.022em;
  --text-5xl: 3rem;
  --text-5xl--line-height: 3.25rem;
  --text-5xl--letter-spacing: -0.025em;
  --text-6xl: 3.75rem;
  --text-6xl--line-height: 4rem;
  --text-6xl--letter-spacing: -0.028em;
  --text-7xl: 4.5rem;
  --text-7xl--line-height: 4.75rem;
  --text-7xl--letter-spacing: -0.032em;
  --text-8xl: 5.25rem;
  --text-8xl--line-height: 5.5rem;
  --text-8xl--letter-spacing: -0.036em;
  --text-9xl: 6rem;
  --text-9xl--line-height: 6.25rem;
  --text-9xl--letter-spacing: -0.04em;

  /* Font weights — explicit ladder */
  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* Line-height ladder — role-based */
  --leading-none: 1;
  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --leading-loose: 1.85;

  /* Letter-spacing ladder */
  --tracking-tighter: -0.04em;
  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-normal: 0em;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.08em;
  --: 0.16em;

  /* ── Spacing scale (base unit) ──────────────────────────────────────────── */
  --spacing: 0.25rem;

  /* ── Border radius ──────────────────────────────────────────────────────── */
  --radius: 0.75rem;
  --radius-xs: calc(var(--radius) - 8px);
  --radius-sm: calc(var(--radius) - 6px);
  --radius-md: calc(var(--radius) - 4px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 16px);
  --radius-full: 9999px;

  /* ── Semantic radius tokens ─────────────────────────────────────────────
   * Single source of truth for the radius each class of UI surface uses.
   * Retune every control in one place by editing these.
   *
   *   --radius-control    Buttons, inputs, tabs, toggles, badges, chips,
   *                       menu items, sidebar items — every interactive
   *                       control surface. Contract: matches rounded-control.
   *   --radius-surface    Overlays: dialogs, popovers, dropdowns, cards,
   *                       tooltip content. In lockstep with controls today.
   *   --radius-shell      Large floating shells that intentionally read
   *                       softer than a standard surface (floating/inset
   *                       sidebar frames). Kept as a distinct token so a
   *                       future retune stays centralised.
   *   --radius-pill       Circular controls (avatars, dots, switch tracks).
   *
   * Generates: rounded-control, rounded-surface, rounded-shell, rounded-pill.
   * ------------------------------------------------------------------- */
  --radius-control: var(--radius-sm);
  --radius-surface: var(--radius-sm);
  --radius-shell: var(--radius-lg);
  --radius-pill: var(--radius-full);

  /* ── Semantic control heights ───────────────────────────────────────────
   * Single source of truth for the vertical rhythm of every interactive
   * control surface. Retune the whole app in one place.
   *
   *   --height-control-sm   Compact controls (dense toolbars, filter chips)
   *   --height-control      Default row height: TabsList, Toggle, ToggleGroup,
   *                         Button (default), Input, Select, SegmentedControl.
   *                         Contract: matches Tailwind `h-9` (2.25rem / 36px).
   *   --height-control-lg   Emphasised controls (primary CTAs, hero inputs).
   *
   * Exposed by Tailwind v4 as `h-control-sm`, `h-control`, `h-control-lg`
   * (and matching min-h/max-h). Prefer these over hard-coded `h-9`.
   * ------------------------------------------------------------------- */
  --height-control-sm: 2rem; /* 32px */
  --height-control: 2.25rem; /* 36px — matches h-9 */
  --height-control-lg: 2.5rem; /* 40px */

  /* ── Semantic header height ─────────────────────────────────────────────
   * Standard chrome height for sidebar headers, app topbars, inbox panel
   * headers, and any docked toolbar that must align with the primary
   * navigation rail. Contract: matches Tailwind `h-15` (3.75rem / 60px).
   * Exposed as `h-header` / `min-h-header` / `max-h-header`.
   * ------------------------------------------------------------------- */
  --height-header: 3.75rem; /* 60px — matches h-15 */

  /* ── Shadows ────────────────────────────────────────────────────────────── */
  --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-2xl: var(--elevation-2xl);
  --shadow-inner: var(--elevation-inner);
  --shadow-glow: var(--elevation-glow);
  --shadow-brand: var(--elevation-brand);

  /* ── Breakpoints ────────────────────────────────────────────────────────── */
  --breakpoint-xs: 24rem; /* 384 */
  --breakpoint-sm: 40rem; /* 640 */
  --breakpoint-md: 48rem; /* 768 */
  --breakpoint-lg: 64rem; /* 1024 */
  --breakpoint-xl: 80rem; /* 1280 */
  --breakpoint-2xl: 96rem; /* 1536 */
  --breakpoint-3xl: 120rem; /* 1920 */

  /* ── Layout — 8pt system ────────────────────────────────────────────────── */
  /* Sidebar rail */
  --sidebar-width: 16rem; /* 256 — expanded rail */
  --sidebar-width-wide: 17.5rem; /* 280 — wide (marketing app dashboards) */
  --sidebar-width-collapsed: 3.75rem; /* 60  — icon rail (mini nav mode) */
  --sidebar-width-rail: 3rem; /* 48  — hover peek */
  --subnav-width: 13.5rem; /* 216 — settings/reports secondary rail */

  /* Header rows */
  --header-height: 3.75rem; /* 60 — primary sticky header (matches --height-header / h-15) */
  --subheader-height: 3rem; /* 48 — filters / tabs row */
  --footer-height: 3.75rem; /* 60 — matches header for symmetrical chrome */
  --commandbar-height: 2.75rem; /* 44 — mobile bottom bar */
  --page-header-height: 4.5rem; /* 72 — in-page title band */

  /* Content widths */
  --content-max-xs: 32rem; /* 512  — auth / narrow forms */
  --content-max-sm: 40rem; /* 640  — settings pane */
  --content-max-md: 48rem; /* 768  — article / prose */
  --content-max-lg: 64rem; /* 1024 — standard product page */
  --content-max-xl: 80rem; /* 1280 — dashboard */
  --content-max-2xl: 90rem; /* 1440 — marketing app default */
  --content-max-3xl: 120rem; /* 1920 — reports / super-admin data walls */
  --content-max-full: 100%;

  /* Gutters — inline padding for containers, per breakpoint */
  --gutter-mobile: 1rem; /* 16 */
  --gutter-tablet: 1.5rem; /* 24 */
  --gutter-desktop: 2rem; /* 32 */
  --gutter-wide: 2.5rem; /* 40 */

  /* Section vertical rhythm */
  --section-y-sm: 2rem; /* 32 */
  --section-y-md: 3rem; /* 48 */
  --section-y-lg: 4.5rem; /* 72 */
  --section-y-xl: 6rem; /* 96 */
  --section-y-2xl: 8rem; /* 128 */

  /* Card padding rhythm */
  --card-p-xs: 0.75rem; /* 12 */
  --card-p-sm: 1rem; /* 16 */
  --card-p-md: 1.5rem; /* 24 */
  --card-p-lg: 2rem; /* 32 */
  --card-p-xl: 2.5rem; /* 40 */

  /* Grid gaps */
  --grid-gap-xs: 0.5rem;
  --grid-gap-sm: 0.75rem;
  --grid-gap-md: 1rem;
  --grid-gap-lg: 1.5rem;
  --grid-gap-xl: 2rem;

  /* Z-index ladder */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 20;
  --z-header: 30;
  --z-drawer: 40;
  --z-overlay: 50;
  --z-modal: 60;
  --z-popover: 70;
  --z-toast: 80;
  --z-tooltip: 90;
  --z-command: 100;

  /* ── Container widths ───────────────────────────────────────────────────── */
  --container-3xs: 16rem;
  --container-2xs: 18rem;
  --container-xs: 20rem;
  --container-sm: 24rem;
  --container-md: 28rem;
  --container-lg: 32rem;
  --container-xl: 36rem;
  --container-2xl: 42rem;
  --container-3xl: 48rem;
  --container-4xl: 56rem;
  --container-5xl: 64rem;
  --container-6xl: 72rem;
  --container-7xl: 80rem;
  --container-prose: 65ch;
  --container-app: 90rem; /* 1440 — app content max */

  /* ── Motion — easings + durations ───────────────────────────────────────── */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0.9, 0.1, 1);
  --ease-snappy: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.5, 1.6, 0.4, 1);

  --duration-instant: 75ms;
  --duration-fast: 150ms;
  --duration-normal: 220ms;
  --duration-slow: 320ms;
  --duration-slower: 500ms;
  --duration-lazy: 800ms;

  /* ── Animations ─────────────────────────────────────────────────────────── */
  --animate-fade-in: fade-in 0.3s var(--ease-out) both;
  --animate-fade-out: fade-out 0.2s var(--ease-in) both;
  --animate-scale-in: scale-in 0.2s var(--ease-emphasized) both;
  --animate-scale-out: scale-out 0.15s var(--ease-in) both;
  --animate-slide-up: slide-up 0.35s var(--ease-emphasized) both;
  --animate-slide-down: slide-down 0.35s var(--ease-emphasized) both;
  --animate-slide-in-right: slide-in-right 0.3s var(--ease-emphasized) both;
  --animate-slide-in-left: slide-in-left 0.3s var(--ease-emphasized) both;
  --animate-shimmer: shimmer 2s linear infinite;
  --animate-pulse-soft: pulse-soft 2.4s var(--ease-in-out) infinite;
  --animate-float: float 6s var(--ease-in-out) infinite;
  --animate-glow: glow 2.4s var(--ease-in-out) infinite;
  --animate-blink: blink 1.2s var(--ease-in-out) infinite;
  --animate-accordion-down: accordion-down 0.22s var(--ease-emphasized) both;
  --animate-accordion-up: accordion-up 0.18s var(--ease-in) both;

  @keyframes accordion-down {
    from {
      height: 0;
      opacity: 0;
    }
    to {
      height: var(--radix-collapsible-content-height, var(--radix-accordion-content-height, auto));
      opacity: 1;
    }
  }
  @keyframes accordion-up {
    from {
      height: var(--radix-collapsible-content-height, var(--radix-accordion-content-height, auto));
      opacity: 1;
    }
    to {
      height: 0;
      opacity: 0;
    }
  }

  @keyframes fade-in {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes fade-out {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
      transform: translateY(4px);
    }
  }
  @keyframes scale-in {
    from {
      opacity: 0;
      transform: scale(0.96);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  @keyframes scale-out {
    from {
      opacity: 1;
      transform: scale(1);
    }
    to {
      opacity: 0;
      transform: scale(0.96);
    }
  }
  @keyframes slide-up {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes slide-down {
    from {
      opacity: 0;
      transform: translateY(-12px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes slide-in-right {
    from {
      opacity: 0;
      transform: translateX(16px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes slide-in-left {
    from {
      opacity: 0;
      transform: translateX(-16px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes shimmer {
    0% {
      background-position: -200% 0;
    }
    100% {
      background-position: 200% 0;
    }
  }
  @keyframes pulse-soft {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.6;
    }
  }
  @keyframes float {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-6px);
    }
  }
  @keyframes glow {
    0%,
    100% {
      box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 45%, transparent);
    }
    50% {
      box-shadow: 0 0 32px 4px color-mix(in oklab, var(--accent) 35%, transparent);
    }
  }
  @keyframes blink {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.25;
    }
  }
}

/* Stepper tab-indicator fill timer — kept outside @theme (not tied to an
   --animate-* token / animate-* utility) since Tailwind only emits
   theme-scoped @keyframes that a matching utility class references. */
@keyframes stepper-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* Flow-builder connector "marching ants" — same outside-@theme reasoning. */
@keyframes flow-dash {
  to {
    stroke-dashoffset: -16;
  }
}

/* ============================================================================
 * Light theme (default)
 * ============================================================================ */
:root {
  /* Coolors palette — warm-neutral scale keyed to
     #FFFFFF · #F5F3F4 · #D3D3D3 · #B1A7A6 · #161A1D · #0B090A */
  --neutral-50: oklch(0.966 0.002 20); /* #F5F3F4 */
  --neutral-100: oklch(0.928 0.002 20);
  --neutral-200: oklch(0.849 0 0); /* #D3D3D3 */
  --neutral-300: oklch(0.782 0.005 20);
  --neutral-400: oklch(0.708 0.007 20); /* #B1A7A6 */
  --neutral-500: oklch(0.56 0.008 20);
  --neutral-600: oklch(0.42 0.008 20);
  --neutral-700: oklch(0.3 0.008 240);
  --neutral-800: oklch(0.194 0.007 240); /* #161A1D */
  --neutral-900: oklch(0.083 0.003 25); /* #0B090A */
  --neutral-950: oklch(0.05 0.003 25);

  /* Surfaces */
  --background: oklch(100% 0 0); /* #FFFFFF */
  --foreground: oklch(0.083 0.003 25); /* #0B090A */
  --surface: oklch(100% 0 0);
  --surface-elevated: oklch(0.966 0.002 20); /* #F5F3F4 */
  --surface-sunken: oklch(0.966 0.002 20);

  --card: oklch(100% 0 0);
  --card-foreground: oklch(0.083 0.003 25);
  --popover: oklch(100% 0 0);
  --popover-foreground: oklch(0.083 0.003 25);

  /* Primary — WhatsApp deep green #075E54 */
  --primary: oklch(0.44 0.07 175);
  --primary-foreground: oklch(1 0 0);
  /* Lifted variant of the live --primary so tenant accent / white-label
     overrides propagate to every glow surface instantly. */
  --primary-glow: color-mix(in oklab, var(--primary) 88%, oklch(100% 0 0) 12%);
  --primary-muted: color-mix(in oklab, var(--primary) 10%, var(--surface));

  /* Secondary — warm off-white */
  --secondary: oklch(0.966 0.002 20);
  --secondary-foreground: oklch(0.194 0.007 240);
  --secondary-muted: color-mix(in oklab, var(--secondary) 40%, var(--surface));

  /* Accent — WhatsApp green #25D366 */
  --accent: #25d366; /* Brand default (WhatsApp green) */
  --accent-foreground: oklch(1 0 0);
  /* AA-safe derivatives of the live accent:
     --accent-strong : solid fills that carry white text (>= 4.5:1)
     --accent-readable: accent used AS TEXT on light surfaces (>= 4.5:1) */
  --accent-strong: color-mix(in oklab, var(--accent) 88%, black);
  --accent-readable: color-mix(in oklab, var(--accent) 86%, black);
  --accent-muted: color-mix(in oklab, var(--accent) 12%, var(--surface));

  --muted: oklch(0.966 0.002 20);
  --muted-foreground: oklch(53.565% 0.00123 14.461);

  /* Status */
  --success: oklch(0.62 0.14 150);
  --success-foreground: oklch(100% 0 0);
  --success-muted: color-mix(in oklab, var(--success) 12%, var(--surface));
  --whatsapp: oklch(0.75 0.174 152); /* #25D366 */
  --whatsapp-foreground: oklch(0.16 0.02 152);
  --whatsapp-muted: color-mix(in oklab, var(--whatsapp) 14%, var(--surface));
  --warning: oklch(0.78 0.14 75);
  --warning-foreground: oklch(0.22 0.02 60);
  --warning-muted: color-mix(in oklab, var(--warning) 15%, var(--surface));
  --danger: oklch(0.487 0.216 28); /* #BA181B */
  --danger-foreground: oklch(100% 0 0);
  --danger-muted: color-mix(in oklab, var(--danger) 12%, var(--surface));
  --info: oklch(0.55 0.14 240);
  --info-foreground: oklch(100% 0 0);
  --info-muted: color-mix(in oklab, var(--info) 12%, var(--surface));

  --status-online: var(--success);
  --status-away: var(--warning);
  --status-busy: var(--danger);
  --status-offline: oklch(0.708 0.007 20); /* #B1A7A6 */

  /* Borders + focus */
  --border: oklch(94% 0 0);
  --border-strong: oklch(84% 0 0);
  --input: oklch(93.5% 0 0);
  --ring: var(--accent);

  /* Chart palette — reds cascading into palette neutrals */
  --chart-1: oklch(0.44 0.07 175); /* #075E54 */
  --chart-2: oklch(0.75 0.174 152); /* #25D366 */
  --chart-3: oklch(0.293 0.148 27); /* #128C7E */
  --chart-4: oklch(0.487 0.216 28); /* #BA181B */
  --chart-5: oklch(0.708 0.007 20); /* #B1A7A6 */
  --chart-6: oklch(0.194 0.007 240); /* #161A1D */
  --chart-7: oklch(0.849 0 0); /* #D3D3D3 */
  --chart-8: oklch(0.083 0.003 25); /* #0B090A */

  /* Sidebar — near-black rail with red accent */
  --sidebar: oklch(0.083 0.003 25); /* #0B090A */
  --sidebar-foreground: oklch(0.966 0.002 20);
  --sidebar-primary: var(--accent);
  --sidebar-primary-foreground: oklch(100% 0 0);
  --sidebar-accent: oklch(0.194 0.007 240); /* #161A1D */
  --sidebar-accent-foreground: oklch(0.966 0.002 20);
  --sidebar-border: oklch(0.20 0.007 240);
  --sidebar-ring: var(--accent);

  /* Hero surface — dark gradient in both themes; foreground stays near-white for AA */
  --hero-foreground: oklch(0.985 0 0);
  --hero-foreground-muted: oklch(0.965 0.003 240);
  --hero-border: rgb(255 255 255 / 0.2);
  --hero-border-strong: rgb(255 255 255 / 0.4);
  --hero-surface: oklch(1 0 0);
  --hero-ring: rgb(255 255 255 / 0.8);
  --hero-ring-offset: rgb(0 0 0 / 0.4);
  /* Accent tint that stays legible on the dark hero gradient (icons, ticks). */
  --hero-accent: #00df56;
  /* Dark, brand-neutral base the hero gradient is mixed into. Keeps every
     stop dark enough for AA white text no matter how light the tenant
     accent/primary is. */
  --hero-base: oklch(0.19 0.03 170);

  /* Gradients & glows — every stop is derived from the live theme tokens
     (--primary, --accent, --secondary, --surface*) so tenant accent and
     white-label overrides flow through instantly, in both color schemes. */
  --gradient-hero: linear-gradient(
    140deg,
    color-mix(in oklab, var(--primary) 18%, var(--hero-base)) 0%,
    color-mix(in oklab, var(--primary) 34%, var(--hero-base)) 48%,
    color-mix(in oklab, var(--accent) 32%, var(--hero-base)) 100%
  );

  /* Solid accent fill — built from --accent-strong so white/foreground text
     placed on it clears AA for ANY tenant accent (raw --accent does not). */
  --gradient-accent: linear-gradient(
    135deg,
    color-mix(in oklab, var(--accent-strong) 88%, black),
    var(--accent-strong)
  );
  /* Deepened so --primary-foreground text clears AA on both stops. */
  --gradient-primary: linear-gradient(
    135deg,
    color-mix(in oklab, var(--primary) 84%, black),
    color-mix(in oklab, var(--primary-glow) 40%, color-mix(in oklab, var(--primary) 80%, black))
  );

  --gradient-secondary: linear-gradient(
    135deg,
    var(--secondary),
    color-mix(in oklab, var(--secondary) 72%, var(--accent) 28%)
  );
  --gradient-subtle: linear-gradient(
    180deg,
    var(--surface),
    color-mix(in oklab, var(--accent) 6%, var(--surface-elevated))
  );
  --gradient-surface: linear-gradient(
    180deg,
    var(--surface-elevated),
    color-mix(in oklab, var(--primary) 4%, var(--surface-sunken))
  );
  --gradient-mesh:
    radial-gradient(
      at 20% 10%,
      color-mix(in oklab, var(--accent) 22%, transparent) 0px,
      transparent 55%
    ),
    radial-gradient(
      at 85% 20%,
      color-mix(in oklab, var(--primary) 22%, transparent) 0px,
      transparent 50%
    ),
    radial-gradient(
      at 70% 90%,
      color-mix(in oklab, var(--accent) 20%, transparent) 0px,
      transparent 55%
    );
  --gradient-glow: radial-gradient(
    circle at 50% 50%,
    color-mix(in oklab, var(--primary-glow) 45%, transparent) 0%,
    color-mix(in oklab, var(--accent) 18%, transparent) 45%,
    transparent 72%
  );

  /* Glow tints (used for blurred orbs / focus halos). */
  --glow-primary: color-mix(in oklab, var(--primary-glow) 30%, transparent);
  --glow-accent: color-mix(in oklab, var(--accent) 28%, transparent);
  --glow-secondary: color-mix(in oklab, var(--secondary) 40%, transparent);

  /* ── Elevation system — shadow-free ──────────────────────────────────────
     Depth is expressed through border weight + surface tint (no box-shadow).
     Five levels: 0 flat · 1 raised · 2 elevated · 3 floating · 4 overlay. */
  --elevation-0-bg: transparent;
  --elevation-0-border: transparent;
  --elevation-1-bg: var(--surface);
  --elevation-1-border: var(--border);
  --elevation-2-bg: var(--surface-elevated);
  --elevation-2-border: var(--border);
  --elevation-3-bg: var(--popover);
  --elevation-3-border: var(--border-strong);
  --elevation-4-bg: var(--popover);
  --elevation-4-border: var(--border-strong);
  --elevation-inset-tint: color-mix(in oklab, var(--foreground) 4%, transparent);
  /* Legacy shadow slots — kept as no-ops so any residual `shadow-*` class is inert. */
  --elevation-xs: none;
  --elevation-sm: none;
  --elevation-md: none;
  --elevation-lg: none;
  --elevation-xl: none;
  --elevation-2xl: none;
  --elevation-inner: none;
  --elevation-glow: none;
  --elevation-brand: none;

  /* Component sizing tokens */
  --size-icon-xs: 0.75rem; /* 12 */
  --size-icon-sm: 1rem; /* 16 */
  --size-icon-md: 1.25rem; /* 20 */
  --size-icon-lg: 1.5rem; /* 24 */
  --size-icon-xl: 2rem; /* 32 */
  --size-icon-2xl: 2.5rem; /* 40 */

  --size-button-xs: 1.75rem; /* 28 */
  --size-button-sm: 2rem; /* 32 */
  --size-button-md: 2.25rem; /* 36 */
  --size-button-lg: 2.75rem; /* 44 */
  --size-button-xl: 3.25rem; /* 52 */

  --size-input-sm: 2rem;
  --size-input-md: 2.25rem;
  --size-input-lg: 2.75rem;
  --size-input-xl: 3.25rem;
}

/* The rest of the app is intentionally shadow-free (see the "Elevation
   system" comment above — depth comes from border + surface tint there).
   The marketing landing page wants real drop shadows though, so this scopes
   working "shadow" and "hover:shadow" utility values to just the landing
   route instead of reintroducing box-shadow app-wide. Applied to the root
   wrapper in src/routes/index.tsx (LandingPage). */
.landing-shadows {
  --elevation-xs: 0 1px 2px rgb(0 0 0 / 0.05);
  --elevation-sm: 0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --elevation-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --elevation-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --elevation-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --elevation-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

/* ============================================================================
 * Dark theme
 * ============================================================================ */
.dark {
  --neutral-50: oklch(0.966 0.002 20);
  --neutral-100: oklch(0.928 0.002 20);
  --neutral-200: oklch(0.849 0 0);
  --neutral-300: oklch(0.782 0.005 20);
  --neutral-400: oklch(0.708 0.007 20);
  --neutral-500: oklch(0.56 0.008 20);
  --neutral-600: oklch(0.42 0.008 20);
  --neutral-700: oklch(0.3 0.008 240);
  --neutral-800: oklch(0.194 0.007 240);
  --neutral-900: oklch(0.083 0.003 25);
  --neutral-950: oklch(0.05 0.003 25);

  --background: oklch(0.083 0.003 25); /* #0B090A */
  --foreground: oklch(0.966 0.002 20); /* #F5F3F4 */
  --surface: oklch(0.194 0.007 240); /* #161A1D */
  --surface-elevated: oklch(0.235 0.008 240);
  --surface-sunken: oklch(0.05 0.003 25);

  --card: var(--surface);
  --card-foreground: var(--foreground);
  --popover: oklch(0.194 0.007 240);
  --popover-foreground: var(--foreground);

  --primary: oklch(0.75 0.174 152); /* #25D366 pops on dark */
  --primary-foreground: oklch(1 0 0);
  --primary-glow: color-mix(in oklab, var(--primary) 85%, oklch(0% 0 0) 15%);
  --primary-muted: color-mix(in oklab, var(--primary) 15%, var(--surface));

  --secondary: oklch(0.194 0.007 240);
  --secondary-foreground: oklch(0.966 0.002 20);
  --secondary-muted: color-mix(in oklab, var(--secondary) 50%, var(--surface));

  --accent: #25d366; /* Brand default (WhatsApp green) */
  --accent-foreground: oklch(1 0 0);
  /* Dark theme: fills still darken for white text; accent-as-text lightens
     so it stays readable on the dark background. */
  --accent-strong: color-mix(in oklab, var(--accent) 88%, black);
  --accent-readable: color-mix(in oklab, var(--accent) 74%, white);
  --accent-muted: color-mix(in oklab, var(--accent) 18%, var(--surface));

  --muted: oklch(0.235 0.008 240);
  --muted-foreground: oklch(0.708 0.007 20); /* #B1A7A6 */

  --success: oklch(0.72 0.15 150);
  --success-foreground: oklch(0.083 0.003 25);
  --success-muted: color-mix(in oklab, var(--success) 18%, var(--surface));
  --whatsapp: oklch(0.79 0.176 152);
  --whatsapp-foreground: oklch(0.14 0.02 152);
  --whatsapp-muted: color-mix(in oklab, var(--whatsapp) 20%, var(--surface));
  --warning: oklch(0.82 0.15 80);
  --warning-foreground: oklch(0.18 0.03 60);
  --warning-muted: color-mix(in oklab, var(--warning) 18%, var(--surface));
  --danger: oklch(0.601 0.223 27);
  --danger-foreground: oklch(100% 0 0);
  --danger-muted: color-mix(in oklab, var(--danger) 18%, var(--surface));
  --info: oklch(0.68 0.14 240);
  --info-foreground: oklch(0.083 0.003 25);
  --info-muted: color-mix(in oklab, var(--info) 18%, var(--surface));

  --status-online: var(--success);
  --status-away: var(--warning);
  --status-busy: var(--danger);
  --status-offline: oklch(0.42 0.008 20);

  --border: oklch(0.255 0.008 240);
  --border-strong: oklch(0.35 0.009 240);
  --input: oklch(0.27 0.008 240);
  --ring: var(--accent);

  --chart-1: oklch(0.75 0.174 152);
  --chart-2: oklch(0.487 0.216 28);
  --chart-3: oklch(0.293 0.148 27);
  --chart-4: oklch(0.443 0.198 28);
  --chart-5: oklch(0.708 0.007 20);
  --chart-6: oklch(0.849 0 0);
  --chart-7: oklch(0.966 0.002 20);
  --chart-8: oklch(0.42 0.008 20);

  --sidebar: oklch(0.05 0.003 25);
  --sidebar-foreground: oklch(0.966 0.002 20);
  --sidebar-primary: var(--accent);
  --sidebar-primary-foreground: oklch(100% 0 0);
  --sidebar-accent: oklch(0.194 0.007 240);
  --sidebar-accent-foreground: oklch(0.966 0.002 20);
  --sidebar-border: oklch(0.20 0.008 240);

  /* Hero surface — dark gradient; foreground near-white for AA */
  --hero-foreground: oklch(0.985 0 0);
  --hero-foreground-muted: oklch(0.965 0.003 240);
  --hero-border: rgb(255 255 255 / 0.2);
  --hero-border-strong: rgb(255 255 255 / 0.4);
  --hero-surface: oklch(1 0 0);
  --hero-ring: rgb(255 255 255 / 0.8);
  --hero-ring-offset: rgb(0 0 0 / 0.4);
  /* Accent tint that stays legible on the dark hero gradient (icons, ticks). */
  --hero-accent: #00df56;
  --hero-base: oklch(0.14 0.025 170);

  --gradient-hero: linear-gradient(
    140deg,
    color-mix(in oklab, var(--primary) 18%, var(--hero-base)) 0%,
    color-mix(in oklab, var(--primary) 40%, var(--hero-base)) 48%,
    color-mix(in oklab, var(--accent) 38%, var(--hero-base)) 100%
  );
  --gradient-accent: linear-gradient(
    135deg,
    color-mix(in oklab, var(--accent-strong) 86%, black),
    var(--accent-strong)
  );
  --gradient-primary: linear-gradient(
    135deg,
    color-mix(in oklab, var(--primary) 86%, black),
    color-mix(in oklab, var(--primary-glow) 40%, color-mix(in oklab, var(--primary) 82%, black))
  );
  --gradient-secondary: linear-gradient(
    135deg,
    var(--secondary),
    color-mix(in oklab, var(--secondary) 65%, var(--accent) 35%)
  );
  --gradient-subtle: linear-gradient(
    180deg,
    var(--surface-sunken),
    color-mix(in oklab, var(--accent) 8%, var(--surface))
  );
  --gradient-surface: linear-gradient(
    180deg,
    var(--surface-elevated),
    color-mix(in oklab, var(--primary) 6%, var(--surface))
  );
  --gradient-mesh:
    radial-gradient(
      at 20% 10%,
      color-mix(in oklab, var(--accent) 28%, transparent) 0px,
      transparent 55%
    ),
    radial-gradient(
      at 85% 20%,
      color-mix(in oklab, var(--primary) 26%, transparent) 0px,
      transparent 50%
    ),
    radial-gradient(
      at 70% 90%,
      color-mix(in oklab, var(--accent) 30%, transparent) 0px,
      transparent 55%
    );
  --gradient-glow: radial-gradient(
    circle at 50% 50%,
    color-mix(in oklab, var(--primary-glow) 55%, transparent) 0%,
    color-mix(in oklab, var(--accent) 24%, transparent) 45%,
    transparent 72%
  );

  --glow-primary: color-mix(in oklab, var(--primary-glow) 38%, transparent);
  --glow-accent: color-mix(in oklab, var(--accent) 34%, transparent);
  --glow-secondary: color-mix(in oklab, var(--secondary) 50%, transparent);

  /* Dark elevation surfaces — deeper tint separation, no shadows. */
  --elevation-1-bg: var(--surface);
  --elevation-1-border: var(--border);
  --elevation-2-bg: var(--surface-elevated);
  --elevation-2-border: var(--border);
  --elevation-3-bg: var(--popover);
  --elevation-3-border: var(--border-strong);
  --elevation-4-bg: var(--popover);
  --elevation-4-border: var(--border-strong);
  --elevation-inset-tint: color-mix(in oklab, var(--foreground) 6%, transparent);
  --elevation-xs: none;
  --elevation-sm: none;
  --elevation-md: none;
  --elevation-lg: none;
  --elevation-xl: none;
  --elevation-2xl: none;
  --elevation-inner: none;
  --elevation-glow: none;
  --elevation-brand: none;
}

/* Landing page shadows, dark-mode variant — stronger alpha so they still read
   against a dark surface instead of disappearing. */
.dark .landing-shadows {
  --elevation-xs: 0 1px 2px rgb(0 0 0 / 0.3);
  --elevation-sm: 0 1px 3px rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
  --elevation-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
  --elevation-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
  --elevation-xl: 0 20px 25px -5px rgb(0 0 0 / 0.45), 0 8px 10px -6px rgb(0 0 0 / 0.45);
  --elevation-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.6);
}

/* Landing hero artwork has separate palettes so its light-mode glow never
   washes the dark theme into a low-contrast grey panel. */
.landing-hero-flow-dark,
.dark .landing-hero-flow-light {
  display: none;
}

.dark .landing-hero-flow-dark {
  display: block;
}

.landing-hero-wash {
  background: linear-gradient(
    140deg,
    color-mix(in oklab, var(--primary) 8%, var(--background)) 0%,
    var(--background) 45%,
    color-mix(in oklab, var(--accent) 7%, var(--background)) 100%
  );
}

.landing-hero-glow {
  --landing-hero-glow-tint: color-mix(in oklab, var(--accent) 8%, var(--background));
  background: radial-gradient(
    circle at 50% 42%,
    color-mix(in oklab, var(--landing-hero-glow-tint) 90%, transparent) 0%,
    color-mix(in oklab, var(--landing-hero-glow-tint) 60%, transparent) 22%,
    color-mix(in oklab, var(--landing-hero-glow-tint) 32%, transparent) 45%,
    color-mix(in oklab, var(--landing-hero-glow-tint) 8%, transparent) 65%,
    transparent 80%
  );
}

.landing-hero-accent-text,
.landing-hero-accent-bar {
  background-image: linear-gradient(120deg, var(--primary), var(--accent-readable), var(--accent));
  background-size: 200% 100%;
  animation: landing-hero-gradient-flow 3s ease-in-out infinite alternate;
}

@keyframes landing-hero-gradient-flow {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 100% 50%;
  }
}

.dark .landing-hero-wash {
  background: linear-gradient(
    140deg,
    color-mix(in oklab, var(--primary) 10%, var(--background)) 0%,
    var(--background) 48%,
    color-mix(in oklab, var(--accent) 7%, var(--background)) 100%
  );
}

.dark .landing-hero-glow {
  background: radial-gradient(
    circle at 50% 42%,
    color-mix(in oklab, var(--accent) 8%, transparent) 0%,
    color-mix(in oklab, var(--background) 8%, transparent) 38%,
    color-mix(in oklab, var(--background) 40%, transparent) 68%,
    transparent 82%
  );
}

/* ============================================================================
 * Full Palette Shades (50 → 950)
 *
 * Every palette family exposes a fixed 11-step ladder. Shade tokens are
 * theme-independent (like Tailwind's default palette) — only the SEMANTIC
 * tokens (`--primary`, `--accent`, `--success` ) swap between light and
 * dark. Use `bg-primary`, `bg-accent`, `text-danger-foreground` for
 * theme-aware surfaces; use `bg-primary-500`, `text-accent-700`,
 * `border-success-200` when you need a specific fixed shade.
 *
 * Also defines:
 *   • Badge pairs (bg + fg) for the 7 standard chip variants.
 *   • Avatar palette (8 hues) for user-color hashing.
 * ============================================================================ */

@theme inline {
  /* Primary scale — steel */
  --color-primary-50: var(--primary-50);
  --color-primary-100: var(--primary-100);
  --color-primary-200: var(--primary-200);
  --color-primary-300: var(--primary-300);
  --color-primary-400: var(--primary-400);
  --color-primary-500: var(--primary-500);
  --color-primary-600: var(--primary-600);
  --color-primary-700: var(--primary-700);
  --color-primary-800: var(--primary-800);
  --color-primary-900: var(--primary-900);
  --color-primary-950: var(--primary-950);

  /* Accent scale — teal */
  --color-accent-50: var(--accent-50);
  --color-accent-100: var(--accent-100);
  --color-accent-200: var(--accent-200);
  --color-accent-300: var(--accent-300);
  --color-accent-400: var(--accent-400);
  --color-accent-500: var(--accent-500);
  --color-accent-600: var(--accent-600);
  --color-accent-700: var(--accent-700);
  --color-accent-800: var(--accent-800);
  --color-accent-900: var(--accent-900);
  --color-accent-950: var(--accent-950);

  /* Success scale — emerald */
  --color-success-50: var(--success-50);
  --color-success-100: var(--success-100);
  --color-success-200: var(--success-200);
  --color-success-300: var(--success-300);
  --color-success-400: var(--success-400);
  --color-success-500: var(--success-500);
  --color-success-600: var(--success-600);
  --color-success-700: var(--success-700);
  --color-success-800: var(--success-800);
  --color-success-900: var(--success-900);
  --color-success-950: var(--success-950);

  /* Warning scale — amber */
  --color-warning-50: var(--warning-50);
  --color-warning-100: var(--warning-100);
  --color-warning-200: var(--warning-200);
  --color-warning-300: var(--warning-300);
  --color-warning-400: var(--warning-400);
  --color-warning-500: var(--warning-500);
  --color-warning-600: var(--warning-600);
  --color-warning-700: var(--warning-700);
  --color-warning-800: var(--warning-800);
  --color-warning-900: var(--warning-900);
  --color-warning-950: var(--warning-950);

  /* Danger scale — rose */
  --color-danger-50: var(--danger-50);
  --color-danger-100: var(--danger-100);
  --color-danger-200: var(--danger-200);
  --color-danger-300: var(--danger-300);
  --color-danger-400: var(--danger-400);
  --color-danger-500: var(--danger-500);
  --color-danger-600: var(--danger-600);
  --color-danger-700: var(--danger-700);
  --color-danger-800: var(--danger-800);
  --color-danger-900: var(--danger-900);
  --color-danger-950: var(--danger-950);

  /* Info scale — sky */
  --color-info-50: var(--info-50);
  --color-info-100: var(--info-100);
  --color-info-200: var(--info-200);
  --color-info-300: var(--info-300);
  --color-info-400: var(--info-400);
  --color-info-500: var(--info-500);
  --color-info-600: var(--info-600);
  --color-info-700: var(--info-700);
  --color-info-800: var(--info-800);
  --color-info-900: var(--info-900);
  --color-info-950: var(--info-950);

  /* Badge pairs — subtle chip bg + readable fg. Theme-aware. */
  --color-badge-neutral: var(--badge-neutral);
  --color-badge-neutral-foreground: var(--badge-neutral-foreground);
  --color-badge-primary: var(--badge-primary);
  --color-badge-primary-foreground: var(--badge-primary-foreground);
  --color-badge-accent: var(--badge-accent);
  --color-badge-accent-foreground: var(--badge-accent-foreground);
  --color-badge-success: var(--badge-success);
  --color-badge-success-foreground: var(--badge-success-foreground);
  --color-badge-warning: var(--badge-warning);
  --color-badge-warning-foreground: var(--badge-warning-foreground);
  --color-badge-danger: var(--badge-danger);
  --color-badge-danger-foreground: var(--badge-danger-foreground);
  --color-badge-info: var(--badge-info);
  --color-badge-info-foreground: var(--badge-info-foreground);

  /* Avatar palette — hash user id % 8 → pick a hue. */
  --color-avatar-1: var(--avatar-1);
  --color-avatar-2: var(--avatar-2);
  --color-avatar-3: var(--avatar-3);
  --color-avatar-4: var(--avatar-4);
  --color-avatar-5: var(--avatar-5);
  --color-avatar-6: var(--avatar-6);
  --color-avatar-7: var(--avatar-7);
  --color-avatar-8: var(--avatar-8);
  --color-avatar-1-foreground: var(--avatar-1-foreground);
  --color-avatar-2-foreground: var(--avatar-2-foreground);
  --color-avatar-3-foreground: var(--avatar-3-foreground);
  --color-avatar-4-foreground: var(--avatar-4-foreground);
  --color-avatar-5-foreground: var(--avatar-5-foreground);
  --color-avatar-6-foreground: var(--avatar-6-foreground);
  --color-avatar-7-foreground: var(--avatar-7-foreground);
  --color-avatar-8-foreground: var(--avatar-8-foreground);

  /* Interaction state helpers (theme-aware) */
  --color-hover-overlay: var(--hover-overlay);
  --color-active-overlay: var(--active-overlay);
  --color-disabled: var(--disabled);
  --color-disabled-foreground: var(--disabled-foreground);
}

/* Fixed shade ladders — same values under light and dark. */
:root {
  /* Primary — steel (hue ~245) */
  --primary-50: oklch(0.98 0.005 245);
  --primary-100: oklch(0.955 0.008 245);
  --primary-200: oklch(0.905 0.012 245);
  --primary-300: oklch(0.82 0.018 245);
  --primary-400: oklch(0.65 0.028 240);
  --primary-500: oklch(0.5 0.03 240);
  --primary-600: oklch(0.4 0.025 240);
  --primary-700: oklch(0.32 0.022 240);
  --primary-800: oklch(0.24 0.018 245);
  --primary-900: oklch(0.17 0.015 245);
  --primary-950: oklch(0.12 0.012 245);

  /* Accent — teal (hue ~210) */
  --accent-50: oklch(0.975 0.012 205);
  --accent-100: oklch(0.94 0.028 205);
  --accent-200: oklch(0.88 0.055 205);
  --accent-300: oklch(0.8 0.078 208);
  --accent-400: oklch(0.72 0.09 210);
  --accent-500: oklch(0.62 0.095 210);
  --accent-600: oklch(0.54 0.09 212);
  --accent-700: oklch(0.45 0.075 215);
  --accent-800: oklch(0.35 0.055 218);
  --accent-900: oklch(0.26 0.04 220);
  --accent-950: oklch(0.18 0.03 222);

  /* Success — emerald (hue ~155) */
  --success-50: oklch(0.975 0.02 155);
  --success-100: oklch(0.94 0.048 155);
  --success-200: oklch(0.88 0.09 155);
  --success-300: oklch(0.8 0.12 155);
  --success-400: oklch(0.72 0.135 155);
  --success-500: oklch(0.66 0.14 155);
  --success-600: oklch(0.55 0.135 156);
  --success-700: oklch(0.44 0.115 158);
  --success-800: oklch(0.34 0.09 160);
  --success-900: oklch(0.25 0.065 162);
  --success-950: oklch(0.17 0.045 164);

  /* Warning — amber (hue ~75) */
  --warning-50: oklch(0.985 0.02 85);
  --warning-100: oklch(0.96 0.05 82);
  --warning-200: oklch(0.92 0.09 78);
  --warning-300: oklch(0.87 0.12 76);
  --warning-400: oklch(0.83 0.14 75);
  --warning-500: oklch(0.78 0.14 75);
  --warning-600: oklch(0.68 0.135 70);
  --warning-700: oklch(0.55 0.115 65);
  --warning-800: oklch(0.42 0.09 60);
  --warning-900: oklch(0.3 0.065 55);
  --warning-950: oklch(0.2 0.045 50);

  /* Danger — rose (hue ~27) */
  --danger-50: oklch(0.975 0.018 25);
  --danger-100: oklch(0.945 0.045 25);
  --danger-200: oklch(0.89 0.09 25);
  --danger-300: oklch(0.81 0.15 25);
  --danger-400: oklch(0.72 0.2 26);
  --danger-500: oklch(0.6 0.22 27);
  --danger-600: oklch(0.52 0.22 27);
  --danger-700: oklch(0.42 0.185 27);
  --danger-800: oklch(0.33 0.14 28);
  --danger-900: oklch(0.25 0.1 29);
  --danger-950: oklch(0.17 0.065 30);

  /* Info — sky (hue ~235) */
  --info-50: oklch(0.975 0.015 235);
  --info-100: oklch(0.945 0.035 235);
  --info-200: oklch(0.89 0.07 235);
  --info-300: oklch(0.81 0.1 235);
  --info-400: oklch(0.72 0.12 235);
  --info-500: oklch(0.62 0.13 235);
  --info-600: oklch(0.53 0.13 235);
  --info-700: oklch(0.42 0.115 235);
  --info-800: oklch(0.32 0.09 235);
  --info-900: oklch(0.24 0.065 235);
  --info-950: oklch(0.16 0.045 235);

  /* Avatar palette — 8 distinct hues, perceptually balanced. */
  --avatar-1: oklch(0.62 0.095 210); /* teal   */
  --avatar-2: oklch(0.6 0.16 295); /* violet */
  --avatar-3: oklch(0.66 0.17 355); /* rose   */
  --avatar-4: oklch(0.75 0.14 75); /* amber  */
  --avatar-5: oklch(0.65 0.14 155); /* emerald*/
  --avatar-6: oklch(0.62 0.13 235); /* sky    */
  --avatar-7: oklch(0.65 0.18 25); /* coral  */
  --avatar-8: oklch(0.55 0.14 265); /* indigo */
  --avatar-1-foreground: oklch(0.99 0 0);
  --avatar-2-foreground: oklch(0.99 0 0);
  --avatar-3-foreground: oklch(0.99 0 0);
  --avatar-4-foreground: oklch(0.22 0.02 60);
  --avatar-5-foreground: oklch(0.99 0 0);
  --avatar-6-foreground: oklch(0.99 0 0);
  --avatar-7-foreground: oklch(0.99 0 0);
  --avatar-8-foreground: oklch(0.99 0 0);

  /* Badge pairs — LIGHT theme: tinted bg + deep fg (readable, subtle). */
  --badge-neutral: oklch(0.965 0.003 250);
  --badge-neutral-foreground: oklch(0.26 0.015 245);
  --badge-primary: var(--primary-100);
  --badge-primary-foreground: var(--primary-800);
  --badge-accent: var(--accent-100);
  --badge-accent-foreground: var(--accent-800);
  --badge-success: var(--success-100);
  --badge-success-foreground: var(--success-800);
  --badge-warning: var(--warning-100);
  --badge-warning-foreground: var(--warning-800);
  --badge-danger: var(--danger-100);
  --badge-danger-foreground: var(--danger-800);
  --badge-info: var(--info-100);
  --badge-info-foreground: var(--info-800);

  /* Interaction states — LIGHT */
  --hover-overlay: oklch(0.2 0.02 245 / 0.05);
  --active-overlay: oklch(0.2 0.02 245 / 0.08);
  --disabled: oklch(0.965 0.003 250);
  --disabled-foreground: oklch(0.72 0.008 250);
}

.dark {
  /* Badge pairs — DARK: muted colored bg + light fg. */
  --badge-neutral: color-mix(in oklab, oklch(0.94 0.005 250) 12%, var(--surface));
  --badge-neutral-foreground: oklch(0.94 0.005 250);
  --badge-primary: color-mix(in oklab, var(--primary-400) 18%, var(--surface));
  --badge-primary-foreground: var(--primary-100);
  --badge-accent: color-mix(in oklab, var(--accent-400) 22%, var(--surface));
  --badge-accent-foreground: var(--accent-100);
  --badge-success: color-mix(in oklab, var(--success-400) 22%, var(--surface));
  --badge-success-foreground: var(--success-100);
  --badge-warning: color-mix(in oklab, var(--warning-400) 22%, var(--surface));
  --badge-warning-foreground: var(--warning-100);
  --badge-danger: color-mix(in oklab, var(--danger-400) 22%, var(--surface));
  --badge-danger-foreground: var(--danger-100);
  --badge-info: color-mix(in oklab, var(--info-400) 22%, var(--surface));
  --badge-info-foreground: var(--info-100);

  /* Avatar foregrounds — tuned for dark backdrops (unchanged, already high contrast). */

  /* Interaction states — DARK */
  --hover-overlay: oklch(1 0 0 / 0.05);
  --active-overlay: oklch(1 0 0 / 0.09);
  --disabled: oklch(0.22 0.014 245);
  --disabled-foreground: oklch(0.46 0.014 245);
}

/* ============================================================================
 * Base
 * ============================================================================ */
@layer base {
  * {
    border-color: var(--color-border);
  }
  html {
    font-size: var(--font-size-base, 16px);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
  }
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }
  body {
    background-color: var(--color-background);
    color: var(--color-foreground);
    font-family: var(--font-sans);
  }
  svg.lucide {
    stroke-width: var(--icon-stroke, 2);
  }
  h1,
  h2,
  h3,
  h4 {
    font-family: var(--font-display);
    letter-spacing: var(--tracking-tight);
  }
  ::selection {
    background: color-mix(in oklab, var(--accent) 35%, transparent);
    color: var(--foreground);
  }

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

/* ============================================================================
 * Utilities
 * ============================================================================ */
@utility collapsible-panel {
  overflow: hidden;
  &[data-state="open"] {
    animation: collapsible-panel-open 0.22s var(--ease-emphasized);
  }
  &[data-state="closed"] {
    animation: collapsible-panel-close 0.18s var(--ease-in);
  }
}

/* NOTE: fill-mode intentionally NOT "both" — a pinned final keyframe would
   lock the panel to a stale --radix-collapsible-content-height and leave
   empty gaps / clipped rows when nested groups expand or collapse. */
@keyframes collapsible-panel-open {
  from {
    height: 0;
    opacity: 0;
  }
  to {
    height: var(--radix-collapsible-content-height, auto);
    opacity: 1;
  }
}
@keyframes collapsible-panel-close {
  from {
    height: var(--radix-collapsible-content-height, auto);
    opacity: 1;
  }
  to {
    height: 0;
    opacity: 0;
  }
}

@utility bg-gradient-hero {
  background: var(--gradient-hero);
}
@utility bg-gradient-accent {
  background: var(--gradient-accent);
}
@utility bg-gradient-primary {
  background: var(--gradient-primary);
}
@utility bg-gradient-secondary {
  background: var(--gradient-secondary);
}
@utility bg-gradient-subtle {
  background: var(--gradient-subtle);
}
@utility bg-gradient-surface {
  background: var(--gradient-surface);
}
@utility bg-gradient-mesh {
  background: var(--gradient-mesh);
}
@utility bg-gradient-glow {
  background: var(--gradient-glow);
}
@utility shadow-elegant {
  box-shadow: var(--elevation-lg);
}
@utility text-balance {
  text-wrap: balance;
}
@utility text-pretty {
  text-wrap: pretty;
}

/* iOS notch / safe-area utilities. `env(safe-area-inset-*)` resolves to 0
 * on devices without a notch, so these are safe to apply universally. */
@utility pt-safe {
  padding-top: max(var(--tw-space-y, 0px), env(safe-area-inset-top));
}
@utility pr-safe {
  padding-right: env(safe-area-inset-right);
}
@utility pl-safe {
  padding-left: env(safe-area-inset-left);
}
@utility pb-safe {
  padding-bottom: env(safe-area-inset-bottom);
}
@utility top-safe {
  top: env(safe-area-inset-top);
}
@utility right-safe {
  right: env(safe-area-inset-right);
}
@utility min-h-header-safe {
  min-height: calc(56px + env(safe-area-inset-top));
}

/*
 * Shared state contract for interactive menu items across DropdownMenu,
 * ContextMenu, Menubar, Select, and Command. See docs/menu-item-states.md.
 * Covers: default foreground, hover, active (pressed), keyboard focus,
 * Radix selection (data-state=open, data-highlighted, data-selected=true),
 * and disabled. Layout/sizing stays on each primitive's own classes.
 */
@utility menu-item-state {
  color: var(--foreground);
  outline: none;
  svg.lucide {
    color: var(--muted-foreground);
  }
  &:hover {
    background-color: var(--muted);
  }
  &:active {
    background-color: var(--muted);
  }
  &:focus {
    background-color: var(--muted);
    outline: none;
  }
  &:focus-visible {
    background-color: var(--muted);
    outline: none;
    box-shadow: 0 0 0 2px var(--ring);
  }
  &[data-highlighted] {
    background-color: var(--muted);
    color: var(--foreground);
  }
  &[data-state="open"] {
    background-color: var(--muted);
  }
  &[data-selected="true"] {
    background-color: var(--muted);
  }
  &[data-disabled=""] {
    pointer-events: none;
    opacity: 0.5;
  }
  &[data-disabled="true"] {
    pointer-events: none;
    opacity: 0.5;
  }
}

/*
 * Shared state contract for standalone interactive controls that use
 * `rounded-control` (buttons, inputs, textareas, selects, tabs, toggles,
 * segmented items). Guarantees a single, consistent focus ring, border,
 * hover, and pressed treatment across every primitive.
 *
 * - control-focus  Keyboard focus ring: 2px ring-ring + 2px offset on
 *                  bg-background. Attach to any focusable control.
 * - control-border 1px semantic border for form fields and outlined
 *                  controls. Uses --input by default and darkens to
 *                  --border-strong on hover for tactile feedback.
 * - control-hover  Ghost/outline hover + pressed treatment. Uses --muted
 *                  with --foreground text so the hovered surface always
 *                  meets AA contrast (fixes muted-foreground drift).
 */
@utility control-focus {
  outline: none;
  &:focus-visible {
    outline: none;
    box-shadow:
      0 0 0 2px var(--background),
      0 0 0 4px var(--ring);
  }
}

@utility control-border {
  border: 1px solid var(--input);
  transition-property: color, background-color, border-color, box-shadow;
  transition-duration: 150ms;
  &:hover:not(:disabled):not([data-disabled]) {
    border-color: var(--border-strong, var(--input));
  }
}

@utility control-hover {
  &:hover:not(:disabled):not([data-disabled]) {
    background-color: var(--muted);
    color: var(--foreground);
  }
  &:active:not(:disabled):not([data-disabled]) {
    background-color: var(--muted);
    color: var(--foreground);
  }
}

/*
 * control-motion — canonical hover/active motion contract for interactive
 * controls. Use this instead of ad-hoc `transition-*` + `hover:-translate-*`
 * combinations so every button/tab/toggle animates on the same timing curve.
 *
 * Contract:
 *   - Animates color / background / border / shadow / transform on
 *     --duration-normal + --ease-out.
 *   - Adds --shadow-md on hover (no vertical lift — intentionally removed
 *     project-wide).
 *   - Respects `prefers-reduced-motion` via the global override lower in
 *     this file.
 *
 * Do NOT add `translate-y`, `scale`, or bespoke `transition-[]` strings on
 * shared primitives. Extend this utility instead.
 */
@utility control-motion {
  transition-property: color, background-color, border-color, box-shadow, transform;
  transition-duration: var(--duration-normal);
  transition-timing-function: var(--ease-out);
  &:hover:not(:disabled):not([data-disabled]) {
    box-shadow: var(--shadow-md);
  }
}

/*
 * Canonical radius utilities.
 *
 * `rounded-control`, `rounded-surface`, `rounded-pill` are already generated
 * from the `--radius-*` theme tokens above. These `@utility` aliases give
 * the same tokens a semantic name that reads at the call site and stays
 * stable if the underlying scale is ever renamed. Prefer these over raw
 * `rounded-control` / `rounded-control` / `rounded-full` on any shared primitive.
 *
 *   control-radius   Interactive controls (buttons, inputs, tabs, badges)
 *   surface-radius   Overlays and containers (cards, dialogs, popovers)
 *   pill-radius      Circular elements (avatars, dots, switch tracks)
 */
@utility control-radius {
  border-radius: var(--radius-control);
}

@utility surface-radius {
  border-radius: var(--radius-surface);
}

@utility shell-radius {
  border-radius: var(--radius-shell);
}

@utility pill-radius {
  border-radius: var(--radius-pill);
}

/*
 * Height aliases — mirror the radius aliases. Use `control-height` on any
 * primitive that participates in the shared 36px control rhythm (TabsList,
 * Toggle, ToggleGroup, segmented controls, button rows, filter bars).
 */
@utility control-height {
  height: var(--height-control);
}
@utility control-height-sm {
  height: var(--height-control-sm);
}
@utility control-height-lg {
  height: var(--height-control-lg);
}

/*
 * `h-15` / `min-h-15` / `max-h-15` aliases — Tailwind's default spacing
 * scale skips 15 (only 14 and 16 exist), so we register the step here and
 * point it at the shared `--height-header` token. This keeps `h-15` and
 * `h-header` interchangeable and prevents accidental drift back to h-14
 * or h-16 in new code.
 */
@utility h-15 {
  height: var(--height-header);
}
@utility min-h-15 {
  min-height: var(--height-header);
}
@utility max-h-15 {
  max-height: var(--height-header);
}

/*
 * Baseline default: every native interactive control picks up the shared
 * `--radius-control` value even without an explicit utility class. Custom
 * components that opt into a different radius override this via a normal
 * `rounded-*` utility (utilities win by specificity/order).
 *
 * Scope is deliberately narrow — only elements the browser renders as
 * discrete controls. Do not add block-level surfaces (dialogs, cards)
 * here; those declare `rounded-surface` explicitly at the component.
 */
@layer base {
  button,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea,
  [role="tab"],
  [role="option"],
  [role="menuitem"],
  [role="menuitemcheckbox"],
  [role="menuitemradio"] {
    border-radius: var(--radius-control);
  }
}

/* Frosted glass surface, respects theme */
@utility glass {
  background: color-mix(in oklab, var(--surface) 70%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border: 1px solid color-mix(in oklab, var(--border) 80%, transparent);
}

/* Shimmering loading gradient */
@utility skeleton-shimmer {
  background: linear-gradient(
    90deg,
    color-mix(in oklab, var(--muted) 100%, transparent) 0%,
    color-mix(in oklab, var(--muted-foreground) 8%, var(--muted)) 50%,
    color-mix(in oklab, var(--muted) 100%, transparent) 100%
  );
  background-size: 200% 100%;
  animation: var(--animate-shimmer);
}

/* Focus ring preset — accessible + branded */
@utility focus-ring {
  outline: 2px solid transparent;
  outline-offset: 2px;
  &:focus-visible {
    outline-color: var(--ring);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--ring) 25%, transparent);
  }
}

/* ============================================================================
 * Typography — base + semantic utilities
 * Role tokens: display · heading · body · label · caption · code · eyebrow
 * All sizes align to a 4/8pt vertical rhythm.
 * ============================================================================ */

@layer base {
  html {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  body {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    letter-spacing: 0;
    color: var(--foreground);
    background: var(--background);
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-heading);
    color: var(--foreground);
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.02em;
    line-height: var(--leading-tight);
    text-wrap: balance;
  }
  code,
  kbd,
  samp,
  pre {
    font-family: var(--font-mono);
    font-feature-settings: "calt";
  }
  /* Tabular numerals everywhere numbers appear in data views */
  .tabular-nums,
  [data-tabular],
  th,
  td {
    font-variant-numeric: tabular-nums;
  }
}

/* ── Display — marketing / hero (Space Grotesk) ─────────────────────────── */
@utility text-display-2xl {
  font-family: var(--font-display);
  font-size: clamp(3rem, 4.5vw + 1rem, 5.25rem);

  letter-spacing: -0.045em;
  font-weight: var(--font-weight-semibold);
  text-wrap: balance;
}
@utility text-display-xl {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 3.5vw + 1rem, 4.5rem);

  letter-spacing: -0.04em;
  font-weight: var(--font-weight-semibold);
  text-wrap: balance;
}
@utility text-display-lg {
  font-family: var(--font-display);
  font-size: clamp(2rem, 2.5vw + 1rem, 3.75rem);

  letter-spacing: -0.035em;
  font-weight: var(--font-weight-semibold);
  text-wrap: balance;
}
@utility text-display-md {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.8vw + 1rem, 3rem);

  letter-spacing: -0.03em;
  font-weight: var(--font-weight-semibold);
  text-wrap: balance;
}
@utility text-display-sm {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2vw + 1rem, 2.25rem);
  line-height: 1.25;
  letter-spacing: -0.025em;
  font-weight: var(--font-weight-semibold);
  text-wrap: balance;
}

/* ── Heading — product UI (Inter, tight) ────────────────────────────────── */
@utility text-heading-h1 {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: -0.022em;
  font-weight: var(--font-weight-semibold);
  text-wrap: balance;
}
@utility text-heading-h2 {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: -0.019em;
  font-weight: var(--font-weight-semibold);
  text-wrap: balance;
}
@utility text-heading-h3 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: -0.017em;
  font-weight: var(--font-weight-semibold);
}
@utility text-heading-h4 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: -0.014em;
  font-weight: var(--font-weight-semibold);
}
@utility text-heading-h5 {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  letter-spacing: -0.011em;
  font-weight: var(--font-weight-semibold);
}
@utility text-heading-h6 {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  letter-spacing: -0.003em;
  font-weight: var(--font-weight-semibold);
}

/* ── Body — reading text (Inter, dynamic metrics) ───────────────────────── */
@utility text-body-lg {
  font-size: var(--text-lg);
  line-height: 1.6;
  letter-spacing: -0.011em;
  font-weight: var(--font-weight-regular);
  text-wrap: pretty;
}
@utility text-body-md {
  font-size: var(--text-base);
  line-height: 1.6;
  letter-spacing: -0.003em;
  font-weight: var(--font-weight-regular);
  text-wrap: pretty;
}
@utility text-body-sm {
  font-size: var(--text-sm);
  line-height: 1.5;
  letter-spacing: 0em;
  font-weight: var(--font-weight-regular);
}
@utility text-body-xs {
  font-size: var(--text-xs);
  line-height: 1.45;
  letter-spacing: 0.005em;
  font-weight: var(--font-weight-regular);
}

/* ── Label — form + control labels ──────────────────────────────────────── */
@utility text-label-lg {
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.003em;
}
@utility text-label-md {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0em;
}
@utility text-label-sm {
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.005em;
}

/* ── Caption — meta / helper text ───────────────────────────────────────── */
@utility text-caption {
  font-size: var(--text-xs);
  line-height: 1.45;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.005em;
  color: var(--muted-foreground);
}
@utility text-caption-sm {
  font-size: var(--text-2xs);
  line-height: 1.45;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.01em;
  color: var(--muted-foreground);
}

/* ── Eyebrow — uppercase micro-labels (section kickers) ─────────────────── */
@utility text-eyebrow {
  font-size: var(--text-xs);
  line-height: 1;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

/* ── Button typography — size ladder mirroring --size-button-* ──────────── */
@utility text-button-xs {
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  line-height: 1;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
}
@utility text-button-sm {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: 1;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.005em;
}
@utility text-button-md {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0em;
}
@utility text-button-lg {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.005em;
}
@utility text-button-xl {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: 1;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.01em;
}

/* ── Navigation typography ──────────────────────────────────────────────── */
@utility text-nav-primary {
  font-size: var(--text-sm);
  line-height: 1;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.005em;
}
@utility text-nav-secondary {
  font-size: var(--text-xs);
  line-height: 1;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0em;
}
@utility text-nav-section {
  font-size: var(--text-2xs);
  line-height: 1;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

/* ── Sidebar typography — rail on dark surface ──────────────────────────── */
@utility text-sidebar-brand {
  font-family: var(--font-display);
  font-size: var(--text-base);
  line-height: 1;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.01em;
}
@utility text-sidebar-section {
  font-size: var(--text-2xs);
  line-height: 1;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--sidebar-foreground) 65%, transparent);
}
@utility text-sidebar-item {
  font-size: var(--text-sm);
  line-height: 1;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.005em;
}
@utility text-sidebar-badge {
  font-size: var(--text-2xs);
  line-height: 1;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
  font-variant-numeric:;
}

/* ── Dashboard typography — metrics, tables, KPIs ───────────────────────── */
@utility text-metric-xl {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  line-height: 1;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.03em;
  font-variant-numeric:;
}
@utility text-metric-lg {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: 1;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.025em;
  font-variant-numeric:;
}
@utility text-metric-md {
  font-family: var(--font-display);
  font-size: var(--text-3xl);

  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
  font-variant-numeric:;
}
@utility text-metric-sm {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);

  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.015em;
  font-variant-numeric:;
}
@utility text-metric-delta {
  font-size: var(--text-xs);
  line-height: 1;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0em;
  font-variant-numeric:;
}
@utility text-table-header {
  font-size: var(--text-2xs);
  line-height: 1;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
@utility text-table-cell {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  font-weight: var(--font-weight-regular);
  font-variant-numeric:;
}

/* ── Code typography ────────────────────────────────────────────────────── */
@utility text-code-inline {
  font-family: var(--font-mono);
  font-size: 0.875em; /* relative to surrounding text */
  line-height: inherit;
  font-weight: var(--font-weight-medium);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
  background: var(--muted);
  color: var(--foreground);
}
@utility text-code-block {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.6;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0em;
  tab-size: 2;
}
@utility text-code-sm {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.5;
  font-weight: var(--font-weight-regular);
}
@utility text-kbd {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  line-height: 1;
  font-weight: var(--font-weight-semibold);
  padding: 0.2em 0.4em;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
  background: var(--surface-elevated);
  box-shadow: inset 0 -1px 0 0 var(--border);
}

/* ── Utility helpers ────────────────────────────────────────────────────── */
@utility font-numeric-tabular {
  font-variant-numeric:;
}
@utility font-numeric-lining {
  font-variant-numeric: lining-nums;
}
@utility font-numeric-slashed {
  font-variant-numeric: slashed-zero;
}
@utility font-feature-ligatures {
  font-feature-settings: "liga", "calt";
}

/* ============================================================================
 * Marketing typography roles — centralized, contrast-safe pairings.
 * Every landing / marketing section should use these instead of hand-rolled
 * font-size + color combos. Colors are theme-aware (light + dark) and the
 * hero variants target the fixed dark gradient surface via --hero-foreground.
 *
 *   Standard surface (background / surface / gradient-subtle):
 *     .text-marketing-eyebrow, .text-marketing-title, .text-marketing-title-lg,
 *     .text-marketing-lede, .text-marketing-card-title, .text-marketing-card-body,
 *     .text-marketing-meta
 *
 *   Inverse surface (gradient-hero, dark CTA panels):
 *     .text-marketing-hero-eyebrow, .text-marketing-hero-title,
 *     .text-marketing-hero-lede, .text-marketing-hero-meta,
 *     .text-marketing-oninverse-title, .text-marketing-oninverse-lede
 * ============================================================================ */

@utility text-marketing-eyebrow {
  font-size: var(--text-xs);
  line-height: 1;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.02em;
  text-transform: capitalize;
  color: var(--accent-readable);
  padding: 6px 12px;
  border: 1px solid #d6f3d4;
  border-radius: 50px;
  background: #f1fff2;
}
@utility text-marketing-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.25vw + 1rem, 3rem);
  letter-spacing: -0.03em;
  font-weight: var(--font-weight-semibold);
  text-wrap: balance;
  color: var(--foreground);
}
@utility text-marketing-title-lg {
  font-family: var(--font-display);
  /* Headline is split into two fixed phrases by a hard <br> — this clamp's
     ceiling is sized to the longer phrase at the 768px (max-w-3xl) container
     cap, and the floor is sized to the same phrase at a 320px viewport, so
     it never wraps past 2 lines on any screen width. Do not raise the
     ceiling without re-checking that math against the headline text. */
  font-size: clamp(1.4rem, 4vw + 0.95rem, 3.75rem);
  letter-spacing: -0.035em;
  font-weight: var(--font-weight-semibold);
  text-wrap: pretty;
  color: var(--foreground);
}
@utility text-marketing-lede {
  font-size: var(--text-base);
  line-height: 1.6;
  letter-spacing: -0.011em;
  font-weight: var(--font-weight-regular);
  text-wrap: pretty;
  color: var(--muted-foreground);
}
@utility text-marketing-card-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  letter-spacing: -0.011em;
  font-weight: var(--font-weight-semibold);
  color: var(--foreground);
}
@utility text-marketing-card-body {
  font-size: var(--text-sm);
  line-height: 1.55;
  font-weight: var(--font-weight-regular);
  color: var(--muted-foreground);
  text-wrap: pretty;
}
@utility text-marketing-meta {
  font-size: var(--text-sm);
  line-height: 1.5;
  font-weight: var(--font-weight-regular);
  color: var(--muted-foreground);
}

@utility text-marketing-hero-eyebrow {
  font-size: var(--text-xs);
  line-height: 1;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.05em;
  /* text-transform: uppercase; */
  color: var(--hero-foreground);
}
@utility text-marketing-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 3.5vw + 1rem, 3.5rem);
  letter-spacing: -0.04em;
  font-weight: var(--font-weight-bold);
  text-wrap: balance;
  color: var(--hero-foreground);
}
@utility text-marketing-hero-lede {
  font-size: var(--text-lg);
  line-height: 1.6;
  letter-spacing: -0.011em;
  font-weight: var(--font-weight-regular);
  text-wrap: pretty;
  color: var(--hero-foreground-muted);
}
@utility text-marketing-hero-meta {
  font-size: var(--text-sm);
  line-height: 1.5;
  font-weight: var(--font-weight-regular);
  color: var(--hero-foreground-muted);
}
@utility text-marketing-oninverse-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.8vw + 1rem, 3rem);

  letter-spacing: -0.03em;
  font-weight: var(--font-weight-semibold);
  text-wrap: balance;
  color: var(--hero-foreground);
}
@utility text-marketing-oninverse-lede {
  font-size: var(--text-base);
  line-height: 1.6;
  font-weight: var(--font-weight-regular);
  text-wrap: pretty;
  color: var(--hero-foreground-muted);
}

/* ============================================================================
 * Marketing button roles — consistent hover / active / focus behavior across
 * light and dark modes. Size (px/py) stays on the element; state comes from
 * these utilities so every landing button behaves the same.
 * ============================================================================ */

@utility btn-marketing-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-sm);
  line-height: 1.2;
  transition:
    background-color 150ms ease,
    color 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 100ms ease;
  outline: none;
  cursor: pointer;
  user-select: none;
  &:focus-visible {
    box-shadow:
      0 0 0 2px var(--background),
      0 0 0 4px var(--ring);
  }
  &:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md, 0 4px 12px rgb(0 0 0 / 0.08));
  }
  &:active {
    transform: translateY(1px);
  }
  &:disabled,
  &[aria-disabled="true"] {
    opacity: 0.6;
    pointer-events: none;
  }
}

/* Filled brand button — used on both light and hero surfaces. */
@utility btn-marketing-primary {
  @apply btn-marketing-base;
  background-color: var(--accent-strong);
  color: var(--accent-foreground);
  box-shadow: var(--shadow-elegant, 0 1px 2px rgb(0 0 0 / 0.06));
  &:hover {
    background-color: var(--primary);
    color: var(--primary-foreground);
  }
  &:active {
    background-color: var(--primary);
    color: var(--primary-foreground);
  }
}

/* Outline button on light surfaces. */
@utility btn-marketing-secondary {
  @apply btn-marketing-base;
  background-color: transparent;
  color: var(--foreground);
  border: 1px solid var(--border);
  &:hover {
    background-color: var(--muted);
    color: var(--foreground);
    border-color: var(--border-strong, var(--border));
  }
  &:active {
    background-color: var(--muted);
  }
}

/* Outline button on the inverse (hero / CTA) surface. */
@utility btn-marketing-onhero-secondary {
  @apply btn-marketing-base;
  background-color: transparent;
  color: var(--hero-foreground);
  border: 1px solid rgb(255 255 255 / 0.24);
  &:hover {
    background-color: rgb(255 255 255 / 0.12);
    border-color: rgb(255 255 255 / 0.4);
  }
  &:active {
    background-color: rgb(255 255 255 / 0.18);
  }
  &:focus-visible {
    box-shadow:
      0 0 0 2px rgb(0 0 0 / 0.4),
      0 0 0 4px rgb(255 255 255 / 0.8);
  }
}

/*
 * Ghost button on the hero (dark inverse) surface.
 * Uses semantic --hero-* tokens for color, border, ring and shared
 * --duration-* / --ease-out for transitions so state styling stays
 * consistent with the rest of the design system.
 */
@utility btn-hero-ghost {
  background-color: transparent;
  color: var(--hero-foreground);
  border: 1px solid var(--hero-border);
  transition:
    color var(--duration-normal) var(--ease-out),
    background-color var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out);
  &:hover {
    background-color: var(--hero-surface);
    color: var(--primary);
    border-color: var(--hero-surface);
  }
  &:active {
    background-color: var(--hero-surface);
    color: var(--primary);
  }
  &:focus-visible {
    box-shadow:
      0 0 0 2px var(--hero-ring-offset),
      0 0 0 4px var(--hero-ring);
  }
}

/* Marketing inline link / nav item — mirrors button state behavior. */
@utility link-marketing {
  color: var(--muted-foreground);
  border-radius: var(--radius-sm);
  transition:
    color 200ms ease-out,
    background-color 200ms ease-out,
    box-shadow 200ms ease-out,
    transform 200ms ease-out;
  outline: none;
  &:hover {
    color: var(--foreground);
    transform: translateY(-1px);
  }
  &:active {
    color: var(--primary);
    transform: translateY(1px);
  }
  &:focus-visible {
    color: var(--foreground);
    box-shadow:
      0 0 0 2px var(--background),
      0 0 0 4px var(--ring);
  }
}

/* On-inverse variant for nav/links placed over the hero gradient. */
@utility link-marketing-onhero {
  color: var(--hero-foreground-muted);
  border-radius: var(--radius-sm);
  transition:
    color 200ms ease-out,
    background-color 200ms ease-out,
    box-shadow 200ms ease-out,
    transform 200ms ease-out;
  outline: none;
  &:hover {
    color: var(--hero-foreground);
    transform: translateY(-1px);
  }
  &:active {
    transform: translateY(1px);
  }
  &:focus-visible {
    color: var(--hero-foreground);
    box-shadow:
      0 0 0 2px rgb(0 0 0 / 0.4),
      0 0 0 4px rgb(255 255 255 / 0.8);
  }
}

/* ============================================================================
 * Marketing layout / surface roles — one source of truth for the landing
 * page. Compose these instead of re-typing container / card / chip classes.
 * ============================================================================ */

@utility container-marketing {
  width: 100%;
  max-width: var(--content-max-xl);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
  padding-block: 3rem;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  @media (min-width: 40rem) {
    padding-inline: var(--gutter-tablet);
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  @media (min-width: 64rem) {
    padding-inline: var(--gutter-desktop);
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

/* This section sits on the dark --gradient-hero background, where the
   default container-marketing rail border (--border-strong) is tuned for
   light surfaces and nearly disappears. Override it locally to a translucent
   white line instead of touching the shared token. */
.connected-platform-section .container-marketing {
  border-left-color: rgb(255 255 255 / 0.15);
  border-right-color: rgb(255 255 255 / 0.15);
}

/* Bleeds a row out to the edges of its container-marketing parent — cancels the
   container's own gutter with a negative margin, then re-applies it as inner
   padding, so a border on the row lines up flush with the container's border. */
@utility row-bleed-marketing {
  margin-inline: calc(var(--gutter-mobile) * -1);
  padding-inline: var(--gutter-mobile);
  @media (min-width: 40rem) {
    margin-inline: calc(var(--gutter-tablet) * -1);
    padding-inline: var(--gutter-tablet);
  }
  @media (min-width: 64rem) {
    margin-inline: calc(var(--gutter-desktop) * -1);
    padding-inline: var(--gutter-desktop);
  }
}

/* Section vertical rhythm. */
/* @utility section-marketing {
  padding-block: 6rem;
} */
/* @utility section-marketing-sm {
  padding-block: 5rem;
}
@utility section-marketing-strip {
  padding-block: 2rem;
} */

/* Card surface used by feature tiles + pricing tiers. */
@utility surface-marketing-card {
  border-radius: var(--radius-xl, 0.75rem);
  border: 1px solid var(--border);
  background-color: var(--surface, var(--card));
  box-shadow: var(--shadow-sm, 0 1px 2px rgb(0 0 0 / 0.04));
  transition:
    box-shadow 200ms ease,
    transform 200ms ease,
    border-color 200ms ease;
}
@utility surface-marketing-card-interactive {
  @apply surface-marketing-card;
  &:hover {
    box-shadow: var(--shadow-md, 0 4px 12px rgb(0 0 0 / 0.08));
    transform: translateY(-2px);
  }
}
@utility surface-marketing-card-featured {
  @apply surface-marketing-card;
  border-color: var(--accent);
  box-shadow: var(--shadow-elegant, 0 8px 24px rgb(0 0 0 / 0.08));
  position: relative;
}

/* Accent icon chip used inside feature cards. */
@utility chip-marketing-icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md, 0.5rem);
  background-color: color-mix(in oklab, var(--accent) 10%, transparent);
  color: var(--accent);
}

/* Frosted pill placed over the hero gradient. */
@utility chip-marketing-hero {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border-radius: 9999px;
  background-color: rgb(255 255 255 / 0.1);
  border: 1px solid rgb(255 255 255 / 0.15);
  backdrop-filter: blur(6px);
  color: var(--hero-foreground);
}

/* ============================================================================
 * Layout utilities — containers, sections, grids, sticky bars
 * Every value here reads from a design token — never hardcode.
 * ============================================================================ */

/* Containers — max-width + responsive gutters. Pair with `mx-auto`. */
@utility container-app {
  width: 100%;
  max-width: var(--content-max-2xl);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
  @media (min-width: 40rem) {
    padding-inline: var(--gutter-tablet);
  }
  @media (min-width: 64rem) {
    padding-inline: var(--gutter-desktop);
  }
  @media (min-width: 96rem) {
    padding-inline: var(--gutter-wide);
  }
}
@utility container-narrow {
  width: 100%;
  max-width: var(--content-max-sm);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
  @media (min-width: 40rem) {
    padding-inline: var(--gutter-tablet);
  }
  @media (min-width: 64rem) {
    padding-inline: var(--gutter-desktop);
  }
}
@utility container-prose {
  width: 100%;
  max-width: var(--content-max-md);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
  @media (min-width: 40rem) {
    padding-inline: var(--gutter-tablet);
  }
  @media (min-width: 64rem) {
    padding-inline: var(--gutter-desktop);
  }
}
@utility container-page {
  width: 100%;
  max-width: var(--content-max-lg);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
  @media (min-width: 40rem) {
    padding-inline: var(--gutter-tablet);
  }
  @media (min-width: 64rem) {
    padding-inline: var(--gutter-desktop);
  }
}
@utility container-dashboard {
  width: 100%;
  max-width: var(--content-max-xl);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
  @media (min-width: 40rem) {
    padding-inline: var(--gutter-tablet);
  }
  @media (min-width: 64rem) {
    padding-inline: var(--gutter-desktop);
  }
}
@utility container-wide {
  width: 100%;
  max-width: var(--content-max-3xl);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
  @media (min-width: 40rem) {
    padding-inline: var(--gutter-tablet);
  }
  @media (min-width: 64rem) {
    padding-inline: var(--gutter-desktop);
  }
  @media (min-width: 96rem) {
    padding-inline: var(--gutter-wide);
  }
}
@utility container-fluid {
  width: 100%;
  padding-inline: var(--gutter-mobile);
  @media (min-width: 40rem) {
    padding-inline: var(--gutter-tablet);
  }
  @media (min-width: 64rem) {
    padding-inline: var(--gutter-desktop);
  }
}

/* Section vertical rhythm */
@utility section-sm {
  padding-block: var(--section-y-sm);
}
@utility section-md {
  padding-block: var(--section-y-md);
}
@utility section-lg {
  padding-block: var(--section-y-lg);
}
@utility section-xl {
  padding-block: var(--section-y-xl);
}
@utility section-2xl {
  padding-block: var(--section-y-2xl);
}

/* Card padding rhythm */
@utility card-p-xs {
  padding: var(--card-p-xs);
}
@utility card-p-sm {
  padding: var(--card-p-sm);
}
@utility card-p-md {
  padding: var(--card-p-md);
}
@utility card-p-lg {
  padding: var(--card-p-lg);
}
@utility card-p-xl {
  padding: var(--card-p-xl);
}

/* Grid presets — auto-fit responsive card grids */
@utility grid-cards-sm {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--grid-gap-md);
}
@utility grid-cards-md {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--grid-gap-lg);
}
@utility grid-cards-lg {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
  gap: var(--grid-gap-lg);
}
@utility grid-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--grid-gap-md);
}
@utility grid-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap-md);
}

/* Two-pane / three-pane list-detail shells */
@utility pane-list-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  @media (min-width: 64rem) {
    grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr);
  }
}
@utility pane-inbox {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  @media (min-width: 48rem) {
    grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr);
  }
  @media (min-width: 80rem) {
    grid-template-columns: minmax(14rem, 16rem) minmax(20rem, 24rem) minmax(0, 1fr);
  }
}
@utility pane-canvas-inspector {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  @media (min-width: 64rem) {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
  }
}
@utility pane-subnav-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  @media (min-width: 64rem) {
    grid-template-columns: var(--subnav-width) minmax(0, 1fr);
    gap: var(--grid-gap-xl);
  }
}

/* Sticky bars */
@utility sticky-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-height);
  background: color-mix(in oklab, var(--surface) 85%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--border);
}
@utility sticky-subheader {
  position: sticky;
  top: var(--header-height);
  z-index: calc(var(--z-header) - 1);
  height: var(--subheader-height);
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--border);
}
@utility sticky-actionbar {
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky);
  background: var(--surface);
  border-top: 1px solid var(--border);
}

/* Full app height that respects mobile viewport (dvh) */
@utility h-app {
  height: 100dvh;
}
@utility min-h-app {
  min-height: 100dvh;
}
@utility h-content {
  height: calc(100dvh - var(--header-height));
}
@utility min-h-content {
  min-height: calc(100dvh - var(--header-height));
}

/* ============================================================
   Elevation system — depth without shadows.
   Level 0 flat · 1 raised · 2 elevated · 3 floating · 4 overlay.
   Every level composes: background tint + border weight. Use
   `elevation-{n}` on surfaces (cards, popovers, dialogs) instead
   of `shadow-*`. Interactive lift uses `elevation-hover`.
   ============================================================ */
@utility elevation-0 {
  background-color: var(--elevation-0-bg);
  border: 1px solid var(--elevation-0-border);
}
@utility elevation-1 {
  background-color: var(--elevation-1-bg);
  border: 1px solid var(--elevation-1-border);
}
@utility elevation-2 {
  background-color: var(--elevation-2-bg);
  border: 1px solid var(--elevation-2-border);
}
@utility elevation-3 {
  background-color: var(--elevation-3-bg);
  border: 1px solid var(--elevation-3-border);
  outline: 1px solid var(--elevation-inset-tint);
  outline-offset: -1px;
}
@utility elevation-4 {
  background-color: var(--elevation-4-bg);
  border: 1px solid var(--elevation-4-border);
  outline: 2px solid var(--elevation-inset-tint);
  outline-offset: -1px;
}
@utility elevation-hover {
  transition:
    background-color 160ms var(--ease-emphasized),
    border-color 160ms var(--ease-emphasized),
    transform 160ms var(--ease-emphasized);
  &:hover {
    background-color: var(--elevation-2-bg);
    border-color: var(--border-strong);
  }
  &:active {
    background-color: var(--elevation-1-bg);
    border-color: var(--border-strong);
    transform: translateY(0.5px);
  }
}

/* ============================================================
   Interaction states — focus and ring visuals are globally
   suppressed per product direction. Keep only a subtle active
   press feedback for interactive elements.
   ============================================================ */
:where(a, button, [role="button"], [role="menuitem"], [role="option"], [role="tab"]):not(
    :disabled
  ):active {
  filter: brightness(0.96);
}

/* ============================================================
   Global shadow, focus, and ring suppression.
   Depth is expressed through elevation tokens; focus/ring
   utilities are neutralized across the app.
   ============================================================ */
*,
*::before,
*::after {
  box-shadow: none !important;
}
*,
*::before,
*::after {
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
  --tw-ring-color: transparent !important;
  --tw-ring-offset-width: 0px !important;
  --tw-ring-inset:                         !important;
}
*:focus,
*:focus-visible,
*:focus-within {
  outline: none !important;
  box-shadow: none !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
}

/* The landing page opts back into real box-shadow for its own shadow-*
   utilities. `[class*="shadow-"]` catches shadow-sm/md/lg/xl/2xl and the
   hover: variants; higher specificity than the bare `*` above beats its
   !important without touching the app-wide suppression itself. */
.landing-shadows [class*="shadow-"] {
  box-shadow:
    var(--tw-inset-shadow, 0 0 #0000), var(--tw-inset-ring-shadow, 0 0 #0000),
    var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow, 0 0 #0000) !important;
}

/* ============================================================
   Organization switcher — indeterminate progress rail.
   Used while in-flight requests quiesce during an org switch.
   ============================================================ */
@keyframes progress-indeterminate {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(180%);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes route-progress-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* -------------------------------------------------------------------------
 * Refined scrollbars (shadcn-inspired).
 * Applies globally to Webkit + Firefox. Uses semantic tokens so the bar
 * blends with light/dark themes. Individual regions can opt out with the
 * `.scrollbar-none` utility (already provided by tailwindcss-scrollbar-like
 * usage) or opt in to a thinner variant with `.scrollbar-thin`.
 * ------------------------------------------------------------------------- */
@layer base {
  * {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in oklch, var(--muted-foreground) 30%, transparent) transparent;
  }

  *::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  *::-webkit-scrollbar-track {
    background: transparent;
  }
  /* Kills the native stepper arrows at each end of the track. */
  *::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
  }
  *::-webkit-scrollbar-thumb {
    background-color: color-mix(in oklch, var(--muted-foreground) 30%, transparent);
    border-radius: 9999px;
    border: 1px solid transparent;
    background-clip: padding-box;
    transition: background-color 150ms ease;
  }
  *::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(in oklch, var(--muted-foreground) 55%, transparent);
  }
  *::-webkit-scrollbar-thumb:active {
    background-color: color-mix(in oklch, var(--primary) 65%, transparent);
  }
  *::-webkit-scrollbar-corner {
    background: transparent;
  }

  /* Radix ScrollArea draws its own thumb, so the viewport's native bar must be
   * fully hidden — otherwise the `*` rules above give it a 6px gutter that
   * shows as an empty gap beside the custom thumb (a visible double bar). */
  [data-radix-scroll-area-viewport] {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  [data-radix-scroll-area-viewport]::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
}

@utility scrollbar-thin {
  scrollbar-width: thin;
  @supports selector(::-webkit-scrollbar) {
    scrollbar-width: auto;
    &::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
  }
}

@utility scrollbar-none {
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}