@custom-variant dark (&:is(.dark *)); /* base-ui renders data-orientation="horizontal|vertical"; the app components (Separator, etc.) target it with the data-horizontal:/data-vertical: utilities. Without these custom variants those compile to [data-horizontal] and never match, so e.g. the separator renders at height 0 (invisible). */ @custom-variant data-horizontal (&[data-orientation="horizontal"]); @custom-variant data-vertical (&[data-orientation="vertical"]); :root { --font-size: 13px; /* ─── Typography scale (ZenDS Figma) ────────────────────────── Two typescales — Heading and Text — all line-heights on 4px grid. HEADINGS (font: Heading / Rawest) Huge: 32px / 40px · Medium · Denser Xlarge: 24px / 32px · Medium · Dense Large: 18px / 28px · Medium · Dense Medium: 15px / 24px · Medium · Normal Label Medium: 15px / 20px · Medium · Normal Label Small: 13px / 16px · Medium · Normal TEXT (font: Base / Manrope) Text Large: 15px / 24px · Regular/Medium/Semi · Normal Text Base: 13px / 20px · Regular/Medium/Semi · Normal Text Small: 12px / 16px · Regular/Medium/Semi · Normal Text Tiny: 11px / 12px · Regular/Medium/Semi · Normal ──────────────────────────────────────────────────────────── */ /* Heading font-size tokens (Figma names) */ --heading-huge: 32px; --heading-xlarge: 24px; --heading-large: 18px; --heading-medium: 15px; --label-medium: 15px; /* same size as heading-medium, different line-height */ --label-small: 13px; /* Text font-size tokens (Figma names) */ --text-large: 15px; --text-base: 13px; --text-small: 12px; --text-tiny: 11px; /* ─── Marketing display scale (website + landings) ─────────── Display headings for marketing surfaces (Home, /products/*, /solutions/*, /agents/*, /workflows/*, /compare/*). Sized via clamp() so they scale fluidly between mobile and 4K displays, not at the +1px wide-desktop breakpoint the app headings step at. Use these on the website. Do not use --heading-* for marketing surfaces; --heading-huge tops out at 32px which reads as a dense form label at hero scale. Pick the right token: --display-huge landmark hero (Home, /products overview) --display-xlarge standard hero (product / solution page) --display-large anchor section header (mid-scroll moments) --display-medium subsection header (within a vertical scroll) ──────────────────────────────────────────────────────────── */ --display-huge: clamp(56px, 7vw, 96px); --display-xlarge: clamp(44px, 5vw, 72px); --display-large: clamp(36px, 4vw, 56px); --display-medium: clamp(28px, 3vw, 40px); /* Display line-heights — tighter the larger the size. */ --leading-display-huge: 1.05; --leading-display-xlarge: 1.1; --leading-display-large: 1.15; --leading-display-medium: 1.2; /* Legacy aliases — map old generic names to Figma tokens. Kept for backward compatibility across existing components. */ --text-display: 72px; /* marketing — kept flat for legacy callers; prefer --display-xlarge */ --text-3xl: 44px; /* marketing — kept flat for legacy callers; prefer --display-xlarge */ --text-2xl: var(--heading-huge); --text-xl2: var(--heading-xlarge); --text-xl: var(--heading-large); --text-lg: var(--heading-medium); --text-sm: var(--text-small); --text-xs: var(--text-tiny); --text-2xs: var(--text-tiny); /* alias — 11px is the DS floor */ /* Font families */ --font-heading: 'Rawest', sans-serif; --font-base: 'Manrope', sans-serif; --font-mono: 'IBM Plex Mono', monospace; /* Legacy alias */ --font-manrope: var(--font-base); /* Marketing-site aliases — referenced verbatim across the website folder's CSS files. Keep both spellings live so pages stop relying on browser fallback resolution. */ --font-display: var(--font-heading); --font-code: var(--font-mono); /* Font weights */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Letter spacing / tracking (Figma names) */ --tracking-denser: -0.03em; /* Heading Huge */ --tracking-dense: -0.02em; /* Heading Xlarge, Heading Large */ --tracking-normal: 0em; /* Heading Medium, Labels, all Text */ --tracking-wide: 0.05em; /* uppercase labels */ --tracking-micro: 0.01em; /* subtle positive adjustments */ /* Legacy alias */ --tracking-display: var(--tracking-dense); /* Text-transform / text-case */ --text-case-upper: uppercase; /* label transforms */ --text-case-none: none; /* reset / normal case */ /* ─── Line-height scale ────────────────────────────────────── Mapped 1 : 1 to the Figma typescale pairings. Heading line-heights use the Figma heading names. Text line-heights use the Figma text names. ──────────────────────────────────────────────────────────── */ /* Heading line-heights (Figma names) */ --leading-heading-huge: 40px; /* 32px / 40px */ --leading-heading-xlarge: 32px; /* 24px / 32px */ --leading-heading-large: 28px; /* 18px / 28px */ --leading-heading-medium: 24px; /* 15px / 24px */ --leading-label-medium: 20px; /* 15px / 20px */ --leading-label-small: 16px; /* 13px / 16px */ /* Text line-heights (Figma names) */ --leading-text-large: 24px; /* 15px / 24px */ --leading-text-base: 20px; /* 13px / 20px */ --leading-text-small: 16px; /* 12px / 16px */ --leading-text-tiny: 12px; /* 11px / 12px */ /* Legacy aliases — map to Figma tokens */ --leading-none: 1; /* flush — icon labels, badges */ --leading-tight: var(--leading-text-tiny); --leading-snug: var(--leading-text-small); --leading-base: var(--leading-text-base); --leading-relaxed: var(--leading-text-base); --leading-lg: var(--leading-text-large); --leading-display: var(--leading-heading-large); --leading-xl: var(--leading-heading-xlarge); --leading-2xl: var(--leading-heading-huge); --leading-3xl: 52px; /* giant heading (marketing) */ --leading-compact: 1.3; /* compact multi-line descriptions */ --leading-normal: 1.4; /* menu descriptions, card body */ --leading-prose: 1.5; /* multi-line body / paragraphs */ --leading-code: 1.6; /* code blocks / monospace */ /* ─── Spacing primitives (Figma "Primitive Spacing" · 4px grid) ─ Single source of truth for the entire spacing scale. ───────────────────────────────────────────────────────────── */ --space-0: 0px; --space-50: 2px; --space-100: 4px; --space-200: 8px; --space-300: 12px; --space-400: 16px; --space-500: 20px; --space-600: 24px; --space-800: 32px; --space-1000: 40px; --space-1200: 48px; --space-1400: 56px; --space-2400: 96px; --space-3400: 136px; /* Negative primitives (margins, offsets) */ --space-n-50: -2px; --space-n-100: -4px; --space-n-200: -8px; --space-n-300: -12px; --space-n-400: -16px; --space-n-500: -20px; --space-n-600: -24px; /* ─── Gap semantic aliases (Figma "Gap" — component-level) ──── */ --gap-none: var(--space-0); /* No spacing */ --gap-inline: var(--space-50); /* Icons next to text, inline elements */ --gap-related: var(--space-100); /* Label-input, helper text */ --gap-element: var(--space-200); /* Between elements (list items, fields) */ --gap-group: var(--space-300); /* Between groups of elements */ --gap-block: var(--space-400); /* Between blocks within a component */ --gap-region: var(--space-500); /* Between regions of a large component */ /* ─── Section semantic aliases (Figma "Section" — layout-level) */ --section-tight: var(--space-500); /* 20px — closely related sections */ --section-default: var(--space-600); /* 24px — standard section separation */ --section-comfortable: var(--space-800); /* 32px — comfortable separation */ --section-loose: var(--space-1000); /* 40px — more breathing room */ --section-page-block: var(--space-1200); /* 48px — main page blocks */ --section-page-area: var(--space-1400); /* 56px — large page areas */ --section-hero: var(--space-2400); /* 96px — hero or featured sections */ --section-landmark: var(--space-3400); /* 136px — major landmark separation */ /* ─── Shorthand tokens (consumed by components — legacy compat) Re-wired to reference the semantic scale where they match. ───────────────────────────────────────────────────────────── */ --gap-xsmall: var(--gap-inline); /* 2px */ --gap-small: var(--gap-related); /* 4px */ --gap-medium: 6px; /* legacy — off 4px grid, no Figma primitive */ --gap-base: var(--gap-element); /* 8px */ --gap-large: var(--gap-group); /* 12px */ /* ─── Control scale (buttons, inputs, icon-buttons, menu items) ─── All interactive controls share the same height/padding/font scale. This ensures visual consistency across buttons, inputs, selects, etc. ─────────────────────────────────────────────────────────────────── */ /* Heights */ --control-height-sm: 24px; /* compact — inline items, toolbars */ --control-height-base: 32px; /* default — standard forms */ --control-height-lg: 40px; /* prominent — onboard, settings */ /* Switch tokens */ --switch-track-width: 28px; --switch-track-height: 16px; --switch-thumb-size: 12px; --switch-thumb-offset: 2px; --switch-thumb-travel: 12px; /* Horizontal padding per size */ --control-px-sm: var(--gap-element); /* 6px */ --control-px-base: var(--gap-group); /* 12px */ --control-px-lg: var(--gap-block); /* 16px */ /* Font size per size */ --control-font-sm: var(--text-xs); /* 12px */ --control-font-base: var(--text-sm); /* 14px */ --control-font-lg: var(--text-base); /* 16px */ /* @deprecated — use control scale above instead */ --input-padding: 5px 8px; --input-padding-y: 5px; --input-padding-x: 8px; --input-height: 30px; /* ─── Menu item vertical padding per size (px-3 is constant) ──────── */ --menu-item-py-sm: 2px; /* compact menus */ --menu-item-py-base: 6px; /* standard menus (default) */ --menu-item-py-lg: 10px; /* spacious menus */ /* ─── ZenDS Primitives ───────────────────────────────────── Single source of truth — full 12-step scales from Figma. All semantic tokens reference these primitives. ────────────────────────────────────────────────────────── */ /* Gray — warm neutral */ --zen-gray-1: #FCFCFB; --zen-gray-2: #FCFAF9; --zen-gray-3: #F1F0EE; --zen-gray-4: #E9E8E6; --zen-gray-5: #D8D6D4; --zen-gray-6: #BBB7B4; --zen-gray-7: #A19E9B; --zen-gray-8: #898580; --zen-gray-9: #706A65; --zen-gray-10: #574F4A; --zen-gray-11: #3E342F; --zen-gray-12: #1D1612; /* Red */ --zen-red-1: #FFFAFA; --zen-red-2: #FDF5F5; --zen-red-3: #F9E6E6; --zen-red-4: #F0C4C4; --zen-red-5: #E69999; --zen-red-6: #D63439; --zen-red-7: #C42D32; --zen-red-8: #A6262A; --zen-red-9: #871F22; --zen-red-10: #69181A; --zen-red-11: #4A1112; --zen-red-12: #2C0A0A; /* Orange */ --zen-orange-1: #FEFDFB; --zen-orange-2: #FDF9F2; --zen-orange-3: #F9EFE0; --zen-orange-4: #F0D9B8; --zen-orange-5: #E6BD7A; --zen-orange-6: #E67E22; --zen-orange-7: #D16F1E; --zen-orange-8: #B35E1A; --zen-orange-9: #944E15; --zen-orange-10: #753E11; --zen-orange-11: #562E0C; --zen-orange-12: #331D07; /* Yellow */ --zen-yellow-1: #FFFDF4; --zen-yellow-2: #FFFAEB; --zen-yellow-3: #FEF3C7; --zen-yellow-4: #FDE68A; --zen-yellow-5: #FCD34D; --zen-yellow-6: #F6C63A; --zen-yellow-7: #EDB826; --zen-yellow-8: #E4A914; --zen-yellow-9: #C9960F; --zen-yellow-10: #B3850D; --zen-yellow-11: #8A5A0C; --zen-yellow-12: #4C2E0A; /* Green */ --zen-green-1: #FCFEFB; --zen-green-2: #F6FDF2; --zen-green-3: #E8F7E0; --zen-green-4: #C8EBB8; --zen-green-5: #9ADA7A; --zen-green-6: #27AE60; --zen-green-7: #229954; --zen-green-8: #1D8047; --zen-green-9: #18683A; --zen-green-10: #13502E; --zen-green-11: #0E3821; --zen-green-12: #082014; /* Teal */ --zen-teal-1: #FCFEFE; --zen-teal-2: #F2FDFD; --zen-teal-3: #E0F7F9; --zen-teal-4: #B8EBF0; --zen-teal-5: #7ADAE6; --zen-teal-6: #17A2B8; --zen-teal-7: #148E9F; --zen-teal-8: #117782; --zen-teal-9: #0E6168; --zen-teal-10: #0B4C50; --zen-teal-11: #083638; --zen-teal-12: #052021; /* Cyan */ --zen-cyan-1: #FCFFFE; --zen-cyan-2: #F2FDFC; --zen-cyan-3: #E0F9F7; --zen-cyan-4: #B8F0EB; --zen-cyan-5: #7AE6DA; --zen-cyan-6: #20B2AA; --zen-cyan-7: #1C9E97; --zen-cyan-8: #18827C; --zen-cyan-9: #146863; --zen-cyan-10: #104E4A; --zen-cyan-11: #0C3835; --zen-cyan-12: #072120; /* Sky */ --zen-sky-1: #FCFDFE; --zen-sky-2: #F5FAFD; --zen-sky-3: #E6F2F9; --zen-sky-4: #C4DEF0; --zen-sky-5: #99C7E6; --zen-sky-6: #3498DB; --zen-sky-7: #2E86C2; --zen-sky-8: #2671A3; --zen-sky-9: #1F5C85; --zen-sky-10: #184667; --zen-sky-11: #11324A; --zen-sky-12: #0A1F2C; /* Blue */ --zen-blue-1: #FCFDFE; --zen-blue-2: #F4F9FD; --zen-blue-3: #E4F1F9; --zen-blue-3-hover: #E4F1F9; --zen-blue-4: #C0DCF0; --zen-blue-4-active: #C0DCF0; --zen-blue-5: #94C2E6; --zen-blue-6: #2980B9; --zen-blue-7: #2470A3; --zen-blue-8: #1F5E8A; --zen-blue-9: #1A4D70; --zen-blue-10: #153C57; --zen-blue-11: #102B3E; --zen-blue-12: #0B1A25; /* Indigo */ --zen-indigo-1: #FDFDFE; --zen-indigo-2: #F9F9FD; --zen-indigo-3: #EFEFF9; --zen-indigo-4: #D6D6F0; --zen-indigo-5: #B3B3E6; --zen-indigo-6: #6C5CE7; --zen-indigo-7: #5F51D1; --zen-indigo-8: #5044B3; --zen-indigo-9: #423894; --zen-indigo-10: #342C75; --zen-indigo-11: #262056; --zen-indigo-12: #181433; /* Purple */ --zen-purple-1: #FDFCFE; --zen-purple-2: #F8F6FD; --zen-purple-3: #EFEAF9; --zen-purple-4: #D6C8F0; --zen-purple-5: #B39CE6; --zen-purple-6: #8B5CF6; --zen-purple-7: #7C4FE8; --zen-purple-8: #6A42D1; --zen-purple-9: #5835B8; --zen-purple-10: #46299E; --zen-purple-11: #341D85; --zen-purple-12: #22116C; /* Pink */ --zen-pink-1: #FEFCFD; --zen-pink-2: #FDF5F8; --zen-pink-3: #F9E6ED; --zen-pink-4: #F0C4D4; --zen-pink-5: #E699B8; --zen-pink-6: #E91E63; --zen-pink-7: #D11A58; --zen-pink-8: #B3164C; --zen-pink-9: #94123F; --zen-pink-10: #750E32; --zen-pink-11: #560A25; --zen-pink-12: #330618; /* Brown */ --zen-brown-1: #FEFDFC; --zen-brown-2: #FDF8F4; --zen-brown-3: #F9EFEA; --zen-brown-4: #F0D9CC; --zen-brown-5: #E6BDAA; --zen-brown-6: #8D6E63; --zen-brown-7: #7F625A; --zen-brown-8: #6C5350; --zen-brown-9: #594546; --zen-brown-10: #46373B; --zen-brown-11: #332A2F; --zen-brown-12: #20181D; /* ─── Semantic tokens (sourced from primitives) ──────────── */ /* Pure white — Base/Default in Figma, used for card/popover/input surfaces */ --white: #FFFFFF; /* The default background color for the application. → Gray/1 */ --background: var(--zen-gray-1); /* Marketing-site alias for --background. Used as page surface token across the website folder's CSS files; keep both live so pages stop relying on browser-fallback resolution. */ --surface: var(--background); /* Legacy --foreground removed — use --text-primary instead */ /* The background color for cards, modals, and other containers. → Base/Default */ --card: var(--white); /* The default color for text or elements on top of cards. → Gray/12 */ --card-foreground: var(--zen-gray-12); /* The background color for dropdowns and tooltips. → white surface */ --popover: var(--white); /* The default color for text on top of dropdowns and tooltips. → Gray/12 */ --popover-foreground: var(--zen-gray-12); /* ZenDS Menu component tokens */ /* The background color for dropdown menus. → Overlay/Default */ --menu: var(--white); /* The default color for text in dropdown menus. → Text Primary/Default → Gray/12 */ --menu-foreground: var(--zen-gray-12); /* The hover/focus background color for menu items. → Sunken Hover/Default */ --menu-item-hover: var(--sunken-hover); /* Icon color in menu items. → Icon Primary/Default → Gray/12 */ --menu-icon: var(--icon-primary); /* Disabled text in menu items. → Text Disabled/Default → Gray/7 */ --menu-text-disabled: var(--zen-gray-7); /* Destructive text in menu items. → Text Primary/Negative → Red/10 */ --menu-text-destructive: var(--zen-red-10); /* Hover background for destructive menu items → Red/2 */ --menu-item-hover-destructive: var(--zen-red-3); /* Menu item icon size */ --menu-icon-size: 20px; /* ZenDS Tooltip tokens — dark bg + white text */ --tooltip: var(--text-primary); --tooltip-foreground: var(--white); /* The primary color used for buttons, links, and other interactive elements. → Gray/1 */ --primary: var(--zen-gray-1); /* The default color for text on top of primary colored elements. → Gray/12 */ --primary-foreground: var(--zen-gray-12); /* The secondary color used for secondary (NOT-DESTRUCTIVE) buttons. */ --secondary: transparent; /* The default color for text on top of secondary colored elements. → Gray/12 */ --secondary-foreground: var(--zen-gray-12); /* The muted color used for less prominent elements. → Gray/4 */ --muted: var(--zen-gray-4); /* Legacy --muted-foreground removed — use --text-secondary instead */ /* The accent color used for highlights and interactive elements. → Purple/9 */ --accent: var(--zen-purple-9); /* The default color for text on top of accent colored elements. → white */ --accent-foreground: var(--white); /* The color for destructive actions. → Red/6 */ --destructive: var(--zen-red-6); /* The default color for text on top of destructive elements. → white */ --destructive-foreground: var(--white); /* ─── Border semantic aliases (Figma "Border" collection) ─ */ --border-default: var(--zen-gray-5); /* Border / Default — buttons, inputs, radio groups */ --border-subtle: var(--zen-gray-3); /* Border / Subtle — card containers, lighter dividers */ --border-disabled: var(--zen-gray-2); /* Border / Disabled — deactivated elements */ --border-accent: var(--zen-purple-6); /* Border / Accent — focus/active on inputs */ --border-positive: var(--zen-green-6); /* Border / Positive — success state */ --border-warning: var(--zen-yellow-6); /* Border / Warning — warning state */ --border-negative: var(--zen-red-6); /* Border / Negative — error/destructive state */ /* ─── Border per-color aliases (Figma row-5 default) ──── */ --border-red: var(--zen-red-5); --border-orange: var(--zen-orange-5); --border-yellow: var(--zen-yellow-5); --border-green: var(--zen-green-5); --border-teal: var(--zen-teal-5); --border-cyan: var(--zen-cyan-5); --border-sky: var(--zen-sky-5); --border-blue: var(--zen-blue-5); --border-indigo: var(--zen-indigo-5); --border-purple: var(--zen-purple-5); --border-pink: var(--zen-pink-5); --border-brown: var(--zen-brown-5); /* ─── Border Hover aliases (Figma row-6/7) ─────────────── */ --border-default-hover: var(--zen-gray-6); --border-subtle-hover: var(--zen-gray-4); --border-accent-hover: var(--zen-purple-7); --border-positive-hover: var(--zen-green-7); --border-warning-hover: var(--zen-yellow-7); --border-negative-hover: var(--zen-red-7); --border-red-hover: var(--zen-red-6); --border-orange-hover: var(--zen-orange-6); --border-yellow-hover: var(--zen-yellow-6); --border-green-hover: var(--zen-green-6); --border-teal-hover: var(--zen-teal-6); --border-cyan-hover: var(--zen-cyan-6); --border-sky-hover: var(--zen-sky-6); --border-blue-hover: var(--zen-blue-6); --border-indigo-hover: var(--zen-indigo-6); --border-purple-hover: var(--zen-purple-6); --border-pink-hover: var(--zen-pink-6); --border-brown-hover: var(--zen-brown-6); /* ─── Border Active aliases (Figma row-7/8) ────────────── */ --border-default-active: var(--zen-gray-7); --border-subtle-active: var(--zen-gray-5); --border-accent-active: var(--zen-purple-8); --border-positive-active: var(--zen-green-8); --border-warning-active: var(--zen-yellow-8); --border-negative-active: var(--zen-red-8); --border-red-active: var(--zen-red-7); --border-orange-active: var(--zen-orange-7); --border-yellow-active: var(--zen-yellow-7); --border-green-active: var(--zen-green-7); --border-teal-active: var(--zen-teal-7); --border-cyan-active: var(--zen-cyan-7); --border-sky-active: var(--zen-sky-7); --border-blue-active: var(--zen-blue-7); --border-indigo-active: var(--zen-indigo-7); --border-purple-active: var(--zen-purple-7); --border-pink-active: var(--zen-pink-7); --border-brown-active: var(--zen-brown-7); /* Shorthand — consumed by global * rule & Tailwind `border` class */ --border: var(--border-subtle); /* ─── Divider aliases (Figma "Divider" collection) ─────── */ --divider-primary: var(--zen-gray-5); --divider-secondary: var(--zen-gray-3); --divider-primary-accent: var(--zen-purple-7); --divider-secondary-accent: var(--zen-purple-5); /* ─── Focus aliases (Figma "Focus" collection) ─────────── */ --focus-primary: var(--zen-purple-7); --focus-secondary: var(--zen-purple-5); --focus-primary-negative: var(--zen-red-8); --focus-secondary-negative: var(--zen-red-6); /* ─── Solid aliases (Figma "Solid" collection — row-8/9/12) */ --solid-neutral: var(--zen-gray-12); --solid-neutral-hover: var(--zen-gray-11); --solid-accent: var(--zen-purple-8); --solid-accent-hover: var(--zen-purple-9); --solid-negative: var(--zen-red-7); --solid-negative-hover: var(--zen-red-10); --solid-red: var(--zen-red-9); --solid-red-hover: var(--zen-red-10); --solid-orange: var(--zen-orange-9); --solid-orange-hover: var(--zen-orange-10); --solid-yellow: var(--zen-yellow-9); --solid-yellow-hover: var(--zen-yellow-10); --solid-green: var(--zen-green-9); --solid-green-hover: var(--zen-green-10); --solid-teal: var(--zen-teal-9); --solid-teal-hover: var(--zen-teal-10); --solid-cyan: var(--zen-cyan-9); --solid-cyan-hover: var(--zen-cyan-10); --solid-sky: var(--zen-sky-9); --solid-sky-hover: var(--zen-sky-10); --solid-blue: var(--zen-blue-9); --solid-blue-hover: var(--zen-blue-10); --solid-indigo: var(--zen-indigo-9); --solid-indigo-hover: var(--zen-indigo-10); --solid-purple: var(--zen-purple-9); --solid-purple-hover: var(--zen-purple-10); --solid-pink: var(--zen-pink-8); --solid-pink-hover: var(--zen-pink-9); --solid-brown: var(--zen-brown-9); --solid-brown-hover: var(--zen-brown-10); /* ─── Solid Active aliases (Figma row-10/11) ───────────── */ --solid-neutral-active: var(--zen-gray-10); --solid-accent-active: var(--zen-purple-10); --solid-negative-active: var(--zen-red-11); --solid-red-active: var(--zen-red-11); --solid-orange-active: var(--zen-orange-11); --solid-yellow-active: var(--zen-yellow-11); --solid-green-active: var(--zen-green-11); --solid-teal-active: var(--zen-teal-11); --solid-cyan-active: var(--zen-cyan-11); --solid-sky-active: var(--zen-sky-11); --solid-blue-active: var(--zen-blue-11); --solid-indigo-active: var(--zen-indigo-11); --solid-purple-active: var(--zen-purple-11); --solid-pink-active: var(--zen-pink-10); --solid-brown-active: var(--zen-brown-11); /* ─── Solid Disabled aliases (Figma row-4/5/6) ─────────── */ --solid-neutral-disabled: var(--zen-gray-6); --solid-accent-disabled: var(--zen-purple-4); --solid-negative-disabled: var(--zen-red-5); --solid-red-disabled: var(--zen-red-5); --solid-orange-disabled: var(--zen-orange-5); --solid-yellow-disabled: var(--zen-yellow-5); --solid-green-disabled: var(--zen-green-5); --solid-teal-disabled: var(--zen-teal-5); --solid-cyan-disabled: var(--zen-cyan-5); --solid-sky-disabled: var(--zen-sky-5); --solid-blue-disabled: var(--zen-blue-5); --solid-indigo-disabled: var(--zen-indigo-5); --solid-purple-disabled: var(--zen-purple-5); --solid-pink-disabled: var(--zen-pink-5); --solid-brown-disabled: var(--zen-brown-6); /* ─── Text semantic aliases (Figma "Text" collection) ──── */ --text-primary: var(--zen-gray-12); /* Text Primary / Default */ --text-primary-accent: var(--zen-purple-9); /* Text Primary / Accent */ --text-primary-positive: var(--zen-green-9); /* Text Primary / Positive */ --text-primary-warning: var(--zen-orange-9); /* Text Primary / Warning */ --text-primary-negative: var(--zen-red-10); /* Text Primary / Negative */ --text-secondary: var(--zen-gray-10); /* Text Secondary / Default */ --text-secondary-accent: var(--zen-purple-8); /* Text Secondary / Accent */ --text-tertiary: var(--zen-gray-9); /* Text Tertiary / Default */ --text-quaternary: var(--zen-gray-8); /* Text Quaternary / Default */ --text-muted: var(--zen-gray-8); /* Text Muted / Default — alias of quaternary */ --text-disabled: var(--zen-gray-7); /* Text Disabled / Default */ --text-placeholder: var(--zen-gray-8); /* Text Placeholder / Default */ --text-on-solid: var(--zen-gray-1); /* Text On Solid / Default */ /* ─── Text Primary per-color aliases (Figma "Text Primary" hue variants) */ --text-primary-red: var(--zen-red-8); --text-primary-orange: var(--zen-orange-8); --text-primary-yellow: var(--zen-yellow-8); --text-primary-green: var(--zen-green-8); --text-primary-teal: var(--zen-teal-8); --text-primary-cyan: var(--zen-cyan-8); --text-primary-sky: var(--zen-sky-8); --text-primary-blue: var(--zen-blue-11); --text-primary-indigo: var(--zen-indigo-11); --text-primary-purple: var(--zen-purple-11); --text-primary-pink: var(--zen-pink-10); --text-primary-brown: var(--zen-brown-11); /* ─── Text Secondary per-semantic aliases ──────────────── */ --text-secondary-positive: var(--zen-green-10); --text-secondary-warning: var(--zen-yellow-11); --text-secondary-negative: var(--zen-red-9); /* ─── Text Disabled per-color aliases ──────────────────── */ --text-disabled-accent: var(--zen-purple-6); --text-disabled-positive: var(--zen-green-7); --text-disabled-warning: var(--zen-orange-7); --text-disabled-negative: var(--zen-red-6); --text-disabled-red: var(--zen-red-6); --text-disabled-orange: var(--zen-orange-7); --text-disabled-yellow: var(--zen-yellow-7); --text-disabled-green: var(--zen-green-8); --text-disabled-teal: var(--zen-teal-8); --text-disabled-cyan: var(--zen-cyan-7); --text-disabled-sky: var(--zen-sky-8); --text-disabled-blue: var(--zen-blue-7); --text-disabled-indigo: var(--zen-indigo-6); --text-disabled-purple: var(--zen-purple-5); --text-disabled-pink: var(--zen-pink-6); --text-disabled-brown: var(--zen-brown-7); /* ─── Icon semantic aliases (Figma "Icon" collection) ──── */ --icon-primary: var(--zen-gray-10); /* Icon Primary / Default — matches app (zen-gray-10) */ --icon-secondary: var(--zen-gray-9); /* Icon Secondary / Default */ /* ─── Icon Primary per-semantic & per-color aliases ────── */ --icon-primary-accent: var(--zen-purple-9); --icon-primary-positive: var(--zen-green-9); --icon-primary-warning: var(--zen-orange-9); --icon-primary-negative: var(--zen-red-10); --icon-primary-red: var(--zen-red-8); --icon-primary-orange: var(--zen-orange-8); --icon-primary-yellow: var(--zen-yellow-8); --icon-primary-green: var(--zen-green-8); --icon-primary-teal: var(--zen-teal-8); --icon-primary-cyan: var(--zen-cyan-8); --icon-primary-sky: var(--zen-sky-8); --icon-primary-blue: var(--zen-blue-11); --icon-primary-indigo: var(--zen-indigo-11); --icon-primary-purple: var(--zen-purple-11); --icon-primary-pink: var(--zen-pink-10); --icon-primary-brown: var(--zen-brown-11); /* ─── Icon Secondary per-semantic aliases ──────────────── */ --icon-secondary-accent: var(--zen-purple-8); --icon-secondary-positive: var(--zen-green-10); --icon-secondary-warning: var(--zen-yellow-11); --icon-secondary-negative: var(--zen-red-9); /* ─── Icon Disabled aliases (Figma "Icon Disabled" collection) ── */ --icon-disabled: var(--zen-gray-7); /* Icon Disabled / Default */ --icon-disabled-accent: var(--zen-purple-6); --icon-disabled-positive: var(--zen-green-7); --icon-disabled-warning: var(--zen-orange-7); --icon-disabled-negative: var(--zen-red-6); --icon-disabled-red: var(--zen-red-6); --icon-disabled-orange: var(--zen-orange-7); --icon-disabled-yellow: var(--zen-yellow-7); --icon-disabled-green: var(--zen-green-8); --icon-disabled-teal: var(--zen-teal-8); --icon-disabled-cyan: var(--zen-cyan-7); --icon-disabled-sky: var(--zen-sky-8); --icon-disabled-blue: var(--zen-blue-7); --icon-disabled-indigo: var(--zen-indigo-6); --icon-disabled-purple: var(--zen-purple-5); --icon-disabled-pink: var(--zen-pink-6); --icon-disabled-brown: var(--zen-brown-7); /* ─── Icon sizes ───────────────────────────────────────── */ /* App-fidelity: app sizes icons with size-icon-* utilities, which map (in @theme) to these raw tokens. ZP had the @theme mapping but was missing the raw values, so size-icon-* resolved to an empty var and icons fell back to their intrinsic boxicon size (looked oversized). */ --icon-sm: 14px; --icon-base: 16px; --icon-lg: 20px; /* ─── Icon utility aliases ─────────────────────────────── */ --icon-placeholder: var(--zen-gray-8); /* Icon Placeholder / Default */ --icon-on-solid: var(--zen-gray-1); /* Icon on Solid / Default */ --icon-on-solid-disabled: var(--zen-gray-7); /* Icon on Solid Disabled / Default */ /* The default background color for filled input fields. → white */ --input: var(--white); /* The default background color for input fields. → white */ --input-background: var(--white); /* The default color for focus rings. → Purple/5 */ --ring: var(--zen-purple-5); /* Shadow for small elevations, such as cards or modals. */ --elevation-sm: 0px 1px 3px 0px rgba(0,0,0,0.08), 0px 2px 4px 0px rgba(0,0,0,0.1); /* Shadow/3 – deeper elevation for menus, popovers, floating panels. */ --elevation-md: 0px 4px 12px 0px rgba(0,0,0,0.08), 0px 8px 24px 0px rgba(0,0,0,0.12); /* Chart semantic tokens → primitives */ --chart-1: var(--zen-purple-7); --chart-2: var(--zen-purple-5); /* light purple chart fill */ --chart-3: var(--zen-blue-6); /* vivid blue chart fill */ --chart-4: var(--zen-red-6); --chart-5: var(--zen-gray-8); /* ─── Radius primitives (Figma "Primitive Radius" scale) ── */ --radius-0: 0px; /* 0 — sharp */ --radius-50: 2px; /* 50 — barely visible */ --radius-100: 4px; /* 100 — standard */ --radius-150: 6px; /* 150 — slightly softer */ --radius-200: 8px; /* 200 — visible rounding */ --radius-300: 12px; /* 300 — prominent rounding */ --radius-400: 16px; /* 400 — very rounded */ --radius-500: 20px; /* 500 — display rounding for marketing surfaces */ --radius-full: 999px; /* Full — fully circular */ /* ─── Radius semantic aliases (Figma "Radius Aliases") ─── */ --radius-none: var(--radius-0); /* Sharp corners. Dividers, flat edges */ --radius-subtle: var(--radius-50); /* Barely visible. Inline tags, code blocks */ --radius-default: var(--radius-100); /* Standard. Inputs, most interactive elements */ --radius-smooth: var(--radius-150); /* Slightly softer. Dropdowns, tooltips, popovers */ --radius-container: var(--radius-200); /* Visible. Cards, modals, dialogs */ --radius-panel: var(--radius-300); /* Prominent. Large panels, sections, overlays */ --radius-feature: var(--radius-400); /* Very rounded. Hero cards, feature sections */ --radius-display: var(--radius-500); /* Display rounding. Marketing stack cards, large hero surfaces */ --radius-round: var(--radius-full); /* Fully circular. Avatars, pills, FABs */ /* ─── Shorthand tokens (consumed by components) ────────── */ --radius: var(--radius-smooth); /* 6px — buttons, menu items */ --radius-lg: var(--radius-panel); /* 12px — menu containers, popup panels, cards */ --radius-2xl: var(--radius-feature); /* 16px — NeonBorder default, hero wrappers */ /* ─── Z-index — DS layering scale ──────────────────────── */ /* App-fidelity: app's new-design-welcome-modal + playground-tour set z-index: var(--z-overlay-max). ZP had dropped the token, so those fullscreen overlays fell back to an invalid z-index. Mirrors app. */ --z-overlay-max: 9999; /* Confetti, fullscreen overlays above everything */ /* ─── Layout dimensions ────────────────────────────────── */ --sidebar-width: 205px; --sidepanel-width: 380px; /* ─── Page-level layout tokens ─────────────────────────── */ --page-max-width-sm: 380px; /* auth forms, narrow dialogs */ --page-max-width-md: 960px; /* detail areas (domain, job, group) */ --page-max-width-lg: 1152px; /* settings, billing */ --page-max-width-xl: 1280px; /* analytics, wide dashboards */ --page-top-offset: 96px; /* topnav clearance for tabbed pages */ --page-padding-x: 24px; /* horizontal page gutters (≡ px-6) */ --page-section-label-width: 220px; /* left column in settings rows */ /* ─── Top navigation height ────────────────────────────── */ --topnav-height: 56px; /* ─── Playground responsive layout tokens ──────────────── */ --playground-top-margin: 84px; --playground-top-margin-active: 8vh; --playground-title-gap: 24px; --playground-preview-height: 70vh; --playground-preview-height-active: 100vh; --playground-preview-height-placeholder: 60vh; --playground-prompt-max-width: 720px; --playground-pipeline-max-width: 960px; /* @deprecated — unused after pipeline moved to canvas */ --playground-preview-max-width: 1248px; --playground-preview-gap: 24px; /* App-fidelity: caps the dashboard URL bar width (max-w-dashboard-url). Without it the bar stretches full-width instead of app's 670px. */ --dashboard-url-max-width: 670px; } /* ── Wider tier for large desktops (27" iMac and up). The default * 1248px preview width feels cramped on a 2560-wide canvas, so we * let the surfaces breathe in proportion. ── */ @media (min-width: 1920px) { :root { --playground-prompt-max-width: 880px; --playground-preview-max-width: 1560px; /* Pull the active prompt up so it lines up with the top of the * sidebar's Instant / Batch toggle on tall canvases — at 8vh * the input was floating ~100px down on 1200+ tall displays, * which broke the eyeline between the toggle and the input. */ --playground-top-margin-active: 40px; /* Typescale bump — wide canvases need an extra pixel across the * board so body copy doesn't feel anemic on 27" displays. Every * --text-* / --heading-* alias inherits via the var() chain so a * single override here cascades through ZenStyles + Tailwind * text-{size} utilities. */ --heading-huge: 33px; --heading-xlarge: 25px; --heading-large: 19px; --heading-medium: 16px; --label-medium: 16px; --label-small: 14px; --text-large: 16px; --text-base: 14px; --text-small: 13px; --text-tiny: 12px; } } @media (min-width: 2400px) { :root { --playground-prompt-max-width: 960px; --playground-preview-max-width: 1760px; } } /* Continuation of the design-token :root block — split here so the * wide-screen media queries above could override the playground * widths. CSS treats sibling :root rules additively. */ :root { /* Sidebar tokens → primitives */ --sidebar: var(--background); --sidebar-foreground: var(--zen-gray-12); --sidebar-primary: var(--zen-purple-9); --sidebar-primary-foreground: var(--white); --sidebar-accent: var(--zen-purple-7); --sidebar-accent-foreground: var(--white); --sidebar-border: var(--zen-gray-5); --sidebar-ring: var(--zen-purple-5); /* Sidebar item interaction states → Figma Sunken Primary */ --sidebar-item-hover: var(--zen-gray-3); /* Sunken Primary / Hover */ --sidebar-item-active: var(--zen-gray-4); /* Sunken Primary / Active */ --sidebar-item-text: var(--text-secondary); /* Text Secondary / Default */ --sidebar-item-text-active: var(--text-primary); /* Text Primary / Default */ /* App-fidelity: app's ui/sidebar sizes the rail via --sidebar-width. Without it the sidebar collapses to 0 and the layout renders full-bleed (no rail). Mirrors app's theme.css. (ZP's own legacy Sidebar doesn't read this var.) */ --sidebar-width: 205px; --mobile-sidebar-width: 280px; /* Tag colors → primitives (bg = row-4, text = dark rows) */ --tag-radius: var(--radius-round); --tag-api-bg: var(--zen-green-4); --tag-api-text: var(--zen-green-11); --tag-browser-bg: var(--zen-yellow-4); --tag-browser-text: var(--zen-yellow-11); --tag-proxy-bg: var(--zen-blue-4); --tag-proxy-text: var(--zen-blue-8); --tag-purple-bg: var(--zen-purple-4); --tag-purple-text: var(--zen-purple-11); --tag-peach-bg: var(--zen-brown-4); --tag-peach-text: var(--zen-brown-11); --tag-orange-bg: var(--zen-orange-4); --tag-orange-text: var(--zen-orange-11); --tag-red-bg: var(--zen-red-4); --tag-red-text: var(--zen-red-11); --tag-pink-bg: var(--zen-pink-4); --tag-pink-text: var(--zen-pink-10); --tag-indigo-bg: var(--zen-indigo-4); --tag-indigo-text: var(--zen-indigo-11); --tag-cyan-bg: var(--zen-cyan-4); --tag-cyan-text: var(--zen-cyan-8); --tag-teal-bg: var(--zen-blue-4); --tag-teal-text: var(--zen-blue-8); --tag-blue-bg: var(--zen-blue-4); --tag-blue-text: var(--zen-blue-8); --tag-gray-bg: var(--zen-gray-4); --tag-gray-text: var(--zen-gray-10); --tag-ask-bg: var(--zen-purple-4); --tag-ask-text: var(--zen-purple-11); /* Tag selected-border → one row darker than bg (row-4 → row-5) */ --tag-api-border: var(--zen-green-5); --tag-browser-border: var(--zen-yellow-5); --tag-proxy-border: var(--zen-blue-5); --tag-purple-border: var(--zen-purple-5); --tag-peach-border: var(--zen-orange-5); --tag-red-border: var(--zen-red-5); --tag-indigo-border: var(--zen-indigo-5); --tag-cyan-border: var(--zen-cyan-5); --tag-teal-border: var(--zen-blue-5); --tag-blue-border: var(--zen-blue-5); --tag-gray-border: var(--zen-gray-5); /* ─── ZenChip interactive tokens (3-state: default / hover / active) Matches Figma ZenChips component exactly. Default = row-2 (lightest) · Hover = row-3 · Active = row-4 Border = row-5 · Text = dark shade ────────────────────────────────────────────────────────── */ --chip-purple-bg: var(--zen-purple-2); --chip-purple-bg-hover: var(--zen-purple-3); --chip-purple-bg-active: var(--zen-purple-4); --chip-purple-border: var(--zen-purple-5); --chip-purple-text: var(--zen-purple-11); --chip-purple-icon: var(--zen-purple-11); --chip-green-bg: var(--zen-green-2); --chip-green-bg-hover: var(--zen-green-3); --chip-green-bg-active: var(--zen-green-4); --chip-green-border: var(--zen-green-5); --chip-green-text: var(--zen-green-11); --chip-green-icon: var(--zen-green-8); --chip-blue-bg: var(--zen-blue-2); --chip-blue-bg-hover: var(--zen-blue-3-hover); --chip-blue-bg-active: var(--zen-blue-4-active); --chip-blue-border: var(--zen-blue-5); --chip-blue-text: var(--zen-blue-11); --chip-blue-icon: var(--zen-blue-11); --chip-orange-bg: var(--zen-orange-2); --chip-orange-bg-hover: var(--zen-orange-3); --chip-orange-bg-active: var(--zen-orange-4); --chip-orange-border: var(--zen-orange-5); --chip-orange-text: var(--zen-orange-11); --chip-orange-icon: var(--zen-orange-8); /* Gray — for neutral/config blocks (Headers, Proxy) */ --chip-gray-bg: var(--zen-gray-3); --chip-gray-bg-hover: var(--zen-gray-4); --chip-gray-bg-active: var(--zen-gray-5); --chip-gray-border: var(--zen-gray-5); --chip-gray-text: var(--zen-gray-10); --chip-gray-icon: var(--zen-gray-8); /* Red — for debug/error blocks */ --chip-red-bg: var(--zen-red-3); --chip-red-bg-hover: var(--zen-red-4); --chip-red-bg-active: var(--zen-red-5); --chip-red-border: var(--zen-red-5); --chip-red-text: var(--zen-red-11); --chip-red-icon: var(--zen-red-9); /* Indigo — for extract/data blocks */ --chip-indigo-bg: var(--zen-indigo-3); --chip-indigo-bg-hover: var(--zen-indigo-4); --chip-indigo-bg-active: var(--zen-indigo-5); --chip-indigo-border: var(--zen-indigo-5); --chip-indigo-text: var(--zen-indigo-11); --chip-indigo-icon: var(--zen-indigo-8); /* Yellow — for JS Render/browser blocks */ --chip-yellow-bg: var(--zen-yellow-3); --chip-yellow-bg-hover: var(--zen-yellow-4); --chip-yellow-bg-active: var(--zen-yellow-5); --chip-yellow-border: var(--zen-yellow-5); --chip-yellow-text: var(--zen-yellow-11); --chip-yellow-icon: var(--zen-yellow-8); /* Cyan — for crawl blocks */ --chip-cyan-bg: var(--zen-cyan-3); --chip-cyan-bg-hover: var(--zen-cyan-4); --chip-cyan-bg-active: var(--zen-cyan-5); --chip-cyan-border: var(--zen-cyan-5); --chip-cyan-text: var(--zen-cyan-8); --chip-cyan-icon: var(--zen-cyan-8); /* Yellow scale — domain status indicators → primitives */ --yellow-3: var(--zen-yellow-5); --yellow-5: var(--zen-orange-6); /* warm amber status indicator */ /* ─── Base surface aliases (Figma "Base" collection) ───── */ --base: var(--zen-gray-1); /* Base / Gray */ --base-hover: var(--zen-gray-2); /* Base Hover / Default */ --base-active: var(--zen-gray-3); /* Base Active / Default */ /* ─── Sunken surface aliases (Figma "Sunken" collection) Default = row-1 · Hover = row-2 · Active = row-3 Primary/Secondary use gray shifted +1 step. ──────────────────────────────────────────────────────── */ --sunken-base: var(--zen-gray-2); /* Sunken / Primary */ --sunken-hover: var(--zen-gray-3); /* Sunken Hover / Primary */ --sunken-active: var(--zen-gray-4); /* Sunken Active / Primary */ --sunken-secondary: var(--zen-gray-3); --sunken-secondary-hover: var(--zen-gray-4); --sunken-secondary-active: var(--zen-gray-5); --sunken-accent: var(--zen-purple-1); --sunken-accent-hover: var(--zen-purple-2); --sunken-accent-active: var(--zen-purple-3); --sunken-negative: var(--zen-red-1); --sunken-negative-hover: var(--zen-red-2); --sunken-negative-active: var(--zen-red-3); --sunken-positive: var(--zen-green-1); --sunken-positive-hover: var(--zen-green-2); --sunken-positive-active: var(--zen-green-3); --sunken-warning: var(--zen-yellow-1); --sunken-warning-hover: var(--zen-yellow-2); --sunken-warning-active: var(--zen-yellow-3); --sunken-red: var(--zen-red-1); --sunken-red-hover: var(--zen-red-2); --sunken-red-active: var(--zen-red-3); --sunken-orange: var(--zen-orange-1); --sunken-orange-hover: var(--zen-orange-2); --sunken-orange-active: var(--zen-orange-3); --sunken-yellow: var(--zen-yellow-1); --sunken-yellow-hover: var(--zen-yellow-2); --sunken-yellow-active: var(--zen-yellow-3); --sunken-green: var(--zen-green-1); --sunken-green-hover: var(--zen-green-2); --sunken-green-active: var(--zen-green-3); --sunken-teal: var(--zen-teal-1); --sunken-teal-hover: var(--zen-teal-2); --sunken-teal-active: var(--zen-teal-3); --sunken-cyan: var(--zen-cyan-1); --sunken-cyan-hover: var(--zen-cyan-2); --sunken-cyan-active: var(--zen-cyan-3); --sunken-sky: var(--zen-sky-1); --sunken-sky-hover: var(--zen-sky-2); --sunken-sky-active: var(--zen-sky-3); --sunken-blue: var(--zen-blue-1); --sunken-blue-hover: var(--zen-blue-2); --sunken-blue-active: var(--zen-blue-3); --sunken-indigo: var(--zen-indigo-1); --sunken-indigo-hover: var(--zen-indigo-2); --sunken-indigo-active: var(--zen-indigo-3); --sunken-purple: var(--zen-purple-1); --sunken-purple-hover: var(--zen-purple-2); --sunken-purple-active: var(--zen-purple-3); --sunken-pink: var(--zen-pink-1); --sunken-pink-hover: var(--zen-pink-2); --sunken-pink-active: var(--zen-pink-3); --sunken-brown: var(--zen-brown-1); --sunken-brown-hover: var(--zen-brown-2); --sunken-brown-active: var(--zen-brown-3); /* ─── Raised surface aliases (Figma "Raised" collection) Default = row-2/3 · Hover = row-3 · Active = row-5/6 ──────────────────────────────────────────────────────── */ --raised-neutral: var(--zen-gray-3); --raised-neutral-hover: var(--zen-gray-4); --raised-neutral-active: var(--zen-gray-5); --raised-red: var(--zen-red-2); --raised-red-hover: var(--zen-red-3); --raised-red-active: var(--zen-red-6); --raised-orange: var(--zen-orange-2); --raised-orange-hover: var(--zen-orange-3); --raised-orange-active: var(--zen-orange-6); --raised-yellow: var(--zen-yellow-2); --raised-yellow-hover: var(--zen-yellow-3); --raised-yellow-active: var(--zen-yellow-6); --raised-green: var(--zen-green-2); --raised-green-hover: var(--zen-green-3); --raised-green-active: var(--zen-green-6); --raised-teal: var(--zen-teal-2); --raised-teal-hover: var(--zen-teal-3); --raised-teal-active: var(--zen-teal-6); --raised-cyan: var(--zen-cyan-2); --raised-cyan-hover: var(--zen-cyan-3); --raised-cyan-active: var(--zen-cyan-6); --raised-sky: var(--zen-sky-2); --raised-sky-hover: var(--zen-sky-3); --raised-sky-active: var(--zen-sky-6); --raised-blue: var(--zen-blue-2); --raised-blue-hover: var(--zen-blue-3); --raised-blue-active: var(--zen-blue-6); --raised-indigo: var(--zen-indigo-2); --raised-indigo-hover: var(--zen-indigo-3); --raised-indigo-active: var(--zen-indigo-6); --raised-purple: var(--zen-purple-2); --raised-purple-hover: var(--zen-purple-3); --raised-purple-active: var(--zen-purple-6); --raised-pink: var(--zen-pink-2); --raised-pink-hover: var(--zen-pink-3); --raised-pink-active: var(--zen-pink-6); --raised-brown: var(--zen-brown-2); --raised-brown-hover: var(--zen-brown-3); --raised-brown-active: var(--zen-brown-6); /* ─── Attention surface aliases (Figma "Attention" collection) Default = row-4 · Hover = row-5 · Active = row-6 ──────────────────────────────────────────────────────── */ --attention-neutral: var(--zen-gray-4); --attention-neutral-hover: var(--zen-gray-5); --attention-neutral-active: var(--zen-gray-6); --attention-accent: var(--zen-purple-3); --attention-accent-hover: var(--zen-purple-4); --attention-accent-active: var(--zen-purple-5); --attention-red: var(--zen-red-4); --attention-red-hover: var(--zen-red-5); --attention-red-active: var(--zen-red-6); --attention-orange: var(--zen-orange-4); --attention-orange-hover: var(--zen-orange-5); --attention-orange-active: var(--zen-orange-6); --attention-yellow: var(--zen-yellow-4); --attention-yellow-hover: var(--zen-yellow-5); --attention-yellow-active: var(--zen-yellow-6); --attention-green: var(--zen-green-4); --attention-green-hover: var(--zen-green-5); --attention-green-active: var(--zen-green-6); --attention-teal: var(--zen-teal-4); --attention-teal-hover: var(--zen-teal-5); --attention-teal-active: var(--zen-teal-6); --attention-cyan: var(--zen-cyan-4); --attention-cyan-hover: var(--zen-cyan-5); --attention-cyan-active: var(--zen-cyan-6); --attention-sky: var(--zen-sky-4); --attention-sky-hover: var(--zen-sky-5); --attention-sky-active: var(--zen-sky-6); --attention-blue: var(--zen-blue-4); --attention-blue-hover: var(--zen-blue-5); --attention-blue-active: var(--zen-blue-6); --attention-indigo: var(--zen-indigo-4); --attention-indigo-hover: var(--zen-indigo-5); --attention-indigo-active: var(--zen-indigo-6); --attention-purple: var(--zen-purple-4); --attention-purple-hover: var(--zen-purple-5); --attention-purple-active: var(--zen-purple-6); --attention-pink: var(--zen-pink-4); --attention-pink-hover: var(--zen-pink-5); --attention-pink-active: var(--zen-pink-6); --attention-brown: var(--zen-brown-4); --attention-brown-hover: var(--zen-brown-5); --attention-brown-active: var(--zen-brown-6); /* ─── Table tokens ─────────────────────────────────────── */ --table-header-bg: var(--sunken-base); /* thead row fill */ --table-separator-bg: var(--sunken-base); /* date-group separator rows */ --table-border: var(--divider-secondary); /* row separator — subtle gray-3 */ /* ─── ZenDS Banner tokens ──────────────────────────────── */ /* Success (green) */ --banner-success-bg: var(--zen-green-1); --banner-success-border: var(--zen-green-5); --banner-success-circle: var(--zen-green-3); --banner-success-icon: var(--zen-green-9); /* Warning (yellow) */ --banner-warning-bg: var(--zen-yellow-1); --banner-warning-border: var(--zen-yellow-5); --banner-warning-circle: var(--zen-yellow-3); --banner-warning-icon: var(--zen-orange-9); /* Error (red) */ --banner-error-bg: var(--zen-red-1); --banner-error-border: var(--zen-red-5); --banner-error-circle: var(--zen-red-3); --banner-error-icon: var(--zen-red-10); --banner-info-bg: var(--zen-blue-1); --banner-info-border: var(--zen-blue-5); --banner-info-circle: var(--zen-blue-3); --banner-info-icon: var(--zen-blue-9); /* Default (gray) — app-fidelity: zen/banner.tsx default variant reads these. ZP had dropped them, so the gray banner rendered with no bg, border or circle. Mirrors app. */ --banner-default-bg: var(--zen-gray-1); --banner-default-border: var(--zen-gray-3); --banner-default-circle: var(--zen-gray-3); --banner-default-icon: var(--zen-gray-9); /* ─── Code editor tokens ──────────────────────────────── */ --code-editor-bg: var(--zen-gray-12); --code-editor-text: var(--zen-gray-3); /* ─── Canvas vignette base (dark purple for mesh overlay) ─ */ --canvas-vignette: 14, 8, 22; /* ─── Code syntax highlighting ─────────────────────────── */ --code-keyword: #C586C0; --code-string: #CE9178; --code-comment: #6A9955; --code-number: #B5CEA8; --code-builtin: #569CD6; --code-func: #DCDCAA; --code-variable: #9CDCFE; /* ─── Code skeleton mock (dim/mid/bright alpha tints) ──── */ --code-dim: rgba(255,255,255,0.35); --code-mid: rgba(255,255,255,0.55); --code-bright: rgba(255,255,255,0.85); /* ─── Code-block tab interaction tokens ────────────────── */ --code-tab-inactive: rgba(255,255,255,0.45); --code-tab-hover: rgba(255,255,255,0.7); --code-tab-active-bg: rgba(255,255,255,0.12); /* ─── Overlay / Backdrop ───────────────────────────────── */ --overlay: rgba(0,0,0,0.25); --overlay-heavy: rgba(0,0,0,0.4); /* ─── Elevation — deep (multi-layered card float) ──────── */ --elevation-lg: 0px 36px 45px 0px rgba(0,0,0,0.07), 0px 13.552px 13.566px 0px rgba(0,0,0,0.06), 0px 4.522px 5.635px 0px rgba(0,0,0,0.07), 0px 0.064px 2.038px 0px rgba(0,0,0,0.06); /* ─── Inset shadow (pressed / active segmented control) ── */ --inset-shadow: inset 0 1px 3px rgba(0,0,0,0.08); /* ─── Subtle separators (lighter than --border) ────────── */ --separator: rgba(0,0,0,0.05); --separator-subtle: rgba(0,0,0,0.03); /* ─── Glass card tokens (Onboard preview cards) ────────── */ --glass-dark-bg: rgba(22, 18, 14, 0.88); --glass-dark-border: rgba(255,255,255,0.06); --glass-dark-shadow: 0 12px 48px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04); --glass-light-bg: rgba(255, 255, 255, 0.82); --glass-light-border: rgba(255,255,255,0.7); --glass-light-shadow: 0 12px 48px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.9); /* ─── Accent glow (purple button shadow) ───────────────── */ --accent-glow: 0 8px 28px rgba(124,79,232,0.25); /* ─── Onboard choice card tokens ───────────────────────── */ --onboard-dark-solid: rgba(22, 18, 14, 1); --onboard-dark-hover: rgba(22, 18, 14, 0.72); --onboard-dark-soft: rgba(22, 18, 14, 0.55); --onboard-light-solid: rgba(255, 255, 255, 1); --onboard-light-hover: rgba(255, 255, 255, 0.62); --onboard-light-soft: rgba(255, 255, 255, 0.40); --onboard-card-border: rgba(255,255,255,0.18); --onboard-card-shadow: 0 24px 80px rgba(0,0,0,0.18), 0 2px 12px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.06); --onboard-card-shine: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 50%); --onboard-card-shine-reverse: linear-gradient(225deg, rgba(255,255,255,0.15) 0%, transparent 50%); --onboard-card-divider: rgba(255,255,255,0.06); --onboard-card-divider-light: rgba(255,255,255,0.1); } /* ─── Text selection — branded purple highlight ─────────── */ ::selection { background: var(--zen-purple-4); color: var(--zen-purple-12); } /* ─── Responsive layout — 13" laptops (≤ 1440px) ───────── */ @media (max-width: 1440px) { :root { --sidebar-width: 180px; --sidepanel-width: 340px; --playground-top-margin: 80px; --playground-title-gap: 16px; --playground-preview-gap: 16px; } } /* Playground wrapper overlays the TopNav so content can start at --playground-top-margin from the viewport top instead of below the navbar. Negative margin pulls it up; z-index ensures it paints on top; the wrapper is transparent so the navbar is visually visible underneath until content reaches it. */ .playground-nav-overlay { margin-top: calc(-1 * var(--topnav-height)) !important; z-index: 20 !important; } /* ─── Responsive layout — compact 13" / 720p (≤ 1366px) ── */ @media (max-width: 1366px) { :root { --sidebar-width: 166px; --sidepanel-width: 320px; --text-2xl: 28px; --playground-top-margin: 76px; --playground-title-gap: 12px; --playground-prompt-max-width: 648px; --playground-pipeline-max-width: 820px; /* @deprecated — unused after pipeline moved to canvas */ --playground-preview-gap: 12px; } } /* ─── 13" combo — both narrow width AND short height ────── */ @media (max-width: 1440px) and (max-height: 900px) { :root { --playground-top-margin: 72px; --playground-title-gap: 10px; --playground-preview-height: calc(100vh - 300px); --playground-preview-height-active: calc(100vh - 220px); --playground-preview-height-placeholder: calc(100vh - 340px); --playground-preview-gap: 10px; } } /* ─── Responsive height — short viewports (≤ 800px tall) ── */ @media (max-height: 800px) { :root { --playground-top-margin: 64px; --playground-title-gap: 10px; --playground-preview-height: calc(100vh - 312px); --playground-preview-height-active: calc(100vh - 232px); --playground-preview-height-placeholder: calc(100vh - 352px); --playground-preview-gap: 10px; } } /* ─── Responsive height — very short viewports (≤ 700px) ── */ @media (max-height: 700px) { :root { --playground-top-margin: 56px; --playground-title-gap: 8px; --playground-preview-height: calc(100vh - 264px); --playground-preview-height-active: calc(100vh - 204px); --playground-preview-height-placeholder: calc(100vh - 304px); --playground-preview-gap: 8px; } } /* ─── Responsive width — narrow screens (≤ 1024px wide) ── */ @media (max-width: 1024px) { :root { --playground-prompt-max-width: 576px; --playground-preview-max-width: 95vw; --playground-top-margin: 72px; --sidepanel-width: 300px; } } /* ─── Responsive width — tablet (≤ 768px wide) ────────── */ @media (max-width: 768px) { :root { --sidebar-width: 0px; --sidepanel-width: 100vw; --playground-prompt-max-width: calc(100vw - 48px); --playground-preview-max-width: calc(100vw - 32px); --playground-top-margin: 32px; --playground-title-gap: 10px; --playground-preview-gap: 10px; --text-2xl: 24px; --text-xl2: 20px; --text-xl: 16px; --page-padding-x: 16px; --page-max-width-md: 100%; --page-max-width-lg: 100%; --page-max-width-xl: 100%; --section-comfortable: var(--space-500); --section-loose: var(--space-600); --section-page-block: var(--space-800); --section-page-area: var(--space-1000); --section-hero: var(--space-1200); --topnav-height: 48px; --mobile-sidebar-width: 280px; } } /* ─── Responsive width — small phone (≤ 480px wide) ────── */ @media (max-width: 480px) { :root { --playground-prompt-max-width: calc(100vw - 32px); --playground-preview-max-width: calc(100vw - 24px); --playground-top-margin: 24px; --text-display: 40px; --text-3xl: 32px; --text-2xl: 22px; --page-padding-x: 12px; --mobile-sidebar-width: calc(100vw - 56px); } } .dark { /* ─── Dark mode semantic overrides ─────────────────────────── Primitives are INVERTED below (gray-1→dark, gray-12→light), so tokens referencing primitives in :root already resolve to correct dark values WHEN .dark is on :root (). IMPORTANT: CSS custom properties resolve var() at computed-value time on the DECLARING element, and the resolved value inherits. When .dark is on a CHILD element (e.g. Onboard split view), tokens like --background inherit the already-resolved :root value, NOT the child's overridden primitive. Therefore, all semantic tokens that reference var(--zen-*) must be explicitly re-declared here so they compute correctly in both contexts. ──────────────────────────────────────────────────────────── */ /* Code mode body font → IBM Plex Mono (separate variable to avoid overriding --font-manrope, which is used for body text everywhere) */ --font-code-body: 'IBM Plex Mono', monospace; /* ─── Core surface / text / border tokens ────────────────── Re-declared so .dark works as a child class (Onboard split). Same var(--zen-*) expressions, resolved against dark primitives. ──────────────────────────────────────────────────────────── */ --background: var(--zen-gray-1); --surface: var(--background); /* marketing-site alias, see :root */ --border-default: var(--zen-gray-5); --border-subtle: var(--zen-gray-3); --border-disabled: var(--zen-gray-2); --border-accent: var(--zen-purple-6); --border-positive: var(--zen-green-6); --border-warning: var(--zen-yellow-6); --border-negative: var(--zen-red-6); --border: var(--border-subtle); --text-primary: var(--zen-gray-12); --text-primary-accent: var(--zen-purple-9); --text-primary-positive: var(--zen-green-9); --text-primary-warning: var(--zen-orange-9); --text-primary-negative: var(--zen-red-10); --text-secondary: var(--zen-gray-10); --text-secondary-accent: var(--zen-purple-8); --text-tertiary: var(--zen-gray-9); --text-quaternary: var(--zen-gray-8); --text-muted: var(--zen-gray-8); --text-disabled: var(--zen-gray-7); --text-placeholder: var(--zen-gray-8); --text-on-solid: var(--zen-gray-1); --icon-primary: var(--zen-gray-10); --icon-secondary: var(--zen-gray-9); --icon-disabled: var(--zen-gray-7); --icon-placeholder: var(--zen-gray-8); --icon-on-solid: var(--zen-gray-1); --icon-on-solid-disabled: var(--zen-gray-7); --muted: var(--zen-gray-4); --primary: var(--zen-gray-1); --primary-foreground: var(--zen-gray-12); --secondary-foreground: var(--zen-gray-12); --card-foreground: var(--zen-gray-12); --popover-foreground: var(--zen-gray-12); --menu-foreground: var(--zen-gray-12); --menu-icon: var(--icon-primary); --menu-text-disabled: var(--zen-gray-7); --menu-text-destructive: var(--zen-red-10); --menu-item-hover-destructive: var(--zen-red-3); --destructive: var(--zen-red-6); --ring: var(--zen-purple-5); --sunken-base: var(--zen-gray-2); /* Purple sunken — light mode uses purple-1 for a barely-there wash; dark-mode purple-1 (#22116C) is a saturated navy that reads as a loud indigo block. Re-anchor to the more muted purple-2/3/4 steps so the "active" state stays a subtle dark wash. Same fix for --sunken-accent (the accent equivalent used by selected-row fills in the use-case sidebar etc.) — same primitive, same problem. */ --sunken-purple: var(--zen-purple-2); --sunken-purple-hover: var(--zen-purple-3); --sunken-purple-active: var(--zen-purple-4); --sunken-accent: var(--zen-purple-2); --sunken-accent-hover: var(--zen-purple-3); --sunken-accent-active: var(--zen-purple-4); --sunken-hover: var(--zen-gray-3); --sunken-active: var(--zen-gray-4); --table-header-bg: var(--zen-gray-3); --table-separator-bg: var(--zen-gray-3); --table-border: var(--zen-gray-3); /* Surfaces that use --white in :root need dark overrides */ --card: var(--zen-gray-2); --popover: var(--zen-gray-2); --menu: var(--zen-gray-2); --input: var(--zen-gray-3); --input-background: var(--zen-gray-2); /* Menu refinements for dark surfaces */ --menu-item-hover: var(--sunken-hover); /* Tooltip — inverted in dark mode: light bg + dark text for contrast */ --tooltip: var(--zen-gray-12); --tooltip-foreground: var(--zen-gray-1); /* Secondary — visible bg instead of transparent on dark surfaces */ --secondary: var(--zen-gray-3); /* Accent — brighter purple for dark backgrounds */ --accent: var(--zen-purple-6); /* Elevation — deeper shadows for dark mode */ --elevation-sm: 0px 1px 3px 0px rgba(0,0,0,0.24), 0px 2px 4px 0px rgba(0,0,0,0.28); --elevation-md: 0px 4px 12px 0px rgba(0,0,0,0.24), 0px 8px 24px 0px rgba(0,0,0,0.32); /* ─── ZenDS Primitives — dark mode overrides ──────────────── Rows 1-4 → deep desaturated dark fills (inverted lightness) Row 5 → visible strokes on dark backgrounds Rows 6+ → brightened for dark-bg readability ───────────────────────────────────────────────────────── */ /* Gray — inverted scale */ --zen-gray-1: #1A1512; --zen-gray-2: #27221E; --zen-gray-3: #352F2C; --zen-gray-4: #433D3A; --zen-gray-5: #544E4B; --zen-gray-6: #716A66; --zen-gray-7: #88827E; --zen-gray-8: #A19A96; --zen-gray-9: #B6AFAB; --zen-gray-10: #CDC6C1; --zen-gray-11: #E7E0DB; --zen-gray-12: #FDF5F1; /* Purple — dark mode */ --zen-purple-1: #180E31; --zen-purple-2: #26154C; --zen-purple-3: #351D67; --zen-purple-4: #442682; --zen-purple-5: #5633A2; --zen-purple-6: #734CCE; --zen-purple-7: #8A67E6; --zen-purple-8: #A084F9; --zen-purple-9: #B4A0FF; --zen-purple-10: #C9BDFF; --zen-purple-11: #E2DCFF; --zen-purple-12: #F7F5FF; /* Blue — dark mode */ --zen-blue-1: #001829; --zen-blue-2: #00253F; --zen-blue-3: #003454; --zen-blue-3-hover: #203048; --zen-blue-4: #004269; --zen-blue-4-active: #283C5A; --zen-blue-5: #005584; --zen-blue-6: #0072AF; --zen-blue-7: #268BCB; --zen-blue-8: #50A3DF; --zen-blue-9: #76B9EC; --zen-blue-10: #9CCEF5; --zen-blue-11: #C8E6FE; --zen-blue-12: #F0F8FF; /* Green — dark mode */ --zen-green-1: #001D08; --zen-green-2: #002C11; --zen-green-3: #003C1A; --zen-green-4: #004C24; --zen-green-5: #00612F; --zen-green-6: #008242; --zen-green-7: #009D51; --zen-green-8: #2EB767; --zen-green-9: #64CA86; --zen-green-10: #92DBA7; --zen-green-11: #C3EECD; --zen-green-12: #EAFCEF; /* Orange — dark mode */ --zen-orange-1: #270E00; --zen-orange-2: #381A00; --zen-orange-3: #4B2500; --zen-orange-4: #5F3100; --zen-orange-5: #774000; --zen-orange-6: #9E5700; --zen-orange-7: #BF6B00; --zen-orange-8: #DA832C; --zen-orange-9: #E99E5D; --zen-orange-10: #F3BA8A; --zen-orange-11: #FEDABD; --zen-orange-12: #FFF5EC; /* Yellow — dark mode */ --zen-yellow-1: #1E1500; --zen-yellow-2: #2D2100; --zen-yellow-3: #3D2F00; --zen-yellow-4: #4D3C00; --zen-yellow-5: #624D00; --zen-yellow-6: #836900; --zen-yellow-7: #9F7F00; --zen-yellow-8: #BB9700; --zen-yellow-9: #CDAE4E; --zen-yellow-10: #DDC681; --zen-yellow-11: #EFE1B8; --zen-yellow-12: #FCF7E6; /* Red — dark mode */ --zen-red-1: #2F0406; --zen-red-2: #480209; --zen-red-3: #62000C; --zen-red-4: #7B0012; --zen-red-5: #99001A; --zen-red-6: #C51C2E; --zen-red-7: #E04248; --zen-red-8: #F56665; --zen-red-9: #FF8A85; --zen-red-10: #FFAFAA; --zen-red-11: #FFD6D3; --zen-red-12: #FFF4F3; /* Indigo — dark mode */ --zen-indigo-1: #150F31; --zen-indigo-2: #22184C; --zen-indigo-3: #2F2167; --zen-indigo-4: #3D2B83; --zen-indigo-5: #4E39A2; --zen-indigo-6: #6852CF; --zen-indigo-7: #7E6CE7; --zen-indigo-8: #9689FA; --zen-indigo-9: #ABA4FF; --zen-indigo-10: #C2BFFF; --zen-indigo-11: #DEDDFF; --zen-indigo-12: #F6F6FF; /* Teal — dark mode */ --zen-teal-1: #001B20; --zen-teal-2: #00292F; --zen-teal-3: #00383F; --zen-teal-4: #004751; /* teal-5 keeps its real dark-ramp tone in the DS (monotonic, between teal-4 and teal-6). The marketing site needs the brand-bright #7ADAE6 on dark for brand-teal details, but that is a SITE concern: it is overridden at the website layer (html.dark in _shared/chrome.css), not baked into the shared token here. */ --zen-teal-5: #005B66; --zen-teal-6: #007A89; --zen-teal-7: #0094A6; --zen-teal-8: #2EADC0; --zen-teal-9: #64C1D1; --zen-teal-10: #92D4E0; --zen-teal-11: #C2EAF0; --zen-teal-12: #EAFAFD; /* Cyan — dark mode */ --zen-cyan-1: #001C19; --zen-cyan-2: #002A27; --zen-cyan-3: #003935; --zen-cyan-4: #004944; --zen-cyan-5: #005D57; --zen-cyan-6: #007D75; --zen-cyan-7: #00978E; --zen-cyan-8: #21B2A7; --zen-cyan-9: #5FC5BB; --zen-cyan-10: #8FD7CF; --zen-cyan-11: #C1EBE6; --zen-cyan-12: #EAFBF9; /* Sky — dark mode */ --zen-sky-1: #001828; --zen-sky-2: #00263D; --zen-sky-3: #003451; --zen-sky-4: #004365; --zen-sky-5: #00567F; --zen-sky-6: #0074A9; --zen-sky-7: #228CC6; --zen-sky-8: #4FA5DA; --zen-sky-9: #75BAE8; --zen-sky-10: #9CCFF2; --zen-sky-11: #C7E6FC; --zen-sky-12: #EFF8FF; /* Pink — dark mode */ --zen-pink-1: #310011; --zen-pink-2: #48001B; --zen-pink-3: #5F0027; --zen-pink-4: #770033; --zen-pink-5: #950042; --zen-pink-6: #C60059; --zen-pink-7: #E8256F; --zen-pink-8: #FD5589; --zen-pink-9: #FF85A3; --zen-pink-10: #FFACBE; --zen-pink-11: #FFD5DC; --zen-pink-12: #FFF3F5; /* Brown — dark mode */ --zen-brown-1: #1E130E; --zen-brown-2: #2F1F17; --zen-brown-3: #402B20; --zen-brown-4: #52372B; --zen-brown-5: #674738; --zen-brown-6: #886250; --zen-brown-7: #A07967; --zen-brown-8: #B79281; --zen-brown-9: #C9A99B; --zen-brown-10: #DAC1B6; --zen-brown-11: #EDDED7; --zen-brown-12: #FCF5F2; /* ─── Chip tokens — dark mode (deep tints, brighter text) ── */ /* Purple chips */ --chip-purple-bg: var(--zen-purple-2); --chip-purple-bg-hover: var(--zen-purple-3); --chip-purple-bg-active: var(--zen-purple-4); --chip-purple-border: var(--zen-purple-5); --chip-purple-text: var(--zen-purple-11); --chip-purple-icon: var(--zen-purple-11); /* Green chips */ --chip-green-bg: var(--zen-green-2); --chip-green-bg-hover: var(--zen-green-3); --chip-green-bg-active: var(--zen-green-4); --chip-green-border: var(--zen-green-5); --chip-green-text: var(--zen-green-11); --chip-green-icon: var(--zen-green-11); /* Blue chips */ --chip-blue-bg: var(--zen-blue-2); --chip-blue-bg-hover: var(--zen-blue-3-hover); --chip-blue-bg-active: var(--zen-blue-4-active); --chip-blue-border: var(--zen-blue-5); --chip-blue-text: var(--zen-blue-11); --chip-blue-icon: var(--zen-blue-11); /* Orange chips */ --chip-orange-bg: var(--zen-orange-2); --chip-orange-bg-hover: var(--zen-orange-3); --chip-orange-bg-active: var(--zen-orange-4); --chip-orange-border: var(--zen-orange-5); --chip-orange-text: var(--zen-orange-11); --chip-orange-icon: var(--zen-orange-11); /* Gray chips */ --chip-gray-bg: var(--zen-gray-3); --chip-gray-bg-hover: var(--zen-gray-4); --chip-gray-bg-active: var(--zen-gray-5); --chip-gray-border: var(--zen-gray-5); --chip-gray-text: var(--zen-gray-11); --chip-gray-icon: var(--zen-gray-11); /* Red chips */ --chip-red-bg: var(--zen-red-3); --chip-red-bg-hover: var(--zen-red-4); --chip-red-bg-active: var(--zen-red-5); --chip-red-border: var(--zen-red-5); --chip-red-text: var(--zen-red-11); --chip-red-icon: var(--zen-red-11); /* Indigo chips */ --chip-indigo-bg: var(--zen-indigo-3); --chip-indigo-bg-hover: var(--zen-indigo-4); --chip-indigo-bg-active: var(--zen-indigo-5); --chip-indigo-border: var(--zen-indigo-5); --chip-indigo-text: var(--zen-indigo-11); --chip-indigo-icon: var(--zen-indigo-11); /* Yellow chips */ --chip-yellow-bg: var(--zen-yellow-3); --chip-yellow-bg-hover: var(--zen-yellow-4); --chip-yellow-bg-active: var(--zen-yellow-5); --chip-yellow-border: var(--zen-yellow-5); --chip-yellow-text: var(--zen-yellow-11); --chip-yellow-icon: var(--zen-yellow-11); /* Cyan chips */ --chip-cyan-bg: var(--zen-cyan-3); --chip-cyan-bg-hover: var(--zen-cyan-4); --chip-cyan-bg-active: var(--zen-cyan-5); --chip-cyan-border: var(--zen-cyan-5); --chip-cyan-text: var(--zen-cyan-11); --chip-cyan-icon: var(--zen-cyan-11); /* ─── Tag tokens — dark mode (bg=row-3 dark, text=row-9+ light) */ --tag-api-bg: var(--zen-green-3); --tag-api-text: var(--zen-green-11); --tag-browser-bg: var(--zen-yellow-3); --tag-browser-text: var(--zen-yellow-11); --tag-proxy-bg: var(--zen-blue-3); --tag-proxy-text: var(--zen-blue-11); --tag-purple-bg: var(--zen-purple-3); --tag-purple-text: var(--zen-purple-11); --tag-peach-bg: var(--zen-orange-3); --tag-peach-text: var(--zen-orange-11); --tag-orange-bg: var(--zen-orange-3); --tag-orange-text: var(--zen-orange-11); --tag-red-bg: var(--zen-red-3); --tag-red-text: var(--zen-red-11); --tag-pink-bg: var(--zen-pink-3); --tag-pink-text: var(--zen-pink-11); --tag-indigo-bg: var(--zen-indigo-3); --tag-indigo-text: var(--zen-indigo-11); --tag-cyan-bg: var(--zen-cyan-3); --tag-cyan-text: var(--zen-cyan-11); --tag-teal-bg: var(--zen-teal-3); --tag-teal-text: var(--zen-teal-11); --tag-blue-bg: var(--zen-blue-3); --tag-blue-text: var(--zen-blue-11); --tag-gray-bg: var(--zen-gray-3); --tag-gray-text: var(--zen-gray-11); --tag-ask-bg: var(--zen-purple-3); --tag-ask-text: var(--zen-purple-11); /* Tag selected borders */ --tag-api-border: var(--zen-green-5); --tag-browser-border: var(--zen-yellow-5); --tag-proxy-border: var(--zen-blue-5); --tag-purple-border: var(--zen-purple-5); --tag-peach-border: var(--zen-orange-5); --tag-red-border: var(--zen-red-5); --tag-indigo-border: var(--zen-indigo-5); --tag-cyan-border: var(--zen-cyan-5); --tag-teal-border: var(--zen-teal-5); --tag-blue-border: var(--zen-blue-5); --tag-gray-border: var(--zen-gray-5); /* ─── Banner tokens — dark mode ────────────────────────── */ --banner-success-bg: var(--zen-green-2); --banner-success-border: var(--zen-green-5); --banner-success-circle: var(--zen-green-3); --banner-success-icon: var(--zen-green-9); --banner-warning-bg: var(--zen-yellow-2); --banner-warning-border: var(--zen-yellow-5); --banner-warning-circle: var(--zen-yellow-3); --banner-warning-icon: var(--zen-yellow-8); --banner-error-bg: var(--zen-red-2); --banner-error-border: var(--zen-red-5); --banner-error-circle: var(--zen-red-3); --banner-error-icon: var(--zen-red-8); --banner-info-bg: var(--zen-blue-2); --banner-info-border: var(--zen-blue-5); --banner-info-circle: var(--zen-blue-3); --banner-info-icon: var(--zen-blue-8); /* Default (gray) — dark mode. App-fidelity, mirrors app. */ --banner-default-bg: var(--zen-gray-2); --banner-default-border: var(--zen-gray-3); --banner-default-circle: var(--zen-gray-3); --banner-default-icon: var(--zen-gray-8); /* Yellow status indicators */ --yellow-3: var(--zen-yellow-5); --yellow-5: var(--zen-orange-6); /* ─── Chart tokens — dark mode (brighter for visibility) ── */ --chart-1: var(--zen-purple-6); --chart-2: var(--zen-purple-9); --chart-3: var(--zen-blue-6); --chart-4: var(--zen-red-6); --chart-5: var(--zen-gray-8); /* ─── Sidebar — dark mode ────────────────────────────────── Most sidebar tokens reference primitives that are already inverted, so only intentional overrides are listed here. ──────────────────────────────────────────────────────────── */ --sidebar-primary: var(--zen-purple-7); --sidebar-accent: var(--zen-purple-9); /* ─── Overlay / Backdrop — dark mode ────────────────────── */ --overlay: rgba(0,0,0,0.45); --overlay-heavy: rgba(0,0,0,0.6); /* ─── Elevation — deep — dark mode ─────────────────────── */ --elevation-lg: 0px 36px 45px 0px rgba(0,0,0,0.20), 0px 13.552px 13.566px 0px rgba(0,0,0,0.16), 0px 4.522px 5.635px 0px rgba(0,0,0,0.20), 0px 0.064px 2.038px 0px rgba(0,0,0,0.16); /* ─── Inset shadow — dark mode ─────────────────────────── */ --inset-shadow: inset 0 1px 3px rgba(0,0,0,0.20); /* ─── Subtle separators — dark mode ────────────────────── */ --separator: rgba(255,255,255,0.06); --separator-subtle: rgba(255,255,255,0.04); /* ─── Accent glow — dark mode ──────────────────────────── */ --accent-glow: 0 8px 28px rgba(139,106,230,0.35); /* ─── Code editor — warm-tinted dark palette ──────────── Defaults (Atom One Dark / VS Code Dark) read as cool slate against the rest of the app's warm-brown dark surface. Override bg + syntax tokens so the code panel sits in the same hue family as the surrounding chrome, but a step DARKER than the panel bg so it still reads as a distinct code surface (mirrors the light-mode "dark code against light chrome" split). */ --code-editor-bg: var(--zen-gray-3); --code-editor-text: var(--zen-gray-11); --code-keyword: #C586C0; --code-string: #CE9178; --code-comment: #6A9955; --code-number: #B5CEA8; --code-builtin: #569CD6; --code-func: #DCDCAA; --code-variable: #9CDCFE; } /* ═══════════════════════════════════════════════════════════ Tailwind v4 border-color fix + global scrollbar suppression + marquee animation. Wrapped in @layer base so Tailwind utility classes (which live in @layer utilities) can still override these defaults. ═══════════════════════════════════════════════════════════ */ @layer base { *, *::before, *::after { border-color: var(--border); } * { -ms-overflow-style: none; scrollbar-width: none; } *::-webkit-scrollbar { display: none; } /* Preview table — keeps mouse users on wide screens able to scroll the * data table horizontally. Scrollbars stay hidden up to 1440px (touchpad * users); above that we re-enable a thin horizontal scrollbar so the * mouse-only path is reachable. */ @media (min-width: 1441px) { .preview-scroll-x { scrollbar-width: thin; -ms-overflow-style: auto; } .preview-scroll-x::-webkit-scrollbar { display: block; height: 8px; } .preview-scroll-x::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 4px; } .preview-scroll-x::-webkit-scrollbar-track { background: transparent; } } /* ── Marquee infinite-scroll animation ────────────────── */ @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-100% - var(--marquee-gap, 8px))); } } /* ── Canvas pulse dot animation ───────────────────────── */ @keyframes canvas-pulse { 0%, 100% { transform: scale(1); opacity: 0.25; } 50% { transform: scale(1.8); opacity: 0; } } .marquee-track { animation: marquee-scroll var(--marquee-duration, 30s) linear infinite; } /* ── Boxicons webfont sizing overrides ───────────────── The boxicons webfont uses font-size for sizing. These rules bridge Tailwind w-N h-N classes to the correct font-size so BoxIcon components size consistently. ───────────────────────────────────────────────────── */ .bx { font-size: inherit; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .bx.w-2\.5 { font-size: 10px; } .bx.w-3 { font-size: 12px; } .bx.w-3\.5 { font-size: 14px; } .bx.w-4 { font-size: 16px; } .bx.w-5 { font-size: 20px; } .bx.w-6 { font-size: 24px; } .bx.size-2 { font-size: 8px; } .bx.size-2\.5 { font-size: 10px; } .bx.size-3 { font-size: 12px; } .bx.size-4 { font-size: 16px; } .bx.size-5 { font-size: 20px; } /* ── ZenButton accent: inner glow ────────────────────── Structural class only — the dynamic inner gradient is rendered via an overlay div in ZenButton.tsx driven by mouse position for interactive depth. ───────────────────────────────────────────────────── */ .zen-btn-rows { position: relative; overflow: hidden; isolation: isolate; } }