/**
 * GoToM8 Design System Tokens
 * Source: Figma Design System
 * Synced: 2026-04-02 (Sprint CZ — Foundation Reset)
 *
 * @codechat-ignore CC-030
 * Hardcoded color values here are INTENTIONAL — source of truth.
 * Phase 178: Wrapped in @layer project-tokens.
 */

@layer project-tokens {

:root {
  /* TRANSITIONS */
  --x-transition-fast: 100ms ease-in-out;
  --x-transition-normal: 150ms ease-in-out;
  --x-transition-slow: 300ms ease-in-out;
  --x-duration-fast: 100ms;
  --x-duration-normal: 150ms;
  --x-duration-slow: 300ms;
  --x-ease-out: cubic-bezier(0, 0, 0.2, 1);

  /* AVATAR SIZES */
  --x-avatar-size-s: 32px;
  --x-avatar-size-m: 48px;
  --x-avatar-size-l: 64px;

  /* TYPOGRAPHY */
  --x-font-family-base: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
  --x-font-body: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
  --x-font-weight-regular: 400;
  --x-font-weight-normal: 400;
  --x-font-weight-medium: 700;
  --x-font-weight-semibold: 700;
  --x-font-weight-bold: 700;

  /* FONT SIZES (consumed by XLabel) */
  --x-font-size-h1: 36px;
  --x-font-size-h2: 25px;
  --x-font-size-h3: 20px;
  --x-font-size-h4: 16px;

  /* LINE HEIGHTS */
  --x-line-height-sm: 16px;
  --x-line-height-md: 20px;
  --x-line-height-lg: 24px;
  --x-line-height-h1: 54px;
  --x-line-height-h3: 30px;
  --x-line-height-h4: 24px;
  --x-line-height-body: 24px;
  --x-line-height-caption: 16px;

  /* Z-INDEX SCALE */
  --z-index-toast: 1080;

  /* SEMANTIC COLORS */
  --x-color-bg-overlay: rgba(0, 0, 0, 0.4);
  --x-color-text-primary: var(--x-color-foreground);
  --x-color-background: #f9fafb;
  --x-color-foreground: #111827;
  --x-color-card: #ffffff;
  --x-color-card-foreground: #111827;
  --x-color-card-hover: #F3F4F6;
  --x-color-muted: #f3f4f6;
  --x-color-muted-foreground: #4b5563;
  --x-color-border: #d1d5db;
  --x-color-input: #ffffff;
  --x-color-input-background: #ffffff;
  --x-color-ring: rgba(13, 133, 136, 1);
  --x-color-popover: #ffffff;
  --x-color-popover-foreground: #111827;

  /* PRIMARY (Phase 106: full teal ramp override) */
  --x-color-primary-50:  #F0FDFD;
  --x-color-primary-100: #CCFBF1;
  --x-color-primary-200: #99F6F6;
  --x-color-primary-300: #5EEAD4;
  --x-color-primary-400: #2DD4BF;
  --x-color-primary-500: #14B8A6;
  --x-color-primary-600: #0F5959;
  --x-color-primary-700: #0C4747;
  --x-color-primary-800: #0A3838;
  --x-color-primary-900: #072525;
  --x-color-primary: var(--x-color-primary-600);
  --x-color-primary-foreground: #ffffff;
  --x-color-primary-hover: var(--x-color-primary-700);
  --x-color-primary-active: var(--x-color-primary-800);
  --x-color-primary-muted: var(--x-color-primary-100);
  --x-color-primary-subtle: var(--x-color-primary-50);

  /* SECONDARY */
  --x-color-secondary: rgba(2, 132, 199, 1);
  --x-color-secondary-foreground: #ffffff;
  --x-color-secondary-hover: rgba(3, 105, 161, 1);
  --x-color-secondary-active: rgba(12, 74, 110, 1);
  --x-color-secondary-muted: rgba(224, 242, 254, 1);

  /* STATUS COLORS */
  --x-color-destructive: #dc2626;
  --x-color-destructive-foreground: #ffffff;
  --x-color-destructive-hover: #DC2626;
  --x-color-destructive-muted: #FEE2E2;
  --x-color-error: #dc2626;
  --x-color-success: #16a34a;
  --x-color-success-foreground: #ffffff;
  --x-color-success-muted: #D1FAE5;
  /* Phase 106: ad-hoc partial ramps removed — now in canonical tokens.css ramps.
     GoToM8 overrides full ramps for success/warning/info below. */
  --x-color-success: #16a34a;
  --x-color-success-foreground: #ffffff;
  --x-color-success-muted: #D1FAE5;
  --x-color-warning: #f59e0b;
  --x-color-warning-foreground: #111827;
  --x-color-warning-muted: #FEF3C7;
  --x-color-info: #2563eb;
  --x-color-info-foreground: #ffffff;
  --x-color-info-muted: #DBEAFE;

  /* SIDEBAR — central GoToM8 brand mapping.
     Xablu v3.87.0 XNavigationDrawerMenuItem reads:
       active  → --x-color-sidebar-primary / -primary-foreground
       hover   → --x-color-sidebar-accent  / -accent-foreground
     We chain BOTH into the GoToM8 teal palette so route-active and hover
     stay on-brand. Active = saturated teal-600 + white text (high contrast);
     hover = subtle teal-50 tint + teal-700 text (clearly hoverable, not
     mistaken for active). All literals route through --x-color-primary-*
     so the brand surface stays single-source.
     Fixes RC: dark-teal hover with black text (sidebar-foreground inherits
     on hover when no -accent-foreground override fires). */
  --x-color-sidebar: #ffffff;
  --x-color-sidebar-foreground: #111827;
  --x-color-sidebar-primary: var(--x-color-primary-600);
  --x-color-sidebar-primary-foreground: #ffffff;
  --x-color-sidebar-accent: var(--x-color-primary-50);
  --x-color-sidebar-accent-foreground: var(--x-color-primary-700);
  --x-color-sidebar-border: #d1d5db;
  --x-color-sidebar-ring: var(--x-color-primary-700);

  /* ACCENT */
  --x-color-accent: rgba(15, 89, 89, 1);
  --x-color-accent-hover: rgba(12, 71, 71, 1);

  /* AI */
  --x-color-ai: #7C3AED;
  --x-color-ai-muted: #EDE9FE;

  /* CHART COLOURS */
  --x-color-chart-2: #2E5A8B;
  --x-color-chart-3: #4A7FB5;
  --x-color-chart-5: #7C3AED;

  /* GREY SCALE — Tailwind gray-aligned. Extended 2026-05-06 with the
     missing 50 / 200 / 300 / 400 rungs surfaced by the v3.59.0 drift-gate
     (top-20 unmapped tokens in FigmaMake/src). The Xablu lib does NOT
     ship a grey ramp -- it's a consumer-brand decision. */
  --x-color-grey-50:  #F9FAFB;
  --x-color-grey-100: rgba(243, 244, 246, 1);
  --x-color-grey-200: #E5E7EB;
  --x-color-grey-300: #D1D5DB;
  --x-color-grey-400: #9CA3AF;
  --x-color-grey-700: rgba(55, 65, 81, 1);
  --x-color-grey-t-75: rgba(243, 245, 247, 1);
  --x-color-grey-t-80: rgba(247, 249, 250, 1);

  /* ============================================================
     FIGMAMAKE BRIDGE -- consumer-side aliases (drift-gate cleanup, 2026-05-06)
     ============================================================
     Top-20 unmapped tokens from `xablu-figma-audit figmamake-drift-gate
     --source FigmaMake/src` homed here per the v3.59.0 release-notes
     guidance: "consumer should home in app.css per-consumer theme
     overrides, not file upstream as bridge candidates".

     These are unprefixed aliases that mirror the lib's bridge layer
     pattern (https://gitlab.xablu.com/codechat/xablu-libs/blob/v3.59.0/
     docs/reference/figmamake-bridge.md) but for tokens GoToM8-specific
     OR below the lib's bridge frequency threshold. Adding them here
     means a future paste of FigmaMake `style={{ color: 'var(--grey-50)' }}`
     resolves through this layer to the canonical value.

     Categories:
     - Grey scale (consumer brand palette, Xablu lib has no grey ramp)
     - Danger family -- naming alias for canonical "destructive"
     - Numeric scale rungs below the bridge threshold (success/warning/info)
     - Sidebar accent (semantic role, already canonical)

     Note: the drift-gate count itself does NOT drop after homing -- the
     gate scans FigmaMake/src for unprefixed `var(--X)` refs; aliases
     defined here resolve them at PAINT time but don't change what the
     source tree references. The maintainer's recommended consumer
     threshold for GoToM8 is `--max-unmapped 60`, which this tree
     hits today.
     ============================================================ */
  /* Phase 141 Sprint 2: collision audit against upstream `_content/Xablu.Blazor/figmamake-bridge.css` (v3.80.0).
     Retired here: --success-50/100/200, --warning-100/200/500, --info-200, --sidebar-accent — all
     covered by upstream bridge v3.71.0+ (state-tier ramp completion + sidebar family).
     KEPT here (upstream excludes by policy):
       - --grey-* / --grey-t-* — bridge line 31-32 "Xablu uses semantic --x-color-muted-* instead"
       - --danger-* — upstream uses semantic --destructive-* not --danger-* (FigmaMake exports
         still write var(--danger-600); these aliases resolve them at paint time)
       - --secondary-700 — not in upstream bridge map */
  --grey-50:  var(--x-color-grey-50);
  --grey-100: var(--x-color-grey-100);
  --grey-200: var(--x-color-grey-200);
  --grey-300: var(--x-color-grey-300);
  --grey-400: var(--x-color-grey-400);
  --grey-t-75: var(--x-color-grey-t-75);
  --grey-t-80: var(--x-color-grey-t-80);
  --danger-50:  var(--x-color-destructive-50);
  --danger-200: var(--x-color-destructive-200);
  --danger-600: var(--x-color-destructive-600);
  --danger-700: var(--x-color-destructive-700);
  --secondary-700: var(--x-color-secondary-700);

  /* SPACING */
  --x-spacing-0: 0;
  --x-spacing-0-5: 2px;
  --x-spacing-1: 4px;
  --x-spacing-1-5: 6px;
  --x-spacing-2: 8px;
  --x-spacing-3: 12px;
  --x-spacing-4: 16px;
  --x-spacing-5: 20px;
  --x-spacing-6: 24px;
  --x-spacing-8: 32px;
  --x-spacing-10: 40px;
  --x-spacing-12: 48px;
  --x-spacing-16: 64px;
  --x-spacing-xs: 4px;
  --x-spacing-sm: 8px;
  --x-spacing-md: 12px;
  --x-spacing-lg: 16px;
  --x-spacing-xl: 20px;
  --x-spacing-xxl: 24px;

  /* RADIUS */
  --x-radius-sm: 4px;
  --x-radius-md: 6px;
  --x-radius-lg: 8px;
  --x-radius-xl: 12px;
  --x-radius-2xl: 16px;
  --x-radius-full: 9999px;
  --x-radius-card: 12px;
  --x-radius-button: 8px;

  /* DERIVED SEMANTIC (DB-0.0 — undefined token fixes) */
  --x-color-danger: var(--x-color-destructive);
  --x-color-info-t90: rgba(37, 99, 235, 0.1);
  --x-color-success-t90: rgba(22, 163, 74, 0.1);
  --x-color-warning-t90: rgba(245, 158, 11, 0.1);
  --x-color-primary-t80: rgba(15, 89, 89, 0.2);
  --x-color-surface-secondary: #f3f4f6;
  --x-color-accent-muted: rgba(15, 89, 89, 0.1);

  /* ELEVATION */
  --x-elevation-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --x-elevation-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --x-elevation-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --x-elevation-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --x-elevation-card: 0 4px 12px rgba(0, 0, 0, 0.08);
  --x-elevation-card-hover: 0 8px 16px rgba(0, 0, 0, 0.12);

  /* TEXT SIZES — aligned to canonical lib values 2026-05-06 (was bloated against
     the lib's XMetricCard / stat-tile assumptions; user flagged stat numbers as
     "FAR too big" in the v3.59.0 visual review). The FigmaMake source's
     `--text-2xl: 36px /* h1 */` semantic is preserved by routing h1 page titles
     through `--x-text-4xl` (36px in canonical) or the typed `--x-font-size-h1`
     token, NOT via `--x-text-2xl` (which the lib uses for stat values).
     Anchors stay defined explicitly per Sprint CS ratchet
     CsTokenMigrationGuardrailTests.GotomTheme_ShouldDefine_AllCanonicalTextAliases. */
  --x-text-xxs: 11px;       /* +1px vs canonical 10px — intentional GoToM8 caption preference */
  --x-text-xs: 12px;        /* matches canonical */
  --x-text-sm: 14px;        /* matches canonical */
  --x-text-base: 16px;      /* matches canonical */
  --x-text-lg: 1.125rem;    /* canonical 18px (was 20px) */
  --x-text-xl: 1.25rem;     /* canonical 20px (was 25px) */
  --x-text-2xl: 1.5rem;     /* canonical 24px (was 36px) — primary fix for "FAR too big" stat numbers */
  --x-text-3xl: 1.875rem;   /* canonical 30px (was 28px) */
  --x-text-4xl: 36px;       /* matches canonical — h1 / page-title scale */

  /* PAGE BACKGROUND COLORS */
  --x-color-page-workspace: #DDE9F4;
  --x-color-page-brainstorm: #f0f4f8;
  --x-color-page-asset-library: #f5f7fa;
  --x-color-page-changes: #f5f7fa;

  /* BLAZOR ERROR COLORS (Framework) */
  /* @codechat-ignore CC-030 */
  --x-color-blazor-error-bg: #b32121;
  --x-color-blazor-error-text: #FFFFFF;
}

/* DARK THEME */
[data-theme="dark"] {
  color-scheme: dark;
  --x-color-background: #111827;
  --x-color-foreground: #F3F4F6;
  --x-color-card: #1F2937;
  --x-color-card-foreground: #F3F4F6;
  --x-color-popover: #1F2937;
  --x-color-popover-foreground: #F3F4F6;
  --x-color-muted: #374151;
  --x-color-muted-foreground: #D1D5DB;
  --x-color-input: #374151;
  --x-color-input-background: #374151;
  --x-color-card-hover: #4B5563;
  --x-color-border: #4B5563;
  --x-color-ring: rgba(13, 133, 136, 0.6);
  --x-color-primary: rgba(16, 163, 166, 1);
  --x-color-primary-foreground: #ffffff;
  --x-color-primary-hover: rgba(13, 133, 136, 1);
  --x-color-primary-muted: rgba(13, 133, 136, 0.15);
  --x-color-secondary: rgba(13, 133, 136, 0.15);
  --x-color-secondary-foreground: rgba(16, 163, 166, 1);
  --x-color-accent: rgba(16, 163, 166, 1);
  --x-color-accent-hover: rgba(13, 133, 136, 1);
  --x-color-success: #34D399;
  --x-color-success-muted: rgba(52, 211, 153, 0.15);
  --x-color-warning: #FBBF24;
  --x-color-warning-muted: rgba(251, 191, 36, 0.15);
  --x-color-destructive: #F87171;
  --x-color-destructive-muted: rgba(248, 113, 113, 0.15);
  --x-color-destructive-hover: #EF4444;
  --x-color-info: #60A5FA;
  --x-color-info-muted: rgba(96, 165, 250, 0.15);
  --x-color-error: #F87171;
  /* SIDEBAR (dark) — same brand-chain pattern as the light override.
     Active = teal-500 (slightly brighter for dark mode contrast) + dark text;
     hover = subtle teal-muted tint + brighter teal foreground.
     Fixes RC: dark-mode active state showed canonical blue + hover showed
     teal-500 with default light foreground (low contrast on a saturated fill). */
  --x-color-sidebar: #111827;
  --x-color-sidebar-foreground: #F3F4F6;
  --x-color-sidebar-primary: var(--x-color-primary-500, #14B8A6);
  --x-color-sidebar-primary-foreground: #0A1414;
  --x-color-sidebar-accent: var(--x-color-primary-900, rgba(13, 133, 136, 0.18));
  --x-color-sidebar-accent-foreground: var(--x-color-primary-300, #5EEAD4);
  --x-color-sidebar-border: #374151;
  --x-color-sidebar-ring: var(--x-color-primary-400, #2DD4BF);
  --x-elevation-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --x-elevation-md: 0 4px 8px rgba(0, 0, 0, 0.4);
  --x-elevation-lg: 0 10px 20px rgba(0, 0, 0, 0.5);
  --x-elevation-card: 0 2px 8px rgba(0, 0, 0, 0.3);
  --x-color-chart-2: #4ADE80;
  --x-color-chart-3: #FBBF24;
  --x-color-chart-5: #F87171;
  --x-color-ai: #A78BFA;
  --x-color-ai-muted: rgba(167, 139, 250, 0.15);
  /* DB-0.0 — dark overrides for previously undefined tokens */
  --x-color-danger: var(--x-color-destructive);
  --x-color-info-t90: rgba(96, 165, 250, 0.12);
  --x-color-success-t90: rgba(52, 211, 153, 0.12);
  --x-color-warning-t90: rgba(251, 191, 36, 0.12);
  --x-color-primary-t80: rgba(16, 163, 166, 0.2);
  --x-color-surface-secondary: #1F2937;
  --x-color-accent-muted: rgba(16, 163, 166, 0.1);
  --x-elevation-card-hover: 0 8px 16px rgba(0, 0, 0, 0.4);
  /* DB-0.2 — complete dark token coverage */
  --x-color-bg-overlay: rgba(0, 0, 0, 0.6);
  --x-color-overlay: rgba(0, 0, 0, 0.6);
  --x-color-text-primary: var(--x-color-foreground);
  --x-color-destructive-foreground: #ffffff;
  --x-color-grey-100: rgba(55, 65, 81, 1);
  --x-color-grey-700: rgba(209, 213, 219, 1);
  --x-color-grey-t-75: rgba(55, 65, 81, 0.75);
  --x-color-grey-t-80: rgba(55, 65, 81, 0.80);
  --x-color-info-50: rgba(96, 165, 250, 0.08);
  --x-color-info-100: rgba(96, 165, 250, 0.12);
  --x-color-info-200: rgba(96, 165, 250, 0.18);
  --x-color-info-700: rgba(147, 197, 253, 1);
  --x-color-info-foreground: #ffffff;
  --x-color-primary-200: rgba(16, 163, 166, 0.18);
  --x-color-primary-600: rgba(20, 184, 166, 1);
  --x-color-primary-700: rgba(45, 212, 191, 1);
  --x-color-primary-active: rgba(10, 110, 112, 1);
  --x-color-secondary-hover: rgba(16, 163, 166, 0.25);
  --x-color-secondary-muted: rgba(13, 133, 136, 0.12);
  --x-color-success-50: rgba(52, 211, 153, 0.08);
  --x-color-success-200: rgba(52, 211, 153, 0.18);
  --x-color-success-700: rgba(110, 231, 183, 1);
  --x-color-success-foreground: #ffffff;
  --x-color-warning-50: rgba(251, 191, 36, 0.08);
  --x-color-warning-200: rgba(251, 191, 36, 0.18);
  --x-color-warning-700: rgba(252, 211, 77, 1);
  --x-color-warning-foreground: #111827;
  --x-color-page-workspace: #1a2332;
  --x-color-page-brainstorm: #111827;
  --x-color-page-asset-library: #111827;
  --x-color-page-changes: #111827;
}

/* SYSTEM PREFERENCE FALLBACK (DB-0.6) — applies when no data-theme set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --x-color-background: #111827;
    --x-color-foreground: #F3F4F6;
    --x-color-card: #1F2937;
    --x-color-card-foreground: #F3F4F6;
    --x-color-popover: #1F2937;
    --x-color-popover-foreground: #F3F4F6;
    --x-color-muted: #374151;
    --x-color-muted-foreground: #D1D5DB;
    --x-color-input: #374151;
    --x-color-input-background: #374151;
    --x-color-card-hover: #4B5563;
    --x-color-border: #4B5563;
    --x-color-ring: rgba(13, 133, 136, 0.6);
    --x-color-primary: rgba(16, 163, 166, 1);
    --x-color-primary-foreground: #ffffff;
    --x-color-primary-hover: rgba(13, 133, 136, 1);
    --x-color-primary-muted: rgba(13, 133, 136, 0.15);
    --x-color-secondary: rgba(13, 133, 136, 0.15);
    --x-color-secondary-foreground: rgba(16, 163, 166, 1);
    --x-color-accent: rgba(16, 163, 166, 1);
    --x-color-accent-hover: rgba(13, 133, 136, 1);
    --x-color-success: #34D399;
    --x-color-success-muted: rgba(52, 211, 153, 0.15);
    --x-color-warning: #FBBF24;
    --x-color-warning-muted: rgba(251, 191, 36, 0.15);
    --x-color-destructive: #F87171;
    --x-color-destructive-muted: rgba(248, 113, 113, 0.15);
    --x-color-destructive-hover: #EF4444;
    --x-color-info: #60A5FA;
    --x-color-info-muted: rgba(96, 165, 250, 0.15);
    --x-color-error: #F87171;
    /* SIDEBAR (system-dark @media) — mirrors the explicit dark mode above. */
    --x-color-sidebar: #111827;
    --x-color-sidebar-foreground: #F3F4F6;
    --x-color-sidebar-primary: var(--x-color-primary-500, #14B8A6);
    --x-color-sidebar-primary-foreground: #0A1414;
    --x-color-sidebar-accent: var(--x-color-primary-900, rgba(13, 133, 136, 0.18));
    --x-color-sidebar-accent-foreground: var(--x-color-primary-300, #5EEAD4);
    --x-color-sidebar-border: #374151;
    --x-color-sidebar-ring: var(--x-color-primary-400, #2DD4BF);
    --x-elevation-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --x-elevation-md: 0 4px 8px rgba(0, 0, 0, 0.4);
    --x-elevation-lg: 0 10px 20px rgba(0, 0, 0, 0.5);
    --x-elevation-card: 0 2px 8px rgba(0, 0, 0, 0.3);
    --x-color-chart-2: #4ADE80;
    --x-color-chart-3: #FBBF24;
    --x-color-chart-5: #F87171;
    --x-color-ai: #A78BFA;
    --x-color-ai-muted: rgba(167, 139, 250, 0.15);
    --x-color-danger: var(--x-color-destructive);
    --x-color-info-t90: rgba(96, 165, 250, 0.12);
    --x-color-success-t90: rgba(52, 211, 153, 0.12);
    --x-color-warning-t90: rgba(251, 191, 36, 0.12);
    --x-color-primary-t80: rgba(16, 163, 166, 0.2);
    --x-color-surface-secondary: #1F2937;
    --x-color-accent-muted: rgba(16, 163, 166, 0.1);
    --x-elevation-card-hover: 0 8px 16px rgba(0, 0, 0, 0.4);
    --x-color-bg-overlay: rgba(0, 0, 0, 0.6);
    --x-color-overlay: rgba(0, 0, 0, 0.6);
    --x-color-text-primary: var(--x-color-foreground);
    --x-color-destructive-foreground: #ffffff;
    /* Dark-mode grey scale -- INVERTED relative to light mode.
       The existing grey-100/700 follow the convention "scale number
       preserves semantic role across themes": grey-50 is the bg-accent
       (near-black in dark, near-white in light); grey-700 is the
       darkest text (near-white in dark, near-black in light). New
       50 / 200 / 300 / 400 rungs added 2026-05-06 to mirror light mode. */
    --x-color-grey-50:  #111827;
    --x-color-grey-100: rgba(55, 65, 81, 1);
    --x-color-grey-200: #4B5563;
    --x-color-grey-300: #6B7280;
    --x-color-grey-400: #9CA3AF;
    --x-color-grey-700: rgba(209, 213, 219, 1);
    --x-color-grey-t-75: rgba(55, 65, 81, 0.75);
    --x-color-grey-t-80: rgba(55, 65, 81, 0.80);
    --x-color-info-50: rgba(96, 165, 250, 0.08);
    --x-color-info-100: rgba(96, 165, 250, 0.12);
    --x-color-info-200: rgba(96, 165, 250, 0.18);
    --x-color-info-700: rgba(147, 197, 253, 1);
    --x-color-info-foreground: #ffffff;
    --x-color-primary-200: rgba(16, 163, 166, 0.18);
    --x-color-primary-700: rgba(45, 212, 191, 1);
    --x-color-primary-active: rgba(10, 110, 112, 1);
    --x-color-secondary-hover: rgba(16, 163, 166, 0.25);
    --x-color-secondary-muted: rgba(13, 133, 136, 0.12);
    --x-color-success-50: rgba(52, 211, 153, 0.08);
    --x-color-success-200: rgba(52, 211, 153, 0.18);
    --x-color-success-700: rgba(110, 231, 183, 1);
    --x-color-success-foreground: #ffffff;
    --x-color-warning-50: rgba(251, 191, 36, 0.08);
    --x-color-warning-200: rgba(251, 191, 36, 0.18);
    --x-color-warning-700: rgba(252, 211, 77, 1);
    --x-color-warning-foreground: #111827;
    --x-color-page-workspace: #1a2332;
    --x-color-page-brainstorm: #111827;
    --x-color-page-asset-library: #111827;
    --x-color-page-changes: #111827;
  }
}

} /* end @layer project-tokens */