@nobak/design-system 1.0.0

package/styles/generated-tokens.css

@@ -0,0 +1,677 @@
+/**
+ * Auto-generated Theme Tokens
+ *
+ * DO NOT EDIT THIS FILE DIRECTLY!
+ * This file is automatically generated from TypeScript tokens.
+ *
+ * To modify theme variables:
+ * 1. Edit files in src/tokens/
+ * 2. Run: npm run generate:tokens
+ *
+ * Generated: 2025-11-09T13:21:04.014Z
+ */
+
+:root {
+
+  /* Color Tokens */
+  --color-red-50: #ffe1e6;
+  --color-red-100: #ffdde2;
+  --color-red-150: #ffd5db;
+  --color-red-200: #ffcdd5;
+  --color-red-250: #ffc5ce;
+  --color-red-300: #ffbdc8;
+  --color-red-350: #ffb3c0;
+  --color-red-400: #ffa9b9;
+  --color-red-450: #ff9fb1;
+  --color-red-500: #ff95a9;
+  --color-red-550: #ff89a0;
+  --color-red-600: #ff7d96;
+  --color-red-650: #ff6f8b;
+  --color-red-700: #ff5f80;
+  --color-red-750: #ff4d72;
+  --color-red-800: #ff3162;
+  --color-red-850: #ff1f50;
+  --color-red-900: #ff0037;
+  --color-red-925: #eb0032;
+  --color-red-950: #d10028;
+  --color-red-975: #b5001f;
+  --color-orange-50: #ffe7d6;
+  --color-orange-100: #ffe3d1;
+  --color-orange-150: #ffddca;
+  --color-orange-200: #ffd6be;
+  --color-orange-250: #ffd0b2;
+  --color-orange-300: #ffc9aa;
+  --color-orange-350: #ffc1a0;
+  --color-orange-400: #ffb891;
+  --color-orange-450: #ffaf83;
+  --color-orange-500: #ffa675;
+  --color-orange-550: #ff9d63;
+  --color-orange-600: #ff9152;
+  --color-orange-650: #ff843b;
+  --color-orange-700: #ff771f;
+  --color-orange-750: #f66a00;
+  --color-orange-800: #e55800;
+  --color-orange-850: #cd4f00;
+  --color-orange-900: #b44400;
+  --color-orange-925: #9f3c00;
+  --color-orange-950: #8a3600;
+  --color-orange-975: #762e00;
+  --color-green-50: #d4f4dd;
+  --color-green-100: #cef2d8;
+  --color-green-150: #c6efd2;
+  --color-green-200: #bdedc9;
+  --color-green-250: #b3eabf;
+  --color-green-300: #a9e7b9;
+  --color-green-350: #9de3af;
+  --color-green-400: #90e0a4;
+  --color-green-450: #81dd97;
+  --color-green-500: #71d98b;
+  --color-green-550: #5ed67b;
+  --color-green-600: #48d06d;
+  --color-green-650: #2bcb59;
+  --color-green-700: #00c740;
+  --color-green-750: #00b637;
+  --color-green-800: #00a032;
+  --color-green-850: #008e2b;
+  --color-green-900: #007d26;
+  --color-green-925: #006f22;
+  --color-green-950: #00611d;
+  --color-green-975: #005519;
+  --color-blue-50: #d3e9fd;
+  --color-blue-100: #cde6fd;
+  --color-blue-150: #c4e1fc;
+  --color-blue-200: #bbddfc;
+  --color-blue-250: #b0d8fb;
+  --color-blue-300: #a5d4fb;
+  --color-blue-350: #97cefa;
+  --color-blue-400: #89c9fa;
+  --color-blue-450: #77c3f9;
+  --color-blue-500: #64bdf9;
+  --color-blue-550: #4ab5f8;
+  --color-blue-600: #2caff8;
+  --color-blue-650: #00a6f7;
+  --color-blue-700: #009ef7;
+  --color-blue-750: #008ddc;
+  --color-blue-800: #007fc7;
+  --color-blue-850: #0071b0;
+  --color-blue-900: #00649b;
+  --color-blue-925: #005a8b;
+  --color-blue-950: #004d78;
+  --color-blue-975: #004266;
+  --color-neutral-50: #f2f2f2;
+  --color-neutral-100: #ededed;
+  --color-neutral-150: #e8e8e8;
+  --color-neutral-200: #e3e3e3;
+  --color-neutral-250: #dedede;
+  --color-neutral-300: #d9d9d9;
+  --color-neutral-350: #d3d3d3;
+  --color-neutral-400: #cccccc;
+  --color-neutral-450: #c5c5c5;
+  --color-neutral-500: #bdbdbd;
+  --color-neutral-550: #b4b4b4;
+  --color-neutral-600: #ababab;
+  --color-neutral-650: #a1a1a1;
+  --color-neutral-700: #969696;
+  --color-neutral-750: #898989;
+  --color-neutral-800: #7c7c7c;
+  --color-neutral-850: #6c6c6c;
+  --color-neutral-900: #5c5c5c;
+  --color-neutral-925: #4f4f4f;
+  --color-neutral-950: #3d3d3d;
+  --color-neutral-975: #2e2e2e;
+  --color-beige-50: #f4f1ed;
+  --color-beige-100: #f1ede8;
+  --color-beige-150: #ede8e2;
+  --color-beige-200: #e9e3db;
+  --color-beige-250: #e5ded4;
+  --color-beige-300: #e0d9ce;
+  --color-beige-350: #dbd3c6;
+  --color-beige-400: #d5ccbd;
+  --color-beige-450: #cfc5b3;
+  --color-beige-500: #c8bda9;
+  --color-beige-550: #c0b49c;
+  --color-beige-600: #b9ac91;
+  --color-beige-650: #b0a282;
+  --color-beige-700: #a79872;
+  --color-beige-750: #9b8b5f;
+  --color-beige-800: #8f7f4e;
+  --color-beige-850: #7f6e3d;
+  --color-beige-900: #706328;
+  --color-beige-925: #635721;
+  --color-beige-950: #564c1c;
+  --color-beige-975: #4a4117;
+  --color-primary-50: #ffe1e6;
+  --color-primary-100: #ffdde2;
+  --color-primary-150: #ffd5db;
+  --color-primary-200: #ffcdd5;
+  --color-primary-250: #ffc5ce;
+  --color-primary-300: #ffbdc8;
+  --color-primary-350: #ffb3c0;
+  --color-primary-400: #ffa9b9;
+  --color-primary-450: #ff9fb1;
+  --color-primary-500: #ff95a9;
+  --color-primary-550: #ff89a0;
+  --color-primary-600: #ff7d96;
+  --color-primary-650: #ff6f8b;
+  --color-primary-700: #ff5f80;
+  --color-primary-750: #ff4d72;
+  --color-primary-800: #ff3162;
+  --color-primary-850: #ff1f50;
+  --color-primary-900: #ff0037;
+  --color-primary-925: #eb0032;
+  --color-primary-950: #d10028;
+  --color-primary-975: #b5001f;
+  --color-gray-50: #f2f2f2;
+  --color-gray-100: #ededed;
+  --color-gray-150: #e8e8e8;
+  --color-gray-200: #e3e3e3;
+  --color-gray-250: #dedede;
+  --color-gray-300: #d9d9d9;
+  --color-gray-350: #d3d3d3;
+  --color-gray-400: #cccccc;
+  --color-gray-450: #c5c5c5;
+  --color-gray-500: #bdbdbd;
+  --color-gray-550: #b4b4b4;
+  --color-gray-600: #ababab;
+  --color-gray-650: #a1a1a1;
+  --color-gray-700: #969696;
+  --color-gray-750: #898989;
+  --color-gray-800: #7c7c7c;
+  --color-gray-850: #6c6c6c;
+  --color-gray-900: #5c5c5c;
+  --color-gray-925: #4f4f4f;
+  --color-gray-950: #3d3d3d;
+  --color-gray-975: #2e2e2e;
+  --color-neomorphic-base: #e0e5ec;
+  --color-neomorphic-baseLight: #ecf0f3;
+  --color-neomorphic-baseDark: #d1d9e6;
+  --color-neomorphic-shadowDark: rgba(163, 177, 198, 0.7);
+  --color-neomorphic-shadowDarkStrong: rgba(163, 177, 198, 0.9);
+  --color-neomorphic-shadowLight: rgba(255, 255, 255, 0.8);
+  --color-neomorphic-shadowLightStrong: rgba(255, 255, 255, 0.95);
+  --color-neomorphic-borderLight: rgba(255, 255, 255, 0.85);
+  --color-neomorphic-borderLightBright: rgba(255, 255, 255, 0.9);
+  --color-neomorphic-borderDark: rgba(120, 135, 155, 0.65);
+  --color-neomorphic-borderDarkStrong: rgba(130, 145, 165, 0.6);
+  --color-neomorphic-lightSpotPrimary: rgba(255, 255, 255, 0.4);
+  --color-neomorphic-lightSpotSecondary: rgba(120, 140, 160, 0.2);
+  --color-neomorphic-lightSpotAmbient: rgba(255, 255, 255, 0.15);
+  --color-neomorphic-gradientLight1: #d8dde5;
+  --color-neomorphic-gradientLight2: #e0e5ec;
+  --color-neomorphic-gradientLight3: #e3e8ef;
+  --color-neomorphic-gradientLight4: #dfe4eb;
+  --color-neomorphic-gradientLight5: #d9dee7;
+  --color-background: #f2f2f2;
+  --color-backgroundSubtle: #ededed;
+  --color-backgroundElevated: #ffffff;
+  --color-surface: #ffffff;
+  --color-surfaceSubtle: #ededed;
+  --color-surfaceHover: #e3e3e3;
+  --color-border: #e3e3e3;
+  --color-borderSubtle: #ededed;
+  --color-borderStrong: #d9d9d9;
+  --color-text: #3d3d3d;
+  --color-textSubtle: #7c7c7c;
+  --color-textMuted: #ababab;
+  --color-textDisabled: #cccccc;
+  --color-textInverse: #ffffff;
+  --color-primary: #ff95a9;
+  --color-primaryHover: #ff7d96;
+  --color-primaryActive: #ff5f80;
+  --color-primaryDisabled: #ffbdc8;
+  --color-success: #71d98b;
+  --color-successSubtle: #d4f4dd;
+  --color-successHover: #48d06d;
+  --color-warning: #ffa675;
+  --color-warningSubtle: #ffe7d6;
+  --color-warningHover: #ff9152;
+  --color-error: #ff3162;
+  --color-errorSubtle: #ffe1e6;
+  --color-errorHover: #ff0037;
+  --color-info: #64bdf9;
+  --color-infoSubtle: #d3e9fd;
+  --color-infoHover: #2caff8;
+  --color-focus: #64bdf9;
+  --color-focusRing: rgba(100, 189, 249, 0.5);
+  --color-brand-rebellion: #ff95a9;
+  --color-brand-concrete: #3d3d3d;
+  --color-brand-blockchain: #64bdf9;
+  --color-brand-growth: #71d98b;
+  --color-brand-caution: #ffa675;
+  --color-brand-earth: #c8bda9;
+  --color-background-default: #f2f2f2;
+  --color-background-subtle: #ededed;
+  --color-background-elevated: #FFFFFF;
+  --color-background-inverse: #5c5c5c;
+  --color-surface-default: #FFFFFF;
+  --color-surface-subtle: #f2f2f2;
+  --color-surface-hover: #ededed;
+  --color-surface-pressed: #e3e3e3;
+  --color-surface-disabled: #ededed;
+  --color-surface-inverse: #5c5c5c;
+  --color-content-primary: #5c5c5c;
+  --color-content-secondary: #ababab;
+  --color-content-tertiary: #bdbdbd;
+  --color-content-disabled: #cccccc;
+  --color-content-inverse: #FFFFFF;
+  --color-content-placeholder: #cccccc;
+  --color-border-default: #e3e3e3;
+  --color-border-subtle: #ededed;
+  --color-border-strong: #d9d9d9;
+  --color-border-disabled: #e3e3e3;
+  --color-border-focus: #64bdf9;
+  --color-border-error: #ff95a9;
+  --color-border-success: #71d98b;
+  --color-border-warning: #ffa675;
+  --color-interactive-primary: #ff95a9;
+  --color-interactive-primaryHover: #ff7d96;
+  --color-interactive-primaryActive: #ff5f80;
+  --color-interactive-primaryDisabled: #ffcdd5;
+  --color-interactive-primarySubtle: #ffe1e6;
+  --color-interactive-secondary: #5c5c5c;
+  --color-interactive-secondaryHover: #7c7c7c;
+  --color-interactive-secondaryActive: #969696;
+  --color-interactive-secondaryDisabled: #d9d9d9;
+  --color-interactive-secondarySubtle: #ededed;
+  --color-interactive-tertiary: transparent;
+  --color-interactive-tertiaryHover: #ededed;
+  --color-interactive-tertiaryActive: #e3e3e3;
+  --color-interactive-link: #64bdf9;
+  --color-interactive-linkHover: #2caff8;
+  --color-interactive-linkVisited: #009ef7;
+  --color-interactive-focus: #64bdf9;
+  --color-interactive-focusRing: rgba(59, 130, 246, 0.5);
+  --color-feedback-success: #71d98b;
+  --color-feedback-successHover: #48d06d;
+  --color-feedback-successSubtle: #d4f4dd;
+  --color-feedback-successBorder: #bdedc9;
+  --color-feedback-warning: #ffa675;
+  --color-feedback-warningHover: #ff9152;
+  --color-feedback-warningSubtle: #ffe7d6;
+  --color-feedback-warningBorder: #ffd6be;
+  --color-feedback-error: #ff95a9;
+  --color-feedback-errorHover: #ff7d96;
+  --color-feedback-errorSubtle: #ffe1e6;
+  --color-feedback-errorBorder: #ffcdd5;
+  --color-feedback-info: #64bdf9;
+  --color-feedback-infoHover: #2caff8;
+  --color-feedback-infoSubtle: #d3e9fd;
+  --color-feedback-infoBorder: #bbddfc;
+  --color-overlay-backdrop: rgba(0, 0, 0, 0.5);
+  --color-overlay-backdropLight: rgba(0, 0, 0, 0.25);
+  --color-overlay-backdropHeavy: rgba(0, 0, 0, 0.75);
+  --color-overlay-scrim: rgba(0, 0, 0, 0.1);
+  --color-special-profit: #71d98b;
+  --color-special-loss: #ff95a9;
+  --color-special-highlight: #ffd6be;
+  --color-special-selection: #cde6fd;
+  --color-special-skeleton: #e3e3e3;
+  --color-special-skeletonShimmer: #ededed;
+
+  /* Lighting Tokens */
+  --lighting-topLit-surface: #f2f2f2;
+  --lighting-topLit-border: #e3e3e3;
+  --lighting-topLit-text: #5c5c5c;
+  --lighting-topLit-accent: #ff95a9;
+  --lighting-topLit-shadow: rgba(0, 0, 0, 0.05);
+  --lighting-frontLit-surface: #FFFFFF;
+  --lighting-frontLit-border: #d9d9d9;
+  --lighting-frontLit-text: #5c5c5c;
+  --lighting-frontLit-accent: #ff95a9;
+  --lighting-frontLit-shadow: rgba(0, 0, 0, 0.08);
+  --lighting-sideLit-surface: #ededed;
+  --lighting-sideLit-border: #d9d9d9;
+  --lighting-sideLit-text: #969696;
+  --lighting-sideLit-accent: #ababab;
+  --lighting-sideLit-shadow: rgba(0, 0, 0, 0.04);
+  --lighting-recessed-surface: #5c5c5c;
+  --lighting-recessed-border: #969696;
+  --lighting-recessed-text: #f2f2f2;
+  --lighting-recessed-accent: #89c9fa;
+  --lighting-recessed-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
+  --lighting-recessed-glow: rgba(59, 130, 246, 0.3);
+  --lighting-elevated-surface: #f2f2f2;
+  --lighting-elevated-border: #cccccc;
+  --lighting-elevated-text: #5c5c5c;
+  --lighting-elevated-accent: #ff7d96;
+  --lighting-elevated-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  --lighting-elevated-rimLight: #ededed;
+  --lighting-backlit-surface: #ff95a9;
+  --lighting-backlit-border: #ff7d96;
+  --lighting-backlit-text: #FFFFFF;
+  --lighting-backlit-accent: #FFFFFF;
+  --lighting-backlit-glow: rgba(255, 59, 45, 0.4);
+  --lighting-backlit-shadow: 0 0 12px rgba(255, 59, 45, 0.3);
+  --lighting-shadowed-surface: #e3e3e3;
+  --lighting-shadowed-border: #d9d9d9;
+  --lighting-shadowed-text: #ababab;
+  --lighting-shadowed-accent: #bdbdbd;
+  --lighting-shadowed-shadow: none;
+  --lighting-glossy-surface: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%);
+  --lighting-glossy-border: rgba(255, 255, 255, 0.3);
+  --lighting-glossy-text: #5c5c5c;
+  --lighting-glossy-accent: #ff95a9;
+  --lighting-glossy-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+  --lighting-glossy-reflection: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%);
+  --lighting-glossy-backdrop: blur(12px);
+  --lighting-matte-surface: #ededed;
+  --lighting-matte-border: #cccccc;
+  --lighting-matte-text: #7c7c7c;
+  --lighting-matte-accent: #969696;
+  --lighting-matte-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+  --lighting-matte-texture: repeating-linear-gradient(90deg, transparent 0px, rgba(0,0,0,0.02) 1px, transparent 2px);
+
+  /* Button Component */
+  --button-primary-background: #ff95a9;
+  --button-primary-backgroundHover: #ff7d96;
+  --button-primary-backgroundActive: #ff5f80;
+  --button-primary-backgroundDisabled: #ffcdd5;
+  --button-primary-text: #FFFFFF;
+  --button-primary-textDisabled: #cccccc;
+  --button-primary-border: #ff95a9;
+  --button-primary-borderHover: #ff7d96;
+  --button-primary-borderDisabled: #e3e3e3;
+  --button-secondary-background: #FFFFFF;
+  --button-secondary-backgroundHover: #ededed;
+  --button-secondary-backgroundActive: #e3e3e3;
+  --button-secondary-backgroundDisabled: #ededed;
+  --button-secondary-text: #5c5c5c;
+  --button-secondary-textDisabled: #cccccc;
+  --button-secondary-border: #e3e3e3;
+  --button-secondary-borderHover: #d9d9d9;
+  --button-secondary-borderDisabled: #e3e3e3;
+  --button-tertiary-background: transparent;
+  --button-tertiary-backgroundHover: #ededed;
+  --button-tertiary-backgroundActive: #e3e3e3;
+  --button-tertiary-backgroundDisabled: transparent;
+  --button-tertiary-text: #5c5c5c;
+  --button-tertiary-textDisabled: #cccccc;
+  --button-tertiary-border: transparent;
+  --button-danger-background: #ff95a9;
+  --button-danger-backgroundHover: #ff7d96;
+  --button-danger-backgroundActive: #ff95a9;
+  --button-danger-backgroundDisabled: #ffe1e6;
+  --button-danger-text: #FFFFFF;
+  --button-danger-textDisabled: #cccccc;
+  --button-danger-border: #ff95a9;
+  --button-success-background: #71d98b;
+  --button-success-backgroundHover: #48d06d;
+  --button-success-backgroundActive: #71d98b;
+  --button-success-text: #FFFFFF;
+  --button-success-border: #71d98b;
+
+  /* Input Component */
+  --input-background: #FFFFFF;
+  --input-backgroundHover: #FFFFFF;
+  --input-backgroundFocus: #FFFFFF;
+  --input-backgroundDisabled: #ededed;
+  --input-text: #5c5c5c;
+  --input-textPlaceholder: #cccccc;
+  --input-textDisabled: #cccccc;
+  --input-border: #e3e3e3;
+  --input-borderHover: #d9d9d9;
+  --input-borderFocus: #64bdf9;
+  --input-borderDisabled: #e3e3e3;
+  --input-borderError: #ff95a9;
+
+  /* Table Component */
+  --table-header-background: #ededed;
+  --table-header-backgroundHover: #ededed;
+  --table-header-text: #5c5c5c;
+  --table-header-border: #e3e3e3;
+  --table-row-background: #FFFFFF;
+  --table-row-backgroundHover: #ededed;
+  --table-row-backgroundSelected: #ffe1e6;
+  --table-row-backgroundStriped: #ededed;
+  --table-row-text: #5c5c5c;
+  --table-row-textSecondary: #ababab;
+  --table-row-border: #ededed;
+  --table-cell-background: transparent;
+  --table-cell-text: #5c5c5c;
+  --table-cell-border: #ededed;
+
+  /* Card Component */
+  --card-default-background: #FFFFFF;
+  --card-default-backgroundHover: #FFFFFF;
+  --card-default-text: #5c5c5c;
+  --card-default-border: #e3e3e3;
+  --card-default-shadow: undefined;
+  --card-elevated-background: #FFFFFF;
+  --card-elevated-text: #5c5c5c;
+  --card-elevated-border: #ededed;
+  --card-elevated-shadow: undefined;
+
+  /* Modal Component */
+  --modal-backdrop: rgba(0, 0, 0, 0.5);
+  --modal-background: #FFFFFF;
+  --modal-text: #5c5c5c;
+  --modal-border: #ededed;
+  --modal-shadow: undefined;
+  --modal-header-background: #FFFFFF;
+  --modal-header-text: #5c5c5c;
+  --modal-header-border: #e3e3e3;
+  --modal-footer-background: #f2f2f2;
+  --modal-footer-border: #e3e3e3;
+
+  /* Badge Component */
+  --badge-default-background: #f2f2f2;
+  --badge-default-text: #5c5c5c;
+  --badge-default-border: #ededed;
+  --badge-primary-background: #ffe1e6;
+  --badge-primary-text: #ff95a9;
+  --badge-primary-border: #ff95a9;
+  --badge-success-background: #d4f4dd;
+  --badge-success-text: #71d98b;
+  --badge-success-border: #bdedc9;
+  --badge-warning-background: #ffe7d6;
+  --badge-warning-text: #ffa675;
+  --badge-warning-border: #ffd6be;
+  --badge-error-background: #ffe1e6;
+  --badge-error-text: #ff95a9;
+  --badge-error-border: #ffcdd5;
+  --badge-info-background: #d3e9fd;
+  --badge-info-text: #64bdf9;
+  --badge-info-border: #bbddfc;
+
+  /* Toast Component */
+  --toast-default-background: #FFFFFF;
+  --toast-default-text: #5c5c5c;
+  --toast-default-border: #e3e3e3;
+  --toast-default-shadow: undefined;
+  --toast-success-background: #d4f4dd;
+  --toast-success-text: #5c5c5c;
+  --toast-success-border: #bdedc9;
+  --toast-success-icon: #71d98b;
+  --toast-warning-background: #ffe7d6;
+  --toast-warning-text: #5c5c5c;
+  --toast-warning-border: #ffd6be;
+  --toast-warning-icon: #ffa675;
+  --toast-error-background: #ffe1e6;
+  --toast-error-text: #5c5c5c;
+  --toast-error-border: #ffcdd5;
+  --toast-error-icon: #ff95a9;
+  --toast-info-background: #d3e9fd;
+  --toast-info-text: #5c5c5c;
+  --toast-info-border: #bbddfc;
+  --toast-info-icon: #64bdf9;
+
+  /* Tooltip Component */
+  --tooltip-background: #5c5c5c;
+  --tooltip-text: #FFFFFF;
+  --tooltip-border: #e3e3e3;
+  --tooltip-shadow: undefined;
+
+  /* Link Component */
+  --link-text: #64bdf9;
+  --link-textHover: #2caff8;
+  --link-textVisited: #009ef7;
+  --link-textDisabled: #cccccc;
+  --link-underline: #64bdf9;
+
+  /* Skeleton Component */
+  --skeleton-background: #e3e3e3;
+  --skeleton-shimmer: #ededed;
+
+  /* Typography */
+  --font-primary: "Arboria", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --font-mono: "IBM Plex Mono": "SF Mono", Monaco, "Cascadia Code": "Roboto Mono", Consolas, "Courier New", monospace;
+  --font-display: "Arboria", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-black: 900;
+
+  /* Spacing */
+  --spacing-0: 0px;
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-3: 12px;
+  --spacing-4: 16px;
+  --spacing-5: 20px;
+  --spacing-6: 24px;
+  --spacing-7: 28px;
+  --spacing-8: 32px;
+  --spacing-9: 36px;
+  --spacing-10: 40px;
+  --spacing-11: 44px;
+  --spacing-12: 48px;
+  --spacing-14: 56px;
+  --spacing-16: 64px;
+  --spacing-20: 80px;
+  --spacing-24: 96px;
+  --spacing-28: 112px;
+  --spacing-32: 128px;
+  --spacing-36: 144px;
+  --spacing-40: 160px;
+  --spacing-44: 176px;
+  --spacing-48: 192px;
+  --spacing-52: 208px;
+  --spacing-56: 224px;
+  --spacing-60: 240px;
+  --spacing-64: 256px;
+  --spacing-72: 288px;
+  --spacing-80: 320px;
+  --spacing-96: 384px;
+  --spacing-px: 1px;
+  --spacing-0.5: 2px;
+  --spacing-componentGap: 16px;
+  --spacing-componentPadding: 24px;
+  --spacing-sectionGap: 48px;
+  --spacing-sectionPadding: 64px;
+  --spacing-containerPadding: 24px;
+  --spacing-containerGap: 32px;
+  --spacing-cardPadding: 24px;
+  --spacing-cardGap: 16px;
+  --spacing-formFieldGap: 16px;
+  --spacing-formSectionGap: 32px;
+  --spacing-listItemGap: 8px;
+  --spacing-listSectionGap: 24px;
+  --spacing-buttonPaddingX: 24px;
+  --spacing-buttonPaddingY: 12px;
+  --spacing-buttonGap: 8px;
+  --spacing-inputPaddingX: 16px;
+  --spacing-inputPaddingY: 12px;
+  --spacing-modalPadding: 32px;
+  --spacing-modalGap: 24px;
+  --spacing-navItemGap: 8px;
+  --spacing-navSectionGap: 24px;
+  --spacing-ma-tight: 8px;
+  --spacing-ma-comfortable: 16px;
+  --spacing-ma-spacious: 32px;
+  --spacing-ma-dramatic: 64px;
+
+  /* Shadows */
+  --shadow-none: none;
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
+  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.2);
+  --shadow-2xl: 0 16px 32px rgba(0, 0, 0, 0.25);
+  --shadow-3xl: 0 24px 48px rgba(0, 0, 0, 0.3);
+  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.1);
+  --shadow-innerLg: inset 0 4px 8px rgba(0, 0, 0, 0.15);
+  --shadow-primarySm: 0 2px 4px rgba(255, 59, 45, 0.2);
+  --shadow-primaryMd: 0 4px 8px rgba(255, 59, 45, 0.25);
+  --shadow-primaryLg: 0 8px 16px rgba(255, 59, 45, 0.3);
+  --shadow-blueSm: 0 2px 4px rgba(59, 130, 246, 0.2);
+  --shadow-blueMd: 0 4px 8px rgba(59, 130, 246, 0.25);
+  --shadow-blueLg: 0 8px 16px rgba(59, 130, 246, 0.3);
+  --shadow-card: 0 2px 4px rgba(0, 0, 0, 0.1);
+  --shadow-cardHover: 0 4px 8px rgba(0, 0, 0, 0.1);
+  --shadow-button: none;
+  --shadow-buttonHover: 0 2px 4px rgba(0, 0, 0, 0.1);
+  --shadow-buttonActive: inset 0 2px 4px rgba(0, 0, 0, 0.1);
+  --shadow-modal: 0 16px 32px rgba(0, 0, 0, 0.25);
+  --shadow-popover: 0 8px 16px rgba(0, 0, 0, 0.15);
+  --shadow-dropdown: 0 4px 8px rgba(0, 0, 0, 0.1);
+  --shadow-tooltip: 0 2px 4px rgba(0, 0, 0, 0.1);
+  --shadow-input: none;
+  --shadow-inputFocus: 0 2px 4px rgba(255, 59, 45, 0.2);
+  --shadow-inputError: 0 0 0 3px rgba(239, 68, 68, 0.1);
+  --shadow-navbar: 0 2px 4px rgba(0, 0, 0, 0.1);
+  --shadow-sidebar: 0 4px 8px rgba(0, 0, 0, 0.1);
+  --shadow-elevation-0: none;
+  --shadow-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-elevation-2: 0 2px 4px rgba(0, 0, 0, 0.1);
+  --shadow-elevation-3: 0 4px 8px rgba(0, 0, 0, 0.1);
+  --shadow-elevation-4: 0 8px 16px rgba(0, 0, 0, 0.15);
+  --shadow-elevation-5: 0 12px 24px rgba(0, 0, 0, 0.2);
+  --shadow-elevation-6: 0 16px 32px rgba(0, 0, 0, 0.25);
+  --shadow-elevation-7: 0 24px 48px rgba(0, 0, 0, 0.3);
+
+  /* Borders */
+  --border-width-0: 0px;
+  --border-width-1: 1px;
+  --border-width-2: 2px;
+  --border-width-4: 4px;
+  --border-width-8: 8px;
+  --border-radius-none: 0px;
+  --border-radius-sm: 2px;
+  --border-radius-md: 4px;
+  --border-radius-lg: 8px;
+  --border-radius-xl: 12px;
+  --border-radius-2xl: 16px;
+  --border-radius-3xl: 24px;
+  --border-radius-full: 9999px;
+
+  /* Other */
+  --line-height-tight: 1.1;
+  --line-height-snug: 1.25;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.6;
+  --line-height-loose: 1.75;
+  --letter-spacing-tighter: -0.02em;
+  --letter-spacing-tight: -0.01em;
+  --letter-spacing-normal: 0;
+  --letter-spacing-wide: 0.01em;
+  --letter-spacing-wider: 0.02em;
+  --letter-spacing-widest: 0.05em;
+  --duration-instant: 0ms;
+  --duration-fast: 150ms;
+  --duration-normal: 250ms;
+  --duration-slow: 350ms;
+  --duration-slower: 500ms;
+  --duration-slowest: 750ms;
+  --easing-linear: linear;
+  --easing-easeOut: cubic-bezier(0, 0, 0.2, 1);
+  --easing-easeOutQuad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --easing-easeOutCubic: cubic-bezier(0.215, 0.61, 0.355, 1);
+  --easing-easeIn: cubic-bezier(0.4, 0, 1, 1);
+  --easing-easeInQuad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+  --easing-easeInCubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  --easing-easeInOut: cubic-bezier(0.4, 0, 0.2, 1);
+  --easing-easeInOutQuad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
+  --easing-easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1);
+  --easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  --easing-sharp: cubic-bezier(0.4, 0, 0.6, 1);
+  --transition-default: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-fast: all 150ms cubic-bezier(0, 0, 0.2, 1);
+  --transition-slow: all 350ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-colors: color 250ms cubic-bezier(0.4, 0, 0.2, 1), background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-opacity: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-transform: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-shadow: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-all: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}