@ttdk-design-system/library-vue 0.0.0-stage → 1.0.0

package/src/core/theme/tokens.css

@@ -0,0 +1,663 @@
+/* ==========================================================================
+   TTDK Design System — Core Design Tokens
+   Design Token v4
+   Structure: Primitives → Mode Tokens (Light/Dark) → Sidebar → Spacing etc.
+   ========================================================================== */
+
+:root {
+  /* ========================================================================
+     PRIMITIVE COLOR RAMPS
+     ======================================================================== */
+
+  /* Blue */
+  --ttdk-color-blue-50: #fafcff;
+  --ttdk-color-blue-100: #ecf3fe;
+  --ttdk-color-blue-200: #dceafe;
+  --ttdk-color-blue-300: #84b4fb;
+  --ttdk-color-blue-400: #4d93fc;
+  --ttdk-color-blue-500: #0968f6;
+  --ttdk-color-blue-600: #0049b8;
+  --ttdk-color-blue-700: #002a69;
+  --ttdk-color-blue-800: #0e192a;
+  --ttdk-color-blue-900: #070e17;
+
+  /* Brand Blue */
+  --ttdk-color-brand-blue-100: #ebf3ff;
+  --ttdk-color-brand-blue-200: #cee6fe;
+  --ttdk-color-brand-blue-300: #98cafe;
+  --ttdk-color-brand-blue-400: #60adfe;
+  --ttdk-color-brand-blue-500: #3899fe;
+  --ttdk-color-brand-blue-600: #1e81e8;
+  --ttdk-color-brand-blue-700: #1968bd;
+  --ttdk-color-brand-blue-800: #144e8c;
+  --ttdk-color-brand-blue-900: #0d3255;
+
+  /* Brand Green */
+  --ttdk-color-brand-green-100: #e1fbfa;
+  --ttdk-color-brand-green-200: #b8edea;
+  --ttdk-color-brand-green-300: #80dcd8;
+  --ttdk-color-brand-green-400: #20d6cd;
+  --ttdk-color-brand-green-500: #16b3ac;
+  --ttdk-color-brand-green-600: #128f8a;
+  --ttdk-color-brand-green-700: #0d6b67;
+  --ttdk-color-brand-green-800: #094845;
+  --ttdk-color-brand-green-900: #062f2d;
+
+  /* Coral */
+  --ttdk-color-coral-50: #fffbfa;
+  --ttdk-color-coral-100: #fff5eb;
+  --ttdk-color-coral-200: #ffead3;
+  --ttdk-color-coral-300: #ffc382;
+  --ttdk-color-coral-400: #ff8806;
+  --ttdk-color-coral-500: #ec7303;
+  --ttdk-color-coral-600: #c15100;
+  --ttdk-color-coral-700: #562501;
+  --ttdk-color-coral-800: #2f1604;
+  --ttdk-color-coral-900: #170b02;
+
+  /* Green */
+  --ttdk-color-green-50: #fafffa;
+  --ttdk-color-green-100: #edfded;
+  --ttdk-color-green-200: #e0fae0;
+  --ttdk-color-green-300: #a6f0a5;
+  --ttdk-color-green-400: #4ce160;
+  --ttdk-color-green-500: #3cc14e;
+  --ttdk-color-green-600: #288034;
+  --ttdk-color-green-700: #1b561a;
+  --ttdk-color-green-800: #0c310d;
+  --ttdk-color-green-900: #021d06;
+
+  /* Indigo */
+  --ttdk-color-indigo-50: #fafdff;
+  --ttdk-color-indigo-100: #ebf7ff;
+  --ttdk-color-indigo-200: #d3effe;
+  --ttdk-color-indigo-300: #80d0fd;
+  --ttdk-color-indigo-400: #0aa7ff;
+  --ttdk-color-indigo-500: #0099f0;
+  --ttdk-color-indigo-600: #0364ab;
+  --ttdk-color-indigo-700: #003c66;
+  --ttdk-color-indigo-800: #01243d;
+  --ttdk-color-indigo-900: #02121d;
+
+  /* Lime */
+  --ttdk-color-lime-50: #fdfffa;
+  --ttdk-color-lime-100: #f8fded;
+  --ttdk-color-lime-200: #f2fcdf;
+  --ttdk-color-lime-300: #ddf6aa;
+  --ttdk-color-lime-400: #bbed56;
+  --ttdk-color-lime-500: #90c821;
+  --ttdk-color-lime-600: #5b7d17;
+  --ttdk-color-lime-700: #3b5110;
+  --ttdk-color-lime-800: #202d06;
+  --ttdk-color-lime-900: #141d02;
+
+  /* Neutral */
+  --ttdk-color-neutral-white: #ffffff;
+  --ttdk-color-neutral-50: #f1f2f3;
+  --ttdk-color-neutral-100: #e4e5e7;
+  --ttdk-color-neutral-200: #cacccf;
+  --ttdk-color-neutral-300: #b1b5b9;
+  --ttdk-color-neutral-400: #969ba2;
+  --ttdk-color-neutral-500: #7b828a;
+  --ttdk-color-neutral-600: #62686f;
+  --ttdk-color-neutral-700: #4a4f53;
+  --ttdk-color-neutral-800: #313336;
+  --ttdk-color-neutral-900: #232323;
+  --ttdk-color-neutral-black: #141313;
+
+  /* Orange */
+  --ttdk-color-orange-50: #fffcfa;
+  --ttdk-color-orange-100: #ffefeb;
+  --ttdk-color-orange-200: #ffe1d7;
+  --ttdk-color-orange-300: #ffa78a;
+  --ttdk-color-orange-400: #ff6a38;
+  --ttdk-color-orange-500: #f3511b;
+  --ttdk-color-orange-600: #d03706;
+  --ttdk-color-orange-700: #5e1d08;
+  --ttdk-color-orange-800: #2f0e04;
+  --ttdk-color-orange-900: #1d0802;
+
+  /* Pink */
+  --ttdk-color-pink-50: #fff5fa;
+  --ttdk-color-pink-100: #fdedf5;
+  --ttdk-color-pink-200: #fcdcec;
+  --ttdk-color-pink-300: #f79cc8;
+  --ttdk-color-pink-400: #f155a0;
+  --ttdk-color-pink-500: #e9358b;
+  --ttdk-color-pink-600: #a51359;
+  --ttdk-color-pink-700: #4b112d;
+  --ttdk-color-pink-800: #36061d;
+  --ttdk-color-pink-900: #1d020f;
+
+  /* Purple */
+  --ttdk-color-purple-50: #fdfaff;
+  --ttdk-color-purple-100: #faf5fe;
+  --ttdk-color-purple-200: #efddfd;
+  --ttdk-color-purple-300: #cc9ef0;
+  --ttdk-color-purple-400: #b56bf0;
+  --ttdk-color-purple-500: #8935cb;
+  --ttdk-color-purple-600: #631f99;
+  --ttdk-color-purple-700: #3e135f;
+  --ttdk-color-purple-800: #1c042f;
+  --ttdk-color-purple-900: #11021d;
+
+  /* Red */
+  --ttdk-color-red-50: #fffafa;
+  --ttdk-color-red-100: #fdeded;
+  --ttdk-color-red-200: #ffe0e0;
+  --ttdk-color-red-300: #ffa0a0;
+  --ttdk-color-red-400: #ff5c5c;
+  --ttdk-color-red-500: #f02d2d;
+  --ttdk-color-red-600: #d50b0b;
+  --ttdk-color-red-700: #570303;
+  --ttdk-color-red-800: #2a0303;
+  --ttdk-color-red-900: #1d0202;
+
+  /* Skin */
+  --ttdk-color-skin-100: #fbe8e0;
+  --ttdk-color-skin-200: #ffd8be;
+  --ttdk-color-skin-300: #f3b398;
+  --ttdk-color-skin-400: #ffb1a5;
+  --ttdk-color-skin-500: #d88880;
+  --ttdk-color-skin-600: #c28f7a;
+  --ttdk-color-skin-700: #926b5b;
+  --ttdk-color-skin-800: #61483d;
+  --ttdk-color-skin-900: #31241e;
+
+  /* Turqoise */
+  --ttdk-color-turqoise-50: #effbfb;
+  --ttdk-color-turqoise-100: #d7f4f6;
+  --ttdk-color-turqoise-200: #8edfe5;
+  --ttdk-color-turqoise-300: #44ccd5;
+  --ttdk-color-turqoise-400: #1bbfca;
+  --ttdk-color-turqoise-500: #006f93;
+  --ttdk-color-turqoise-600: #07465a;
+  --ttdk-color-turqoise-700: #07465a;
+  --ttdk-color-turqoise-800: #04252f;
+  --ttdk-color-turqoise-900: #02161d;
+
+  /* Violet */
+  --ttdk-color-violet-50: #fbfaff;
+  --ttdk-color-violet-100: #f7f6fe;
+  --ttdk-color-violet-200: #e2ddfd;
+  --ttdk-color-violet-300: #ad9efa;
+  --ttdk-color-violet-400: #8770ff;
+  --ttdk-color-violet-500: #583aee;
+  --ttdk-color-violet-600: #3b1fc6;
+  --ttdk-color-violet-700: #271a68;
+  --ttdk-color-violet-800: #140f2e;
+  --ttdk-color-violet-900: #06021d;
+
+  /* Yellow */
+  --ttdk-color-yellow-50: #fffefa;
+  --ttdk-color-yellow-100: #fff9eb;
+  --ttdk-color-yellow-200: #fff8d5;
+  --ttdk-color-yellow-300: #ffe58a;
+  --ttdk-color-yellow-400: #ffcc14;
+  --ttdk-color-yellow-500: #eebb04;
+  --ttdk-color-yellow-600: #855f00;
+  --ttdk-color-yellow-700: #553b06;
+  --ttdk-color-yellow-800: #312102;
+  --ttdk-color-yellow-900: #1c1402;
+
+  /* Brand Aliases */
+  --ttdk-brand-100: var(--ttdk-color-brand-green-100);
+  --ttdk-brand-200: var(--ttdk-color-brand-green-200);
+  --ttdk-brand-300: var(--ttdk-color-brand-green-300);
+  --ttdk-brand-400: var(--ttdk-color-brand-green-400);
+  --ttdk-brand-500: var(--ttdk-color-brand-green-500);
+  --ttdk-brand-600: var(--ttdk-color-brand-green-600);
+  --ttdk-brand-700: var(--ttdk-color-brand-green-700);
+  --ttdk-brand-800: var(--ttdk-color-brand-green-800);
+  --ttdk-brand-900: var(--ttdk-color-brand-green-900);
+  --ttdk-brand-default: var(--ttdk-color-brand-green-500);
+  --ttdk-brand-strong: var(--ttdk-color-brand-green-600);
+  --ttdk-brand-subtle: var(--ttdk-color-brand-green-100);
+  --ttdk-brand-subtle-dark: var(--ttdk-color-brand-green-900);
+
+  /* Convenience */
+  --ttdk-color-white: var(--ttdk-color-neutral-white);
+  --ttdk-color-black: var(--ttdk-color-neutral-black);
+  /* Sidebar (not in standard ramp) */
+  --ttdk-color-sidebar-bg: #0a0c29;
+
+  /* ========================================================================
+   SEMANTIC COLOR TOKENS — LIGHT THEME
+   ======================================================================== */
+
+  /* Background */
+  --ttdk-bg-base-primary: var(--ttdk-color-neutral-white);
+  --ttdk-bg-card: var(--ttdk-color-neutral-white);
+  --ttdk-bg-inverse: var(--ttdk-color-neutral-black);
+  --ttdk-bg-overlay: rgba(20, 19, 19, 0.5); /* Neutral/black × Opacity/50 */
+  --ttdk-bg-secondary-disabled: var(--ttdk-color-neutral-50);
+  --ttdk-bg-status-error: var(--ttdk-color-red-500);
+  --ttdk-bg-status-error-strong: var(--ttdk-color-red-700);
+  --ttdk-bg-status-error-subtle: var(--ttdk-color-red-200);
+  --ttdk-bg-status-info: var(--ttdk-color-blue-500);
+  --ttdk-bg-status-info-strong: var(--ttdk-color-blue-700);
+  --ttdk-bg-status-info-subtle: var(--ttdk-color-blue-200);
+  --ttdk-bg-status-success: var(--ttdk-color-green-500);
+  --ttdk-bg-status-success-strong: var(--ttdk-color-green-700);
+  --ttdk-bg-status-success-subtle: var(--ttdk-color-green-200);
+  --ttdk-bg-status-warning: var(--ttdk-color-yellow-400);
+  --ttdk-bg-status-warning-strong: var(--ttdk-color-yellow-700);
+  --ttdk-bg-status-warning-subtle: var(--ttdk-color-yellow-200);
+  --ttdk-bg-stay-black: var(--ttdk-color-neutral-black);
+  --ttdk-bg-stay-white: var(--ttdk-color-neutral-white);
+  --ttdk-bg-tertiary: var(--ttdk-color-neutral-800);
+
+  /* Brand */
+  --ttdk-brand-brand-default: var(--ttdk-brand-default);
+  --ttdk-brand-brand-strong: var(--ttdk-brand-strong);
+  --ttdk-brand-brand-subtle: var(--ttdk-brand-subtle);
+
+  /* Shimmer & Shadow */
+  --ttdk-shimmer-shadow-elevation: rgba(
+    20,
+    19,
+    19,
+    0.1
+  ); /* Neutral/black × Opacity/10 */
+  --ttdk-shimmer-shadow-shimmer-base: var(--ttdk-color-neutral-100);
+  --ttdk-shimmer-shadow-shimmer-highlight: var(--ttdk-color-neutral-50);
+
+  /* Stroke */
+  --ttdk-stroke-border-focus: var(--ttdk-brand-default);
+  --ttdk-stroke-divider: var(--ttdk-color-neutral-200);
+  --ttdk-stroke-inverse: var(--ttdk-color-neutral-black);
+  --ttdk-stroke-status-error: var(--ttdk-color-red-500);
+  --ttdk-stroke-status-info: var(--ttdk-color-blue-500);
+  --ttdk-stroke-status-success: var(--ttdk-color-green-500);
+  --ttdk-stroke-status-warning: var(--ttdk-color-yellow-400);
+  --ttdk-stroke-stay-black: var(--ttdk-color-neutral-black);
+  --ttdk-stroke-stay-white: var(--ttdk-color-neutral-white);
+  --ttdk-stroke-strong: var(--ttdk-color-neutral-500);
+  --ttdk-stroke-subtle: var(--ttdk-color-neutral-100);
+
+  /* Text & Icon */
+  --ttdk-text-icon-disabled: var(--ttdk-color-neutral-400);
+  --ttdk-text-icon-inverse: var(--ttdk-color-neutral-white);
+  --ttdk-text-icon-primary: var(--ttdk-color-neutral-black);
+  --ttdk-text-icon-secondary: var(--ttdk-color-neutral-600);
+  --ttdk-text-icon-status-error: var(--ttdk-color-red-500);
+  --ttdk-text-icon-status-error-strong: var(--ttdk-color-red-700);
+  --ttdk-text-icon-status-info: var(--ttdk-color-blue-500);
+  --ttdk-text-icon-status-info-strong: var(--ttdk-color-blue-700);
+  --ttdk-text-icon-status-success: var(--ttdk-color-green-500);
+  --ttdk-text-icon-status-success-strong: var(--ttdk-color-green-700);
+  --ttdk-text-icon-status-warning: var(--ttdk-color-coral-400);
+  --ttdk-text-icon-status-warning-strong: var(--ttdk-color-yellow-700);
+  --ttdk-text-icon-stay-black: var(--ttdk-color-neutral-black);
+  --ttdk-text-icon-stay-white: var(--ttdk-color-neutral-white);
+
+  /* Chart — Categorical Data */
+  --ttdk-chart-categorical-data-01: var(--ttdk-color-indigo-400);
+  --ttdk-chart-categorical-data-02: var(--ttdk-color-violet-400);
+  --ttdk-chart-categorical-data-03: var(--ttdk-color-red-400);
+  --ttdk-chart-categorical-data-04: var(--ttdk-color-turqoise-400);
+  --ttdk-chart-categorical-data-05: var(--ttdk-color-orange-400);
+  --ttdk-chart-categorical-data-06: var(--ttdk-color-yellow-400);
+  --ttdk-chart-categorical-data-07: var(--ttdk-color-blue-500);
+  --ttdk-chart-categorical-data-08: var(--ttdk-color-pink-400);
+  --ttdk-chart-categorical-data-09: var(--ttdk-color-green-400);
+  --ttdk-chart-categorical-data-10: var(--ttdk-color-purple-400);
+
+  /* Chart — Risk */
+  --ttdk-chart-risk-01: var(--ttdk-color-green-600);
+  --ttdk-chart-risk-02: var(--ttdk-color-green-500);
+  --ttdk-chart-risk-03: var(--ttdk-color-lime-400);
+  --ttdk-chart-risk-04: var(--ttdk-color-yellow-400);
+  --ttdk-chart-risk-05: var(--ttdk-color-coral-400);
+  --ttdk-chart-risk-06: var(--ttdk-color-orange-400);
+  --ttdk-chart-risk-07: var(--ttdk-color-red-500);
+  --ttdk-chart-risk-08: var(--ttdk-color-red-600);
+
+  /* Chart — Set Data and Single Data */
+  --ttdk-chart-set-data-01: var(--ttdk-brand-200);
+  --ttdk-chart-set-data-02: var(--ttdk-brand-300);
+  --ttdk-chart-set-data-03: var(--ttdk-brand-400);
+  --ttdk-chart-set-data-04: var(--ttdk-brand-500);
+  --ttdk-chart-set-data-05: var(--ttdk-brand-600);
+  --ttdk-chart-set-data-06: var(--ttdk-brand-700);
+  --ttdk-chart-set-data-07: var(--ttdk-brand-800);
+  --ttdk-chart-single-data-primary: var(--ttdk-brand-500);
+
+  /* ========================================================================
+     SPACING
+     ======================================================================== */
+  --ttdk-spacing-none: 0px;
+  --ttdk-spacing-xxxs: 2px;
+  --ttdk-spacing-xxs: 4px;
+  --ttdk-spacing-xs: 8px;
+  --ttdk-spacing-sm: 12px;
+  --ttdk-spacing-md: 16px;
+  --ttdk-spacing-lg: 24px;
+  --ttdk-spacing-xl: 32px;
+  --ttdk-spacing-xxl: 48px;
+  --ttdk-spacing-3xl: 64px;
+  --ttdk-spacing-4xl: 80px;
+  --ttdk-spacing-5xl: 128px;
+  --ttdk-spacing-6xl: 256px;
+  --ttdk-spacing-7xl: 1000px;
+
+  --ttdk-spacing-0: var(--ttdk-spacing-none);
+  --ttdk-spacing-2: var(--ttdk-spacing-xxxs);
+  --ttdk-spacing-4: var(--ttdk-spacing-xxs);
+  --ttdk-spacing-8: var(--ttdk-spacing-xs);
+  --ttdk-spacing-12: var(--ttdk-spacing-sm);
+  --ttdk-spacing-16: var(--ttdk-spacing-md);
+  --ttdk-spacing-24: var(--ttdk-spacing-lg);
+  --ttdk-spacing-32: var(--ttdk-spacing-xl);
+  --ttdk-spacing-48: var(--ttdk-spacing-xxl);
+  --ttdk-spacing-64: var(--ttdk-spacing-3xl);
+  --ttdk-spacing-80: var(--ttdk-spacing-4xl);
+  --ttdk-spacing-128: var(--ttdk-spacing-5xl);
+  --ttdk-spacing-256: var(--ttdk-spacing-6xl);
+  --ttdk-spacing-1000: var(--ttdk-spacing-7xl);
+
+  /* ========================================================================
+     CORNER RADIUS
+     ======================================================================== */
+  --ttdk-radius-none: 0px;
+  --ttdk-radius-xs: 6px;
+  --ttdk-radius-sm: 8px;
+  --ttdk-radius-md: 12px;
+  --ttdk-radius-lg: 16px;
+  --ttdk-radius-xl: 24px;
+  --ttdk-radius-round: 50px;
+  --ttdk-radius-full: 9999px;
+
+  --ttdk-radius-input-none: 0px;
+  --ttdk-radius-input-xs: 2px;
+  --ttdk-radius-input-sm: 4px;
+  --ttdk-radius-input-md: 6px;
+  --ttdk-radius-input-lg: 8px;
+  --ttdk-radius-input-xl: 12px;
+  --ttdk-radius-input-2xl: 16px;
+  --ttdk-radius-input-round: 50px;
+  --ttdk-radius-input-full: 9999px;
+
+  /* ========================================================================
+     STROKE WIDTH
+     ======================================================================== */
+  --ttdk-stroke-width-thin: 1px;
+  --ttdk-stroke-width-med: 2px;
+  --ttdk-stroke-width-thick: 4px;
+
+  /* ========================================================================
+     CARD SIZE
+     ======================================================================== */
+  --ttdk-card-size-1-1: 1128px;
+  --ttdk-card-size-1-2: 552px;
+  --ttdk-card-size-1-3: 360px;
+  --ttdk-card-size-1-4: 264px;
+  --ttdk-card-size-mobile: 328px;
+
+  /* ========================================================================
+     SHADOWS
+     ======================================================================== */
+  --ttdk-shadow-sm: 0px 1px 10px 0px rgba(0, 0, 0, 0.08);
+  --ttdk-shadow-md: 0px 1px 15px 0px rgba(0, 0, 0, 0.1);
+  --ttdk-shadow-lg: 0px 4px 12px 0px rgba(48, 49, 53, 0.2);
+  --ttdk-shadow-top: 0px 4px 12px 0px rgba(48, 49, 53, 0.2);
+  --ttdk-shadow-bottom: 0px 4px 16px 0px rgba(0, 0, 0, 0.08);
+  --ttdk-shadow-right: 4px 0px 16px 0px rgba(0, 0, 0, 0.08);
+  --ttdk-shadow-left: -4px 0px 16px 0px rgba(0, 0, 0, 0.08);
+
+  /* ========================================================================
+     TYPOGRAPHY
+     ======================================================================== */
+  --ttdk-font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, "Helvetica Neue", Arial, sans-serif;
+  --ttdk-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    monospace;
+
+  --ttdk-font-weight-regular: 400;
+  --ttdk-font-weight-medium: 500;
+  --ttdk-font-weight-semibold: 600;
+  --ttdk-font-weight-bold: 700;
+  --ttdk-font-weight-extrabold: 800;
+
+  --ttdk-font-size-9: 9px;
+  --ttdk-font-size-10: 10px;
+  --ttdk-font-size-12: 12px;
+  --ttdk-font-size-14: 14px;
+  --ttdk-font-size-16: 16px;
+  --ttdk-font-size-18: 18px;
+  --ttdk-font-size-20: 20px;
+  --ttdk-font-size-24: 24px;
+  --ttdk-font-size-32: 32px;
+  --ttdk-font-size-48: 48px;
+  --ttdk-font-size-64: 64px;
+
+  --ttdk-line-height-tight: 100%;
+  --ttdk-line-height-heading: 125%;
+  --ttdk-line-height-body: 150%;
+}
+
+/* ==========================================================================
+   BRAND THEME: PRIMARY BLUE
+   Overrides mode tokens that depend on the primary brand color.
+   ========================================================================== */
+[data-brand="primary-blue"] {
+  --ttdk-brand-100: var(--ttdk-color-brand-blue-100);
+  --ttdk-brand-200: var(--ttdk-color-brand-blue-200);
+  --ttdk-brand-300: var(--ttdk-color-brand-blue-300);
+  --ttdk-brand-400: var(--ttdk-color-brand-blue-400);
+  --ttdk-brand-500: var(--ttdk-color-brand-blue-500);
+  --ttdk-brand-600: var(--ttdk-color-brand-blue-600);
+  --ttdk-brand-700: var(--ttdk-color-brand-blue-700);
+  --ttdk-brand-800: var(--ttdk-color-brand-blue-800);
+  --ttdk-brand-900: var(--ttdk-color-brand-blue-900);
+  --ttdk-brand-default: var(--ttdk-color-brand-blue-500);
+  --ttdk-brand-strong: var(--ttdk-color-brand-blue-600);
+  --ttdk-brand-subtle: var(--ttdk-color-brand-blue-100);
+  --ttdk-brand-subtle-dark: var(--ttdk-color-brand-blue-900);
+}
+
+/* ==========================================================================
+   SEMANTIC COLOR TOKENS — DARK THEME
+   ========================================================================== */
+.dark,
+:root.dark,
+[data-theme="dark"] {
+  /* Background */
+  --ttdk-bg-base-primary: var(--ttdk-color-neutral-black);
+  --ttdk-bg-card: var(--ttdk-color-neutral-900);
+  --ttdk-bg-inverse: var(--ttdk-color-neutral-white);
+  --ttdk-bg-overlay: rgba(20, 19, 19, 0.1);
+  --ttdk-bg-secondary-disabled: var(--ttdk-color-neutral-800);
+  --ttdk-bg-status-error: var(--ttdk-color-red-500);
+  --ttdk-bg-status-error-strong: var(--ttdk-color-red-300);
+  --ttdk-bg-status-error-subtle: var(--ttdk-color-red-700);
+  --ttdk-bg-status-info: var(--ttdk-color-blue-500);
+  --ttdk-bg-status-info-strong: var(--ttdk-color-blue-300);
+  --ttdk-bg-status-info-subtle: var(--ttdk-color-blue-700);
+  --ttdk-bg-status-success: var(--ttdk-color-green-500);
+  --ttdk-bg-status-success-strong: var(--ttdk-color-green-200);
+  --ttdk-bg-status-success-subtle: var(--ttdk-color-green-700);
+  --ttdk-bg-status-warning: var(--ttdk-color-yellow-400);
+  --ttdk-bg-status-warning-strong: var(--ttdk-color-yellow-300);
+  --ttdk-bg-status-warning-subtle: var(--ttdk-color-yellow-700);
+  --ttdk-bg-stay-black: var(--ttdk-color-neutral-black);
+  --ttdk-bg-stay-white: var(--ttdk-color-neutral-white);
+  --ttdk-bg-tertiary: var(--ttdk-color-neutral-50);
+
+  /* Brand */
+  --ttdk-brand-brand-default: var(--ttdk-brand-default);
+  --ttdk-brand-brand-strong: var(--ttdk-brand-subtle);
+  --ttdk-brand-brand-subtle: var(--ttdk-brand-subtle-dark);
+
+  /* Shimmer & Shadow */
+  --ttdk-shimmer-shadow-elevation: rgba(255, 255, 255, 0.05);
+  --ttdk-shimmer-shadow-shimmer-base: var(--ttdk-color-neutral-800);
+  --ttdk-shimmer-shadow-shimmer-highlight: var(--ttdk-color-neutral-700);
+
+  /* Stroke */
+  --ttdk-stroke-border-focus: var(--ttdk-brand-default);
+  --ttdk-stroke-divider: var(--ttdk-color-neutral-700);
+  --ttdk-stroke-inverse: var(--ttdk-color-neutral-white);
+  --ttdk-stroke-status-error: var(--ttdk-color-red-300);
+  --ttdk-stroke-status-info: var(--ttdk-color-blue-300);
+  --ttdk-stroke-status-success: var(--ttdk-color-green-300);
+  --ttdk-stroke-status-warning: var(--ttdk-color-yellow-300);
+  --ttdk-stroke-stay-black: var(--ttdk-color-neutral-black);
+  --ttdk-stroke-stay-white: var(--ttdk-color-neutral-white);
+  --ttdk-stroke-strong: var(--ttdk-color-neutral-500);
+  --ttdk-stroke-subtle: var(--ttdk-color-neutral-800);
+
+  /* Text & Icon */
+  --ttdk-text-icon-disabled: var(--ttdk-color-neutral-500);
+  --ttdk-text-icon-inverse: var(--ttdk-color-neutral-black);
+  --ttdk-text-icon-primary: var(--ttdk-color-neutral-white);
+  --ttdk-text-icon-secondary: var(--ttdk-color-neutral-400);
+  --ttdk-text-icon-status-error: var(--ttdk-color-red-300);
+  --ttdk-text-icon-status-error-strong: var(--ttdk-color-red-200);
+  --ttdk-text-icon-status-info: var(--ttdk-color-blue-300);
+  --ttdk-text-icon-status-info-strong: var(--ttdk-color-blue-200);
+  --ttdk-text-icon-status-success: var(--ttdk-color-green-300);
+  --ttdk-text-icon-status-success-strong: var(--ttdk-color-green-200);
+  --ttdk-text-icon-status-warning: var(--ttdk-color-yellow-300);
+  --ttdk-text-icon-status-warning-strong: var(--ttdk-color-yellow-200);
+  --ttdk-text-icon-stay-black: var(--ttdk-color-neutral-black);
+  --ttdk-text-icon-stay-white: var(--ttdk-color-neutral-white);
+
+  /* Chart */
+  --ttdk-chart-categorical-data-07: var(--ttdk-color-blue-400);
+  --ttdk-chart-set-data-07: var(--ttdk-brand-100);
+}
+
+/* ==========================================================================
+   GRID UTILITY CLASSES
+   ========================================================================== */
+:root {
+  --ttdk-screen-xs: 0px;
+  --ttdk-screen-sm: 600px;
+  --ttdk-screen-md: 900px;
+  --ttdk-screen-lg: 1200px;
+  --ttdk-screen-xl: 1536px;
+
+  --ttdk-grid-mobile-column: 4;
+  --ttdk-grid-mobile-gutter: 16px;
+  --ttdk-grid-mobile-margin: 16px;
+  --ttdk-grid-desktop-column: 12;
+  --ttdk-grid-desktop-gutter: 24px;
+  --ttdk-grid-desktop-margin: 32px;
+}
+
+.ttdk-grid-fluid {
+  width: 100%;
+  padding-left: var(--ttdk-grid-mobile-margin);
+  padding-right: var(--ttdk-grid-mobile-margin);
+}
+
+@media (min-width: 1440px) {
+  .ttdk-grid-fluid {
+    padding-left: var(--ttdk-grid-desktop-margin);
+    padding-right: var(--ttdk-grid-desktop-margin);
+  }
+}
+
+.ttdk-grid-fixed {
+  width: 100%;
+  max-width: var(--ttdk-card-size-1-1, 1128px);
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: var(--ttdk-grid-mobile-margin);
+  padding-right: var(--ttdk-grid-mobile-margin);
+}
+
+@media (min-width: 1440px) {
+  .ttdk-grid-fixed {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+.ttdk-grid-container {
+  display: grid;
+  grid-template-columns: repeat(var(--ttdk-grid-mobile-column), 1fr);
+  gap: var(--ttdk-grid-mobile-gutter);
+}
+
+@media (min-width: 1440px) {
+  .ttdk-grid-container {
+    grid-template-columns: repeat(var(--ttdk-grid-desktop-column), 1fr);
+    gap: var(--ttdk-grid-desktop-gutter);
+  }
+}
+
+.ttdk-col-span-1 {
+  grid-column: span 1;
+}
+.ttdk-col-span-2 {
+  grid-column: span 2;
+}
+.ttdk-col-span-3 {
+  grid-column: span 3;
+}
+.ttdk-col-span-4 {
+  grid-column: span 4;
+}
+.ttdk-col-span-5 {
+  grid-column: span 5;
+}
+.ttdk-col-span-6 {
+  grid-column: span 6;
+}
+.ttdk-col-span-7 {
+  grid-column: span 7;
+}
+.ttdk-col-span-8 {
+  grid-column: span 8;
+}
+.ttdk-col-span-9 {
+  grid-column: span 9;
+}
+.ttdk-col-span-10 {
+  grid-column: span 10;
+}
+.ttdk-col-span-11 {
+  grid-column: span 11;
+}
+.ttdk-col-span-12 {
+  grid-column: span 12;
+}
+
+.ttdk-col-offset-1 {
+  grid-column-start: 1;
+}
+.ttdk-col-offset-2 {
+  grid-column-start: 2;
+}
+.ttdk-col-offset-3 {
+  grid-column-start: 3;
+}
+.ttdk-col-offset-4 {
+  grid-column-start: 4;
+}
+.ttdk-col-offset-5 {
+  grid-column-start: 5;
+}
+.ttdk-col-offset-6 {
+  grid-column-start: 6;
+}
+.ttdk-col-offset-7 {
+  grid-column-start: 7;
+}
+.ttdk-col-offset-8 {
+  grid-column-start: 8;
+}
+.ttdk-col-offset-9 {
+  grid-column-start: 9;
+}
+.ttdk-col-offset-10 {
+  grid-column-start: 10;
+}
+.ttdk-col-offset-11 {
+  grid-column-start: 11;
+}
+.ttdk-col-offset-12 {
+  grid-column-start: 12;
+}