@gtcx/tokens 0.1.0

package/dist/index.d.mts

@@ -0,0 +1,919 @@
+/**
+ * @module primitives
+ *
+ * Primitive design tokens — raw values without semantic meaning.
+ * These form the foundation of the GTCX token system and should never
+ * be consumed directly by components. Instead, components consume
+ * semantic tokens ({@link ../semantic}) which reference these primitives.
+ *
+ * Architecture: primitives → semantic → platform overrides → dark overrides
+ */
+/** GTCX brand color palette. Each scale runs 50 (lightest) → 950 (darkest). */
+declare const colorPrimitives: {
+    /** GTCX brand primary — sky blue */
+    readonly primary: {
+        readonly 50: "#f0f9ff";
+        readonly 100: "#e0f2fe";
+        readonly 200: "#bae6fd";
+        readonly 300: "#7dd3fc";
+        readonly 400: "#38bdf8";
+        readonly 500: "#0ea5e9";
+        readonly 600: "#0284c7";
+        readonly 700: "#0369a1";
+        readonly 800: "#075985";
+        readonly 900: "#0c4a6e";
+        readonly 950: "#082f49";
+    };
+    /** GTCX brand secondary — purple */
+    readonly secondary: {
+        readonly 50: "#faf5ff";
+        readonly 100: "#f3e8ff";
+        readonly 200: "#e9d5ff";
+        readonly 300: "#d8b4fe";
+        readonly 400: "#c084fc";
+        readonly 500: "#a855f7";
+        readonly 600: "#9333ea";
+        readonly 700: "#7c3aed";
+        readonly 800: "#6b21a8";
+        readonly 900: "#581c87";
+        readonly 950: "#3b0764";
+    };
+    /** Positive feedback, approvals, profit */
+    readonly success: {
+        readonly 50: "#f0fdf4";
+        readonly 100: "#dcfce7";
+        readonly 200: "#bbf7d0";
+        readonly 300: "#86efac";
+        readonly 400: "#4ade80";
+        readonly 500: "#22c55e";
+        readonly 600: "#16a34a";
+        readonly 700: "#15803d";
+        readonly 800: "#166534";
+        readonly 900: "#14532d";
+        readonly 950: "#052e16";
+    };
+    /** Caution states, pending actions */
+    readonly warning: {
+        readonly 50: "#fffbeb";
+        readonly 100: "#fef3c7";
+        readonly 200: "#fde68a";
+        readonly 300: "#fcd34d";
+        readonly 400: "#fbbf24";
+        readonly 500: "#f59e0b";
+        readonly 600: "#d97706";
+        readonly 700: "#b45309";
+        readonly 800: "#92400e";
+        readonly 900: "#78350f";
+        readonly 950: "#451a03";
+    };
+    /** Destructive actions, rejections, loss */
+    readonly error: {
+        readonly 50: "#fef2f2";
+        readonly 100: "#fee2e2";
+        readonly 200: "#fecaca";
+        readonly 300: "#fca5a5";
+        readonly 400: "#f87171";
+        readonly 500: "#ef4444";
+        readonly 600: "#dc2626";
+        readonly 700: "#b91c1c";
+        readonly 800: "#991b1b";
+        readonly 900: "#7f1d1d";
+        readonly 950: "#450a0a";
+    };
+    /** Informational, links */
+    readonly info: {
+        readonly 50: "#eff6ff";
+        readonly 100: "#dbeafe";
+        readonly 200: "#bfdbfe";
+        readonly 300: "#93c5fd";
+        readonly 400: "#60a5fa";
+        readonly 500: "#3b82f6";
+        readonly 600: "#2563eb";
+        readonly 700: "#1d4ed8";
+        readonly 800: "#1e40af";
+        readonly 900: "#1e3a8a";
+        readonly 950: "#172554";
+    };
+    /** Grays for text, backgrounds, borders */
+    readonly neutral: {
+        readonly 50: "#fafafa";
+        readonly 100: "#f5f5f5";
+        readonly 200: "#e5e5e5";
+        readonly 300: "#d4d4d4";
+        readonly 400: "#a3a3a3";
+        readonly 500: "#737373";
+        readonly 600: "#525252";
+        readonly 700: "#404040";
+        readonly 800: "#262626";
+        readonly 900: "#171717";
+        readonly 950: "#0a0a0a";
+    };
+    readonly white: "#ffffff";
+    readonly black: "#000000";
+};
+/** 4px base spacing scale. Keys are multipliers (1 = 4px, 2 = 8px, etc.). */
+declare const spacingPrimitives: {
+    readonly 0: 0;
+    readonly 1: 4;
+    readonly 2: 8;
+    readonly 3: 12;
+    readonly 4: 16;
+    readonly 5: 20;
+    readonly 6: 24;
+    readonly 8: 32;
+    readonly 10: 40;
+    readonly 12: 48;
+    readonly 16: 64;
+    readonly 20: 80;
+    readonly 24: 96;
+    readonly 32: 128;
+};
+/** Font size scale in pixels. */
+declare const fontSizePrimitives: {
+    readonly xs: 12;
+    readonly sm: 14;
+    readonly base: 16;
+    readonly lg: 18;
+    readonly xl: 20;
+    readonly '2xl': 24;
+    readonly '3xl': 30;
+    readonly '4xl': 36;
+    readonly '5xl': 48;
+};
+/** Font weight scale. Maps named weights to numeric values. */
+declare const fontWeightPrimitives: {
+    readonly normal: 400;
+    readonly medium: 500;
+    readonly semibold: 600;
+    readonly bold: 700;
+};
+/** Line height ratios. Applied to font sizes to compute actual line heights. */
+declare const lineHeightPrimitives: {
+    readonly tight: 1.2;
+    readonly normal: 1.5;
+    readonly relaxed: 1.7;
+};
+/** Letter spacing in em units. */
+declare const letterSpacingPrimitives: {
+    readonly tight: "-0.025em";
+    readonly normal: "0em";
+    readonly wide: "0.025em";
+};
+/** Font family stacks with system fallbacks. */
+declare const fontFamilyPrimitives: {
+    readonly sans: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
+    readonly mono: "JetBrains Mono, Fira Code, Consolas, monospace";
+    readonly serif: "Georgia, 'Times New Roman', serif";
+};
+/** Border radius scale in pixels. */
+declare const borderRadiusPrimitives: {
+    readonly none: 0;
+    readonly sm: 2;
+    readonly md: 4;
+    readonly lg: 8;
+    readonly xl: 12;
+    readonly full: 9999;
+};
+/** Box shadow scale using CSS shadow syntax. */
+declare const shadowPrimitives: {
+    readonly none: "none";
+    readonly sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
+    readonly md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+    readonly lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
+};
+/** Viewport width breakpoints in pixels (min-width). */
+declare const breakpointPrimitives: {
+    readonly xs: 480;
+    readonly sm: 576;
+    readonly md: 768;
+    readonly lg: 992;
+    readonly xl: 1200;
+    readonly xxl: 1600;
+};
+/** Z-index scale for layered UI elements. */
+declare const zIndexPrimitives: {
+    readonly dropdown: 1000;
+    readonly sticky: 1020;
+    readonly fixed: 1030;
+    readonly modal: 1040;
+    readonly popover: 1050;
+    readonly tooltip: 1060;
+};
+/** Transition shorthand values (duration + easing). */
+declare const transitionPrimitives: {
+    readonly fast: "150ms ease";
+    readonly normal: "250ms ease";
+    readonly slow: "350ms ease";
+};
+/** Opacity values for interactive and feedback states. */
+declare const opacityPrimitives: {
+    /** Disabled controls */
+    readonly disabled: 0.4;
+    /** Hover state overlays */
+    readonly hover: 0.08;
+    /** Active/pressed state overlays */
+    readonly pressed: 0.12;
+    /** Modal backdrop overlay */
+    readonly overlay: 0.5;
+    /** Loading state content fade */
+    readonly loading: 0.65;
+};
+/** Focus ring styling for keyboard-accessible focus indicators. */
+declare const focusPrimitives: {
+    /** Ring width in pixels */
+    readonly ringWidth: 2;
+    /** Ring offset from element edge in pixels */
+    readonly ringOffset: 2;
+    /** Ring color — uses primary brand color */
+    readonly ringColor: "#0ea5e9";
+    /** Ring border-style */
+    readonly ringStyle: "solid";
+};
+/** Animation duration and easing primitives for motion tokens. */
+declare const motionPrimitives: {
+    /** Quick micro-interactions (hover, focus) */
+    readonly durationFast: 150;
+    /** Standard transitions (expand, collapse) */
+    readonly durationNormal: 250;
+    /** Deliberate animations (page transitions, modals) */
+    readonly durationSlow: 350;
+    /** Default easing — deceleration curve */
+    readonly easeDefault: "cubic-bezier(0.4, 0, 0.2, 1)";
+    /** Entrance easing — elements entering the viewport */
+    readonly easeIn: "cubic-bezier(0.4, 0, 1, 1)";
+    /** Exit easing — elements leaving the viewport */
+    readonly easeOut: "cubic-bezier(0, 0, 0.2, 1)";
+    /** Symmetric easing — elements that enter and exit */
+    readonly easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)";
+};
+type ColorPrimitives = typeof colorPrimitives;
+type SpacingPrimitives = typeof spacingPrimitives;
+type FontSizePrimitives = typeof fontSizePrimitives;
+type FontWeightPrimitives = typeof fontWeightPrimitives;
+type LineHeightPrimitives = typeof lineHeightPrimitives;
+type LetterSpacingPrimitives = typeof letterSpacingPrimitives;
+type FontFamilyPrimitives = typeof fontFamilyPrimitives;
+type BorderRadiusPrimitives = typeof borderRadiusPrimitives;
+type ShadowPrimitives = typeof shadowPrimitives;
+type BreakpointPrimitives = typeof breakpointPrimitives;
+type ZIndexPrimitives = typeof zIndexPrimitives;
+type TransitionPrimitives = typeof transitionPrimitives;
+type OpacityPrimitives = typeof opacityPrimitives;
+type FocusPrimitives = typeof focusPrimitives;
+type MotionPrimitives = typeof motionPrimitives;
+/** Union of all breakpoint names. */
+type BreakpointKey = keyof typeof breakpointPrimitives;
+/** Union of all color scale names (e.g. 'primary', 'success', 'neutral'). */
+type ColorScaleKey = Exclude<keyof typeof colorPrimitives, 'white' | 'black'>;
+/** Union of color shade steps (50, 100, ... 950). */
+type ColorShade = keyof (typeof colorPrimitives)['primary'];
+
+/**
+ * @module semantic
+ *
+ * Semantic design tokens — named for their purpose, not their value.
+ * Components should consume these tokens exclusively; never reference
+ * primitives directly.
+ *
+ * Each category is exported individually so consumers can import only
+ * what they need:
+ *
+ * ```ts
+ * import { semanticColors, semanticTypography } from '@gtcx/tokens';
+ * ```
+ *
+ * The combined `semanticTokens` object is also exported for backward
+ * compatibility with code that imports the entire token set.
+ */
+/**
+ * Semantic color tokens.
+ *
+ * Every value traces back to a {@link colorPrimitives} value — no orphan
+ * hex strings. Dark mode overrides live in {@link ../dark | darkSemanticColors}.
+ */
+declare const semanticColors: {
+    /** Primary brand action color */
+    readonly primary: "#0ea5e9";
+    /** Primary hover state */
+    readonly primaryHover: "#0284c7";
+    /** Primary active/pressed state */
+    readonly primaryActive: "#0369a1";
+    /** Primary tinted background (selected rows, badges) */
+    readonly primaryBg: "#f0f9ff";
+    /** Secondary brand color */
+    readonly secondary: "#a855f7";
+    /** Secondary hover state */
+    readonly secondaryHover: "#9333ea";
+    /** Positive outcome (approvals, passing checks) */
+    readonly success: "#22c55e";
+    /** Caution state (pending review, warnings) */
+    readonly warning: "#f59e0b";
+    /** Destructive/failure state */
+    readonly error: "#ef4444";
+    /** Informational state */
+    readonly info: "#3b82f6";
+    /** Financial gain */
+    readonly profit: "#22c55e";
+    /** Financial loss */
+    readonly loss: "#ef4444";
+    /** Compliance approved */
+    readonly approved: "#16a34a";
+    /** Compliance pending */
+    readonly pending: "#d97706";
+    /** Compliance rejected */
+    readonly rejected: "#dc2626";
+    /** Security verified */
+    readonly secure: "#16a34a";
+    /** Security compromised */
+    readonly insecure: "#dc2626";
+    /** Primary body text */
+    readonly textPrimary: "#171717";
+    /** Secondary/supporting text */
+    readonly textSecondary: "#525252";
+    /** Tertiary/label text */
+    readonly textTertiary: "#737373";
+    /** Muted/placeholder text */
+    readonly textMuted: "#a3a3a3";
+    /** Text on dark backgrounds */
+    readonly textInverse: "#fafafa";
+    /** Page-level background */
+    readonly bgPage: "#fafafa";
+    /** Card/surface background */
+    readonly bgSurface: "#ffffff";
+    /** Surface hover state */
+    readonly bgSurfaceHover: "#f5f5f5";
+    /** Tertiary surface (nested cards, wells) */
+    readonly bgSurfaceTertiary: "#e5e5e5";
+    /** Inverse background (dark sections) */
+    readonly bgInverse: "#171717";
+    /** Sidebar background */
+    readonly bgSidebar: "#ffffff";
+    /** Header background */
+    readonly bgHeader: "#ffffff";
+    /** Default border */
+    readonly border: "#e5e5e5";
+    /** Light/subtle border */
+    readonly borderLight: "#f5f5f5";
+    /** Emphasized border */
+    readonly borderSecondary: "#d4d4d4";
+    /** Focus ring border */
+    readonly borderFocus: "#0ea5e9";
+    /** Default link color */
+    readonly link: "#0284c7";
+    /** Link hover state */
+    readonly linkHover: "#0369a1";
+};
+/**
+ * Semantic spacing tokens.
+ *
+ * Page-level gutters, component-internal spacing, and layout dimensions.
+ * All values trace to {@link spacingPrimitives}.
+ */
+declare const semanticSpacing: {
+    /** Horizontal page gutter */
+    readonly pageGutter: 24;
+    /** Internal card padding */
+    readonly cardPadding: 16;
+    /** Gap between page sections */
+    readonly sectionGap: 24;
+    /** Gap between sibling components */
+    readonly componentGap: 12;
+    /** Inline element gap (icon + label) */
+    readonly inlineGap: 8;
+    /** Per-component spacing presets */
+    readonly component: {
+        readonly button: {
+            readonly paddingX: 16;
+            readonly paddingY: 8;
+            readonly gap: 8;
+        };
+        readonly input: {
+            readonly paddingX: 12;
+            readonly paddingY: 8;
+        };
+        readonly card: {
+            readonly padding: 24;
+            readonly gap: 16;
+        };
+        readonly form: {
+            readonly fieldGap: 16;
+            readonly sectionGap: 32;
+            readonly labelGap: 8;
+        };
+        readonly modal: {
+            readonly padding: 24;
+            readonly gap: 16;
+        };
+        readonly table: {
+            readonly cellPadding: 16;
+            readonly headerPadding: 16;
+        };
+    };
+    /** Layout-level spacing presets */
+    readonly layout: {
+        readonly container: {
+            readonly paddingX: 16;
+            readonly paddingY: 24;
+        };
+        readonly section: {
+            readonly marginY: 48;
+            readonly gap: 32;
+        };
+        readonly page: {
+            readonly marginY: 64;
+            readonly paddingX: 24;
+        };
+    };
+};
+/**
+ * Semantic typography tokens.
+ *
+ * Font families, display/heading/body/button type scales.
+ * All values trace to font-* primitive scales.
+ */
+declare const semanticTypography: {
+    /** Default sans-serif font stack */
+    readonly fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
+    /** Monospace font stack for code */
+    readonly fontFamilyCode: "JetBrains Mono, Fira Code, Consolas, monospace";
+    /** Serif font stack for editorial content */
+    readonly fontFamilySerif: "Georgia, 'Times New Roman', serif";
+    /** Display type scale — hero sections, feature numbers */
+    readonly display: {
+        readonly lg: {
+            readonly fontSize: 48;
+            readonly fontWeight: 700;
+            readonly lineHeight: 1.2;
+            readonly letterSpacing: "-0.025em";
+        };
+        readonly md: {
+            readonly fontSize: 36;
+            readonly fontWeight: 700;
+            readonly lineHeight: 1.2;
+            readonly letterSpacing: "0em";
+        };
+        readonly sm: {
+            readonly fontSize: 30;
+            readonly fontWeight: 600;
+            readonly lineHeight: 1.2;
+            readonly letterSpacing: "0em";
+        };
+    };
+    /** Heading type scale — page/section/card headings */
+    readonly heading: {
+        readonly h1: {
+            readonly fontSize: 30;
+            readonly fontWeight: 700;
+            readonly lineHeight: 1.2;
+        };
+        readonly h2: {
+            readonly fontSize: 24;
+            readonly fontWeight: 600;
+            readonly lineHeight: 1.2;
+        };
+        readonly h3: {
+            readonly fontSize: 20;
+            readonly fontWeight: 600;
+            readonly lineHeight: 1.5;
+        };
+        readonly h4: {
+            readonly fontSize: 18;
+            readonly fontWeight: 500;
+            readonly lineHeight: 1.5;
+        };
+    };
+    /** Body type scale — paragraphs, descriptions */
+    readonly body: {
+        readonly lg: {
+            readonly fontSize: 18;
+            readonly fontWeight: 400;
+            readonly lineHeight: 1.7;
+        };
+        readonly md: {
+            readonly fontSize: 16;
+            readonly fontWeight: 400;
+            readonly lineHeight: 1.5;
+        };
+        readonly sm: {
+            readonly fontSize: 14;
+            readonly fontWeight: 400;
+            readonly lineHeight: 1.5;
+        };
+    };
+    /** Caption — footnotes, timestamps, fine print */
+    readonly caption: {
+        readonly fontSize: 12;
+        readonly fontWeight: 400;
+        readonly lineHeight: 1.5;
+    };
+    /** Button label type scale */
+    readonly button: {
+        readonly lg: {
+            readonly fontSize: 18;
+            readonly fontWeight: 500;
+            readonly lineHeight: 1.5;
+        };
+        readonly md: {
+            readonly fontSize: 16;
+            readonly fontWeight: 500;
+            readonly lineHeight: 1.5;
+        };
+        readonly sm: {
+            readonly fontSize: 14;
+            readonly fontWeight: 500;
+            readonly lineHeight: 1.5;
+        };
+    };
+};
+/** Semantic border-radius tokens for component shapes. */
+declare const semanticRadii: {
+    /** Default component radius */
+    readonly component: 4;
+    /** Card/panel radius */
+    readonly card: 8;
+    /** Button radius */
+    readonly button: 4;
+    /** Input/select radius */
+    readonly input: 4;
+    /** Tag/badge radius */
+    readonly tag: 2;
+    /** Avatar — fully round */
+    readonly avatar: 9999;
+};
+/** Semantic shadow tokens for elevation. */
+declare const semanticShadows: {
+    /** Card/panel elevation */
+    readonly card: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
+    /** Dropdown/popover elevation */
+    readonly dropdown: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+    /** Modal/dialog elevation */
+    readonly modal: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
+};
+/** Semantic layout dimension tokens (in pixels). */
+declare const semanticLayout: {
+    /** Sidebar expanded width */
+    readonly sidebarWidth: 240;
+    /** Sidebar collapsed width */
+    readonly sidebarCollapsedWidth: 72;
+    /** Top header height */
+    readonly headerHeight: 56;
+    /** Maximum content area width */
+    readonly contentMaxWidth: 1440;
+};
+/**
+ * Combined semantic token object.
+ *
+ * @deprecated Prefer the named exports (`semanticColors`, `semanticSpacing`,
+ * etc.) for better tree-shaking and clearer imports. This combined object
+ * is preserved for backward compatibility only.
+ */
+declare const semanticTokens: {
+    readonly colors: {
+        /** Primary brand action color */
+        readonly primary: "#0ea5e9";
+        /** Primary hover state */
+        readonly primaryHover: "#0284c7";
+        /** Primary active/pressed state */
+        readonly primaryActive: "#0369a1";
+        /** Primary tinted background (selected rows, badges) */
+        readonly primaryBg: "#f0f9ff";
+        /** Secondary brand color */
+        readonly secondary: "#a855f7";
+        /** Secondary hover state */
+        readonly secondaryHover: "#9333ea";
+        /** Positive outcome (approvals, passing checks) */
+        readonly success: "#22c55e";
+        /** Caution state (pending review, warnings) */
+        readonly warning: "#f59e0b";
+        /** Destructive/failure state */
+        readonly error: "#ef4444";
+        /** Informational state */
+        readonly info: "#3b82f6";
+        /** Financial gain */
+        readonly profit: "#22c55e";
+        /** Financial loss */
+        readonly loss: "#ef4444";
+        /** Compliance approved */
+        readonly approved: "#16a34a";
+        /** Compliance pending */
+        readonly pending: "#d97706";
+        /** Compliance rejected */
+        readonly rejected: "#dc2626";
+        /** Security verified */
+        readonly secure: "#16a34a";
+        /** Security compromised */
+        readonly insecure: "#dc2626";
+        /** Primary body text */
+        readonly textPrimary: "#171717";
+        /** Secondary/supporting text */
+        readonly textSecondary: "#525252";
+        /** Tertiary/label text */
+        readonly textTertiary: "#737373";
+        /** Muted/placeholder text */
+        readonly textMuted: "#a3a3a3";
+        /** Text on dark backgrounds */
+        readonly textInverse: "#fafafa";
+        /** Page-level background */
+        readonly bgPage: "#fafafa";
+        /** Card/surface background */
+        readonly bgSurface: "#ffffff";
+        /** Surface hover state */
+        readonly bgSurfaceHover: "#f5f5f5";
+        /** Tertiary surface (nested cards, wells) */
+        readonly bgSurfaceTertiary: "#e5e5e5";
+        /** Inverse background (dark sections) */
+        readonly bgInverse: "#171717";
+        /** Sidebar background */
+        readonly bgSidebar: "#ffffff";
+        /** Header background */
+        readonly bgHeader: "#ffffff";
+        /** Default border */
+        readonly border: "#e5e5e5";
+        /** Light/subtle border */
+        readonly borderLight: "#f5f5f5";
+        /** Emphasized border */
+        readonly borderSecondary: "#d4d4d4";
+        /** Focus ring border */
+        readonly borderFocus: "#0ea5e9";
+        /** Default link color */
+        readonly link: "#0284c7";
+        /** Link hover state */
+        readonly linkHover: "#0369a1";
+    };
+    readonly spacing: {
+        /** Horizontal page gutter */
+        readonly pageGutter: 24;
+        /** Internal card padding */
+        readonly cardPadding: 16;
+        /** Gap between page sections */
+        readonly sectionGap: 24;
+        /** Gap between sibling components */
+        readonly componentGap: 12;
+        /** Inline element gap (icon + label) */
+        readonly inlineGap: 8;
+        /** Per-component spacing presets */
+        readonly component: {
+            readonly button: {
+                readonly paddingX: 16;
+                readonly paddingY: 8;
+                readonly gap: 8;
+            };
+            readonly input: {
+                readonly paddingX: 12;
+                readonly paddingY: 8;
+            };
+            readonly card: {
+                readonly padding: 24;
+                readonly gap: 16;
+            };
+            readonly form: {
+                readonly fieldGap: 16;
+                readonly sectionGap: 32;
+                readonly labelGap: 8;
+            };
+            readonly modal: {
+                readonly padding: 24;
+                readonly gap: 16;
+            };
+            readonly table: {
+                readonly cellPadding: 16;
+                readonly headerPadding: 16;
+            };
+        };
+        /** Layout-level spacing presets */
+        readonly layout: {
+            readonly container: {
+                readonly paddingX: 16;
+                readonly paddingY: 24;
+            };
+            readonly section: {
+                readonly marginY: 48;
+                readonly gap: 32;
+            };
+            readonly page: {
+                readonly marginY: 64;
+                readonly paddingX: 24;
+            };
+        };
+    };
+    readonly typography: {
+        /** Default sans-serif font stack */
+        readonly fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
+        /** Monospace font stack for code */
+        readonly fontFamilyCode: "JetBrains Mono, Fira Code, Consolas, monospace";
+        /** Serif font stack for editorial content */
+        readonly fontFamilySerif: "Georgia, 'Times New Roman', serif";
+        /** Display type scale — hero sections, feature numbers */
+        readonly display: {
+            readonly lg: {
+                readonly fontSize: 48;
+                readonly fontWeight: 700;
+                readonly lineHeight: 1.2;
+                readonly letterSpacing: "-0.025em";
+            };
+            readonly md: {
+                readonly fontSize: 36;
+                readonly fontWeight: 700;
+                readonly lineHeight: 1.2;
+                readonly letterSpacing: "0em";
+            };
+            readonly sm: {
+                readonly fontSize: 30;
+                readonly fontWeight: 600;
+                readonly lineHeight: 1.2;
+                readonly letterSpacing: "0em";
+            };
+        };
+        /** Heading type scale — page/section/card headings */
+        readonly heading: {
+            readonly h1: {
+                readonly fontSize: 30;
+                readonly fontWeight: 700;
+                readonly lineHeight: 1.2;
+            };
+            readonly h2: {
+                readonly fontSize: 24;
+                readonly fontWeight: 600;
+                readonly lineHeight: 1.2;
+            };
+            readonly h3: {
+                readonly fontSize: 20;
+                readonly fontWeight: 600;
+                readonly lineHeight: 1.5;
+            };
+            readonly h4: {
+                readonly fontSize: 18;
+                readonly fontWeight: 500;
+                readonly lineHeight: 1.5;
+            };
+        };
+        /** Body type scale — paragraphs, descriptions */
+        readonly body: {
+            readonly lg: {
+                readonly fontSize: 18;
+                readonly fontWeight: 400;
+                readonly lineHeight: 1.7;
+            };
+            readonly md: {
+                readonly fontSize: 16;
+                readonly fontWeight: 400;
+                readonly lineHeight: 1.5;
+            };
+            readonly sm: {
+                readonly fontSize: 14;
+                readonly fontWeight: 400;
+                readonly lineHeight: 1.5;
+            };
+        };
+        /** Caption — footnotes, timestamps, fine print */
+        readonly caption: {
+            readonly fontSize: 12;
+            readonly fontWeight: 400;
+            readonly lineHeight: 1.5;
+        };
+        /** Button label type scale */
+        readonly button: {
+            readonly lg: {
+                readonly fontSize: 18;
+                readonly fontWeight: 500;
+                readonly lineHeight: 1.5;
+            };
+            readonly md: {
+                readonly fontSize: 16;
+                readonly fontWeight: 500;
+                readonly lineHeight: 1.5;
+            };
+            readonly sm: {
+                readonly fontSize: 14;
+                readonly fontWeight: 500;
+                readonly lineHeight: 1.5;
+            };
+        };
+    };
+    readonly radii: {
+        /** Default component radius */
+        readonly component: 4;
+        /** Card/panel radius */
+        readonly card: 8;
+        /** Button radius */
+        readonly button: 4;
+        /** Input/select radius */
+        readonly input: 4;
+        /** Tag/badge radius */
+        readonly tag: 2;
+        /** Avatar — fully round */
+        readonly avatar: 9999;
+    };
+    readonly shadows: {
+        /** Card/panel elevation */
+        readonly card: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
+        /** Dropdown/popover elevation */
+        readonly dropdown: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+        /** Modal/dialog elevation */
+        readonly modal: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
+    };
+    readonly layout: {
+        /** Sidebar expanded width */
+        readonly sidebarWidth: 240;
+        /** Sidebar collapsed width */
+        readonly sidebarCollapsedWidth: 72;
+        /** Top header height */
+        readonly headerHeight: 56;
+        /** Maximum content area width */
+        readonly contentMaxWidth: 1440;
+    };
+};
+type SemanticColors = typeof semanticColors;
+type SemanticSpacing = typeof semanticSpacing;
+type SemanticTypography = typeof semanticTypography;
+type SemanticRadii = typeof semanticRadii;
+type SemanticShadows = typeof semanticShadows;
+type SemanticLayout = typeof semanticLayout;
+type SemanticTokens = typeof semanticTokens;
+/** Union of all semantic color keys. */
+type SemanticColorKey = keyof typeof semanticColors;
+/** Union of top-level semantic spacing keys. */
+type SemanticSpacingKey = keyof typeof semanticSpacing;
+
+/**
+ * @module dark
+ *
+ * Dark theme color overrides. Every key in {@link semanticColors} has a
+ * corresponding override here. Components never read these directly —
+ * the theme engine ({@link @gtcx/theme}) applies them automatically
+ * when `mode === 'dark'`.
+ *
+ * Design rationale:
+ * - Text uses lighter shades (50–400) for readability on dark backgrounds.
+ * - Backgrounds use 800–950 to preserve depth hierarchy.
+ * - Accent colors shift to 400 for better contrast on dark surfaces.
+ * - Borders use 700–800 for subtle structure without harshness.
+ */
+/**
+ * Dark mode overrides for {@link semanticColors}.
+ *
+ * Structure intentionally mirrors `semanticColors` so the theme engine
+ * can validate completeness at build time.
+ */
+declare const darkSemanticColors: {
+    readonly primary: "#38bdf8";
+    readonly primaryHover: "#7dd3fc";
+    readonly primaryActive: "#0ea5e9";
+    readonly primaryBg: "#082f49";
+    readonly secondary: "#c084fc";
+    readonly secondaryHover: "#d8b4fe";
+    readonly success: "#4ade80";
+    readonly warning: "#fbbf24";
+    readonly error: "#f87171";
+    readonly info: "#60a5fa";
+    readonly profit: "#4ade80";
+    readonly loss: "#f87171";
+    readonly approved: "#4ade80";
+    readonly pending: "#fbbf24";
+    readonly rejected: "#f87171";
+    readonly secure: "#4ade80";
+    readonly insecure: "#f87171";
+    readonly textPrimary: "#fafafa";
+    readonly textSecondary: "#d4d4d4";
+    readonly textTertiary: "#a3a3a3";
+    readonly textMuted: "#737373";
+    readonly textInverse: "#171717";
+    readonly bgPage: "#0a0a0a";
+    readonly bgSurface: "#171717";
+    readonly bgSurfaceHover: "#262626";
+    readonly bgSurfaceTertiary: "#404040";
+    readonly bgInverse: "#fafafa";
+    readonly bgSidebar: "#171717";
+    readonly bgHeader: "#171717";
+    readonly border: "#404040";
+    readonly borderLight: "#262626";
+    readonly borderSecondary: "#525252";
+    readonly borderFocus: "#38bdf8";
+    readonly link: "#38bdf8";
+    readonly linkHover: "#7dd3fc";
+};
+/**
+ * Legacy dark colors export.
+ *
+ * @deprecated Use {@link darkSemanticColors} instead. This nested structure
+ * is preserved for backward compatibility only.
+ */
+declare const darkColors: {
+    readonly text: {
+        readonly primary: "#fafafa";
+        readonly secondary: "#d4d4d4";
+        readonly tertiary: "#a3a3a3";
+    };
+    readonly background: {
+        readonly primary: "#0a0a0a";
+        readonly secondary: "#171717";
+        readonly tertiary: "#404040";
+    };
+    readonly border: {
+        readonly primary: "#404040";
+        readonly secondary: "#525252";
+    };
+};
+type DarkSemanticColors = typeof darkSemanticColors;
+
+export { type BorderRadiusPrimitives, type BreakpointKey, type BreakpointPrimitives, type ColorPrimitives, type ColorScaleKey, type ColorShade, type DarkSemanticColors, type FocusPrimitives, type FontFamilyPrimitives, type FontSizePrimitives, type FontWeightPrimitives, type LetterSpacingPrimitives, type LineHeightPrimitives, type MotionPrimitives, type OpacityPrimitives, type SemanticColorKey, type SemanticColors, type SemanticLayout, type SemanticRadii, type SemanticShadows, type SemanticSpacing, type SemanticSpacingKey, type SemanticTokens, type SemanticTypography, type ShadowPrimitives, type SpacingPrimitives, type TransitionPrimitives, type ZIndexPrimitives, borderRadiusPrimitives, breakpointPrimitives, colorPrimitives, darkColors, darkSemanticColors, focusPrimitives, fontFamilyPrimitives, fontSizePrimitives, fontWeightPrimitives, letterSpacingPrimitives, lineHeightPrimitives, motionPrimitives, opacityPrimitives, semanticColors, semanticLayout, semanticRadii, semanticShadows, semanticSpacing, semanticTokens, semanticTypography, shadowPrimitives, spacingPrimitives, transitionPrimitives, zIndexPrimitives };