@vetc-miniapp/ui-react 0.0.23 → 0.0.25

package/dist/styles/VETCProvider.d.ts

@@ -0,0 +1,114 @@
+/**
+ * VETC Design System — Ant Design Theme Provider
+ * Wraps children with ConfigProvider using VETC token overrides.
+ */
+import React from 'react';
+export declare const vetcAntdTheme: {
+    token: {
+        colorPrimary: "#25a45e";
+        colorPrimaryHover: "#39b669";
+        colorPrimaryActive: "#208758";
+        colorPrimaryBg: "#f2fef2";
+        colorPrimaryBgHover: "#dffbdf";
+        colorError: "#da2c39";
+        colorErrorHover: "#b4211f";
+        colorErrorBg: "#fff6f9";
+        colorWarning: "#ff8c2f";
+        colorWarningBg: "#fffbf0";
+        colorSuccess: "#208758";
+        colorSuccessBg: "#f2fef2";
+        colorText: "#181719";
+        colorTextSecondary: "#5e5d64";
+        colorTextDisabled: "#abacb2";
+        colorTextPlaceholder: "#74747d";
+        colorBgContainer: "#ffffff";
+        colorBgLayout: "#f1f1f2";
+        colorBgSpotlight: "#181719";
+        colorBorder: "#c6c8cc";
+        colorBorderSecondary: "#e3e4e6";
+        colorSplit: "#e3e4e6";
+        colorFill: "#f1f1f2";
+        colorFillSecondary: "#e3e4e6";
+        colorFillTertiary: "#d4d6d9";
+        fontFamily: string;
+        fontSize: number;
+        fontSizeSM: number;
+        fontSizeLG: number;
+        fontSizeXL: number;
+        fontSizeHeading1: number;
+        fontSizeHeading2: number;
+        fontSizeHeading3: number;
+        fontSizeHeading4: number;
+        fontSizeHeading5: number;
+        fontWeightStrong: number;
+        lineHeight: number;
+        borderRadius: number;
+        borderRadiusSM: number;
+        borderRadiusLG: number;
+        borderRadiusXS: number;
+        controlHeight: number;
+        controlHeightSM: number;
+        controlHeightLG: number;
+        paddingXS: number;
+        paddingSM: number;
+        padding: number;
+        paddingMD: number;
+        paddingLG: number;
+        motionDurationFast: string;
+        motionDurationMid: string;
+    };
+    components: {
+        Button: {
+            primaryColor: string;
+            defaultBorderColor: "#c6c8cc";
+            defaultColor: "#181719";
+            borderRadius: number;
+            borderRadiusSM: number;
+            borderRadiusLG: number;
+            controlHeight: number;
+            controlHeightSM: number;
+            paddingInline: number;
+            paddingInlineSM: number;
+            fontWeight: number;
+        };
+        Input: {
+            borderRadius: number;
+            controlHeight: number;
+            paddingInline: number;
+            colorBorder: "#c6c8cc";
+            hoverBorderColor: "#74747d";
+            activeBorderColor: "#25a45e";
+        };
+        Select: {
+            borderRadius: number;
+            controlHeight: number;
+        };
+        Checkbox: {
+            borderRadius: number;
+            controlInteractiveSize: number;
+        };
+        Radio: {
+            radioSize: number;
+            dotSize: number;
+        };
+        Switch: {
+            trackHeight: number;
+            trackMinWidth: number;
+            handleSize: number;
+            colorPrimary: "#25a45e";
+        };
+        Modal: {
+            borderRadiusLG: number;
+            paddingContentHorizontalLG: number;
+            paddingMD: number;
+        };
+        Card: {
+            borderRadius: number;
+            paddingLG: number;
+        };
+    };
+};
+export interface VETCProviderProps {
+    children: React.ReactNode;
+}
+export declare function VETCProvider({ children }: VETCProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/styles/VETCProvider.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ConfigProvider, App as AntApp, theme } from 'antd';
+import { colorAlias, colorGlobal } from '../tokens/colors';
+export const vetcAntdTheme = {
+    token: {
+        // Brand / Primary
+        colorPrimary: colorAlias.brand, // #25a45e
+        colorPrimaryHover: colorGlobal.green35,
+        colorPrimaryActive: colorAlias.brandDark,
+        colorPrimaryBg: colorGlobal.green02,
+        colorPrimaryBgHover: colorGlobal.green05,
+        // Error / Danger
+        colorError: colorAlias.negative, // #da2c39
+        colorErrorHover: colorGlobal.red60,
+        colorErrorBg: colorGlobal.red02,
+        // Warning
+        colorWarning: colorAlias.warning, // #ff8c2f
+        colorWarningBg: colorGlobal.orange02,
+        // Success
+        colorSuccess: colorAlias.positive, // #208758
+        colorSuccessBg: colorGlobal.green02,
+        // Text
+        colorText: colorAlias.primaryOnTheme, // #181719
+        colorTextSecondary: colorAlias.secondaryOnTheme, // #5e5d64
+        colorTextDisabled: colorAlias.disabledContent, // #abacb2
+        colorTextPlaceholder: colorGlobal.gray50,
+        // Background
+        colorBgContainer: colorAlias.theme, // #ffffff
+        colorBgLayout: colorAlias.themeVariant, // #f1f1f2
+        colorBgSpotlight: colorAlias.inverseTheme,
+        // Border
+        colorBorder: colorGlobal.gray20, // #c6c8cc
+        colorBorderSecondary: colorGlobal.gray10, // #e3e4e6
+        colorSplit: colorGlobal.gray10,
+        // Fill states
+        colorFill: colorGlobal.gray05,
+        colorFillSecondary: colorGlobal.gray10,
+        colorFillTertiary: colorGlobal.gray15,
+        // Typography
+        fontFamily: '"Roboto", system-ui, -apple-system, sans-serif',
+        fontSize: 16,
+        fontSizeSM: 13,
+        fontSizeLG: 18,
+        fontSizeXL: 19,
+        fontSizeHeading1: 32,
+        fontSizeHeading2: 28,
+        fontSizeHeading3: 24,
+        fontSizeHeading4: 19,
+        fontSizeHeading5: 16,
+        fontWeightStrong: 600,
+        lineHeight: 1.5,
+        // Shape
+        borderRadius: 8,
+        borderRadiusSM: 6,
+        borderRadiusLG: 12,
+        borderRadiusXS: 4,
+        // Size
+        controlHeight: 48,
+        controlHeightSM: 32,
+        controlHeightLG: 56,
+        // Padding
+        paddingXS: 8,
+        paddingSM: 12,
+        padding: 16,
+        paddingMD: 16,
+        paddingLG: 24,
+        // Motion
+        motionDurationFast: '150ms',
+        motionDurationMid: '250ms',
+    },
+    components: {
+        Button: {
+            primaryColor: '#ffffff',
+            defaultBorderColor: colorGlobal.gray20,
+            defaultColor: colorAlias.primaryOnTheme,
+            borderRadius: 12,
+            borderRadiusSM: 8,
+            borderRadiusLG: 12,
+            controlHeight: 48,
+            controlHeightSM: 32,
+            paddingInline: 16,
+            paddingInlineSM: 12,
+            fontWeight: 600,
+        },
+        Input: {
+            borderRadius: 8,
+            controlHeight: 48,
+            paddingInline: 12,
+            colorBorder: colorGlobal.gray20,
+            hoverBorderColor: colorAlias.outline,
+            activeBorderColor: colorAlias.brand,
+        },
+        Select: {
+            borderRadius: 8,
+            controlHeight: 48,
+        },
+        Checkbox: {
+            borderRadius: 4,
+            controlInteractiveSize: 20,
+        },
+        Radio: {
+            radioSize: 20,
+            dotSize: 8,
+        },
+        Switch: {
+            trackHeight: 32,
+            trackMinWidth: 52,
+            handleSize: 28,
+            colorPrimary: colorAlias.brand,
+        },
+        Modal: {
+            borderRadiusLG: 16,
+            paddingContentHorizontalLG: 16,
+            paddingMD: 16,
+        },
+        Card: {
+            borderRadius: 16,
+            paddingLG: 16,
+        },
+    },
+};
+export function VETCProvider({ children }) {
+    return (_jsx(ConfigProvider, { theme: { ...vetcAntdTheme, algorithm: theme.defaultAlgorithm }, children: _jsx(AntApp, { children: children }) }));
+}

package/dist/styles/tokens.css

@@ -0,0 +1,448 @@
+/**
+ * VETC Design System — CSS Custom Properties
+ * Single source of truth. Import once at app root.
+ * All components reference these vars — change token here, all components update.
+ */
+
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;600;700;800;900&display=swap');
+
+/* ════════════════════════════════════════════════════════════
+   1. GLOBAL COLOR PALETTE (raw values from tokens_vetc.json)
+   ════════════════════════════════════════════════════════════ */
+:root {
+  /* Green */
+  --vetc-green-02: #f2fef2;
+  --vetc-green-05: #dffbdf;
+  --vetc-green-10: #bff4bf;
+  --vetc-green-35: #39b669;
+  --vetc-green-40: #25a45e;
+  --vetc-green-45: #23965b;
+  --vetc-green-50: #208758;
+  --vetc-green-60: #1b6b4d;
+
+  /* Gray */
+  --vetc-gray-02: #f9fafa;
+  --vetc-gray-05: #f1f1f2;
+  --vetc-gray-10: #e3e4e6;
+  --vetc-gray-15: #d4d6d9;
+  --vetc-gray-20: #c6c8cc;
+  --vetc-gray-25: #b8babf;
+  --vetc-gray-30: #abacb2;
+  --vetc-gray-35: #9d9ea5;
+  --vetc-gray-40: #8f9098;
+  --vetc-gray-45: #82828a;
+  --vetc-gray-50: #74747d;
+  --vetc-gray-60: #5e5d64;
+  --vetc-gray-70: #47464b;
+  --vetc-gray-80: #2f2f32;
+  --vetc-gray-90: #181719;
+
+  /* Red */
+  --vetc-red-02: #fff6f9;
+  --vetc-red-05: #ffe7f0;
+  --vetc-red-50: #da2c39;
+  --vetc-red-60: #b4211f;
+
+  /* Orange */
+  --vetc-orange-02: #fffbf0;
+  --vetc-orange-30: #ff8c2f;
+
+  /* Yellow */
+  --vetc-yellow-02: #fff8e7;
+  --vetc-yellow-20: #f9c600;
+
+  /* Blue */
+  --vetc-blue-02: #f4fbff;
+  --vetc-blue-50: #007ac1;
+  --vetc-blue-70: #004179;
+
+  /* Base */
+  --vetc-white: #ffffff;
+  --vetc-black: #000000;
+
+/* ════════════════════════════════════════════════════════════
+   2. SEMANTIC / ALIAS TOKENS
+   ════════════════════════════════════════════════════════════ */
+
+  /* Brand */
+  --vetc-color-brand:              var(--vetc-green-40);
+  --vetc-color-brand-hover:        var(--vetc-green-35);
+  --vetc-color-brand-active:       var(--vetc-green-50);
+  --vetc-color-brand-light:        var(--vetc-green-05);
+  --vetc-color-on-brand:           var(--vetc-white);
+
+  /* Semantic states */
+  --vetc-color-positive:           var(--vetc-green-50);
+  --vetc-color-positive-light:     var(--vetc-green-05);
+  --vetc-color-on-positive:        var(--vetc-white);
+  --vetc-color-negative:           var(--vetc-red-50);
+  --vetc-color-negative-light:     var(--vetc-red-02);
+  --vetc-color-on-negative:        var(--vetc-white);
+  --vetc-color-warning:            var(--vetc-orange-30);
+  --vetc-color-warning-light:      var(--vetc-orange-02);
+  --vetc-color-on-warning:         var(--vetc-white);
+  --vetc-color-info:               var(--vetc-blue-50);
+  --vetc-color-info-light:         var(--vetc-blue-02);
+  --vetc-color-on-info:            var(--vetc-white);
+
+  /* Text */
+  --vetc-color-text-primary:       var(--vetc-gray-90);
+  --vetc-color-text-secondary:     var(--vetc-gray-60);
+  --vetc-color-text-tertiary:      var(--vetc-gray-50);
+  --vetc-color-text-disabled:      var(--vetc-gray-30);
+  --vetc-color-text-on-brand:      var(--vetc-white);
+  --vetc-color-text-on-inverse:    var(--vetc-white);
+  --vetc-color-text-placeholder:   var(--vetc-gray-50);
+  --vetc-color-text-error:         var(--vetc-red-50);
+
+  /* Background */
+  --vetc-color-bg:                 var(--vetc-white);
+  --vetc-color-bg-variant:         var(--vetc-gray-05);
+  --vetc-color-bg-elevated:        var(--vetc-white);
+  --vetc-color-bg-inverse:         var(--vetc-gray-90);
+  --vetc-color-bg-disabled:        var(--vetc-gray-10);
+  --vetc-color-bg-hover:           var(--vetc-gray-05);
+  --vetc-color-bg-pressed:         var(--vetc-gray-10);
+
+  /* Border / Outline */
+  --vetc-color-border:             var(--vetc-gray-20);
+  --vetc-color-border-variant:     var(--vetc-gray-10);
+  --vetc-color-border-focus:       var(--vetc-green-40);
+  --vetc-color-border-error:       var(--vetc-red-50);
+  --vetc-color-border-disabled:    var(--vetc-gray-20);
+
+  /* Overlay */
+  --vetc-color-overlay:            rgba(0, 0, 0, 0.4);
+  --vetc-color-overlay-light:      rgba(0, 0, 0, 0.16);
+  --vetc-color-skeleton:           rgba(0, 0, 0, 0.08);
+
+  /* Icon */
+  --vetc-color-icon-default:       var(--vetc-gray-60);
+  --vetc-color-icon-muted:         var(--vetc-gray-50);
+  --vetc-color-icon-disabled:      var(--vetc-gray-30);
+
+/* ════════════════════════════════════════════════════════════
+   3. TYPOGRAPHY
+   ════════════════════════════════════════════════════════════ */
+
+  --vetc-font-family:              'Roboto', system-ui, -apple-system, sans-serif;
+
+  /* Font weights — Figma: Regular=400, Medium=500, SemiBold=600, Bold=700 */
+  --vetc-font-weight-regular:      400;
+  --vetc-font-weight-medium:       500;
+  --vetc-font-weight-semibold:     600;
+  --vetc-font-weight-bold:         700;
+  --vetc-font-weight-black:        900;
+
+  /* Font sizes — Figma Typography scale */
+  --vetc-font-size-2xs:            10px;
+  --vetc-font-size-xs:             12px;
+  --vetc-font-size-sm:             14px;
+  --vetc-font-size-base:           16px;
+  --vetc-font-size-lg:             20px;
+  --vetc-font-size-xl:             24px;
+  --vetc-font-size-2xl:            28px;
+  --vetc-font-size-3xl:            32px;
+  --vetc-font-size-4xl:            36px;
+
+  /* Line heights — Figma: Display≈120%, Heading=140%, Body=150% */
+  --vetc-line-height-tight:        1.2;
+  --vetc-line-height-normal:       1.4;
+  --vetc-line-height-relaxed:      1.5;
+
+  /* Letter spacing */
+  --vetc-letter-spacing-none:      0;
+  --vetc-letter-spacing-sm:        0.1px;
+  --vetc-letter-spacing-md:        0.25px;
+  --vetc-letter-spacing-lg:        0.5px;
+
+/* ════════════════════════════════════════════════════════════
+   4. SPACING
+   ════════════════════════════════════════════════════════════ */
+
+  --vetc-space-0:   0px;
+  --vetc-space-2:   2px;
+  --vetc-space-4:   4px;
+  --vetc-space-6:   6px;
+  --vetc-space-8:   8px;
+  --vetc-space-10:  10px;
+  --vetc-space-12:  12px;
+  --vetc-space-14:  14px;
+  --vetc-space-16:  16px;
+  --vetc-space-20:  20px;
+  --vetc-space-24:  24px;
+  --vetc-space-32:  32px;
+  --vetc-space-40:  40px;
+  --vetc-space-48:  48px;
+  --vetc-space-56:  56px;
+  --vetc-space-64:  64px;
+
+/* ════════════════════════════════════════════════════════════
+   5. BORDER RADIUS
+   ════════════════════════════════════════════════════════════ */
+
+  --vetc-radius-xs:    4px;
+  --vetc-radius-sm:    6px;
+  --vetc-radius-md:    8px;
+  --vetc-radius-lg:    12px;
+  --vetc-radius-xl:    16px;
+  --vetc-radius-2xl:   24px;
+  --vetc-radius-pill:  1000px;
+
+/* ════════════════════════════════════════════════════════════
+   6. SHADOWS
+   ════════════════════════════════════════════════════════════ */
+
+  --vetc-shadow-none:  none;
+  --vetc-shadow-sm:    0 1px 4px rgba(0, 0, 0, 0.08);
+  --vetc-shadow-md:    0 2px 8px rgba(0, 0, 0, 0.12);
+  --vetc-shadow-lg:    0 4px 16px rgba(0, 0, 0, 0.16);
+
+/* ════════════════════════════════════════════════════════════
+   7. COMPONENT-SPECIFIC TOKENS
+   Thay đổi component token ở đây — không cần sửa component code
+   ════════════════════════════════════════════════════════════ */
+
+  /* ── Button ─────────────────────────────── */
+  --vetc-btn-height-lg:            48px;
+  --vetc-btn-height-sm:            32px;
+  --vetc-btn-padding-x-lg:         var(--vetc-space-16);
+  --vetc-btn-padding-x-sm:         var(--vetc-space-12);
+  --vetc-btn-font-size-lg:         var(--vetc-font-size-base);
+  --vetc-btn-font-size-sm:         var(--vetc-font-size-sm);
+  --vetc-btn-font-weight:          var(--vetc-font-weight-semibold);
+  --vetc-btn-radius-lg:            var(--vetc-radius-lg);
+  --vetc-btn-radius-sm:            var(--vetc-radius-md);
+  --vetc-btn-radius-pill:          var(--vetc-radius-pill);
+  /* Primary */
+  --vetc-btn-primary-bg:           var(--vetc-color-brand);
+  --vetc-btn-primary-bg-hover:     var(--vetc-color-brand-hover);
+  --vetc-btn-primary-bg-active:    var(--vetc-color-brand-active);
+  --vetc-btn-primary-text:         var(--vetc-color-on-brand);
+  /* Secondary */
+  --vetc-btn-secondary-border:     var(--vetc-color-border);
+  --vetc-btn-secondary-text:       var(--vetc-color-text-primary);
+  /* Tertiary */
+  --vetc-btn-tertiary-text:        var(--vetc-color-text-primary);
+  /* Danger */
+  --vetc-btn-danger-bg:            var(--vetc-color-negative);
+  --vetc-btn-danger-text:          var(--vetc-color-on-negative);
+  /* Disabled */
+  --vetc-btn-disabled-bg:          var(--vetc-color-bg-disabled);
+  --vetc-btn-disabled-text:        var(--vetc-color-text-disabled);
+  --vetc-btn-disabled-border:      var(--vetc-color-border-disabled);
+
+  /* ── Input / TextField ──────────────────── */
+  --vetc-input-height:             48px;
+  --vetc-input-padding-x:          var(--vetc-space-12);
+  --vetc-input-radius:             var(--vetc-radius-md);
+  --vetc-input-font-size:          var(--vetc-font-size-base);
+  --vetc-input-border:             var(--vetc-color-border);
+  --vetc-input-border-focus:       var(--vetc-color-border-focus);
+  --vetc-input-border-error:       var(--vetc-color-border-error);
+  --vetc-input-border-disabled:    var(--vetc-color-border-disabled);
+  --vetc-input-bg:                 var(--vetc-color-bg);
+  --vetc-input-bg-disabled:        var(--vetc-color-bg-disabled);
+  --vetc-input-text:               var(--vetc-color-text-primary);
+  --vetc-input-text-placeholder:   var(--vetc-color-text-placeholder);
+  --vetc-input-text-disabled:      var(--vetc-color-text-disabled);
+  /* Label above input */
+  --vetc-input-label-font-size:    var(--vetc-font-size-sm);
+  --vetc-input-label-font-weight:  var(--vetc-font-weight-semibold);
+  --vetc-input-label-color:        var(--vetc-color-text-primary);
+  /* Helper text below input */
+  --vetc-input-helper-font-size:   var(--vetc-font-size-xs);
+  --vetc-input-helper-color:       var(--vetc-color-text-secondary);
+  --vetc-input-helper-color-error: var(--vetc-color-text-error);
+  --vetc-input-gap:                var(--vetc-space-4);
+
+  /* ── Chip / Tag ─────────────────────────── */
+  --vetc-chip-height-md:           32px;
+  --vetc-chip-height-sm:           24px;
+  --vetc-chip-padding-x-md:        var(--vetc-space-12);
+  --vetc-chip-padding-x-sm:        var(--vetc-space-8);
+  --vetc-chip-font-size-md:        var(--vetc-font-size-sm);
+  --vetc-chip-font-size-sm:        var(--vetc-font-size-xs);
+  --vetc-chip-font-weight:         var(--vetc-font-weight-semibold);
+  --vetc-chip-radius-pill:         var(--vetc-radius-pill);
+  --vetc-chip-radius-rounded:      var(--vetc-radius-md);
+  /* Default */
+  --vetc-chip-default-bg:          var(--vetc-gray-05);
+  --vetc-chip-default-border:      var(--vetc-gray-20);
+  --vetc-chip-default-text:        var(--vetc-gray-90);
+  --vetc-chip-default-filled-bg:   var(--vetc-gray-50);
+  /* Brand */
+  --vetc-chip-brand-bg:            var(--vetc-green-05);
+  --vetc-chip-brand-border:        var(--vetc-green-40);
+  --vetc-chip-brand-text:          var(--vetc-green-60);
+  --vetc-chip-brand-filled-bg:     var(--vetc-green-40);
+  /* Positive */
+  --vetc-chip-positive-bg:         var(--vetc-green-05);
+  --vetc-chip-positive-border:     var(--vetc-green-50);
+  --vetc-chip-positive-text:       var(--vetc-green-60);
+  --vetc-chip-positive-filled-bg:  var(--vetc-green-50);
+  /* Negative */
+  --vetc-chip-negative-bg:         var(--vetc-red-02);
+  --vetc-chip-negative-border:     var(--vetc-red-50);
+  --vetc-chip-negative-text:       var(--vetc-red-60);
+  --vetc-chip-negative-filled-bg:  var(--vetc-red-50);
+  /* Warning */
+  --vetc-chip-warning-bg:          var(--vetc-orange-02);
+  --vetc-chip-warning-border:      var(--vetc-orange-30);
+  --vetc-chip-warning-text:        #934913;
+  --vetc-chip-warning-filled-bg:   var(--vetc-orange-30);
+  /* Info */
+  --vetc-chip-info-bg:             var(--vetc-blue-02);
+  --vetc-chip-info-border:         var(--vetc-blue-50);
+  --vetc-chip-info-text:           var(--vetc-blue-70);
+  --vetc-chip-info-filled-bg:      var(--vetc-blue-50);
+
+  /* ── Card ───────────────────────────────── */
+  --vetc-card-radius:              var(--vetc-radius-xl);
+  --vetc-card-padding:             var(--vetc-space-16);
+  --vetc-card-border:              var(--vetc-color-border-variant);
+  --vetc-card-bg:                  var(--vetc-color-bg);
+  --vetc-card-shadow-raised:       var(--vetc-shadow-md);
+
+  /* ── List Item ──────────────────────────── */
+  --vetc-list-item-height:         56px;
+  --vetc-list-item-padding-x:      var(--vetc-space-16);
+  --vetc-list-item-gap:            var(--vetc-space-12);
+  --vetc-list-item-bg:             var(--vetc-color-bg);
+  --vetc-list-item-bg-hover:       var(--vetc-color-bg-variant);
+  --vetc-list-item-border:         var(--vetc-color-border-variant);
+  --vetc-list-item-title-size:     var(--vetc-font-size-base);
+  --vetc-list-item-title-weight:   var(--vetc-font-weight-regular);
+  --vetc-list-item-title-color:    var(--vetc-color-text-primary);
+  --vetc-list-item-desc-size:      var(--vetc-font-size-sm);
+  --vetc-list-item-desc-color:     var(--vetc-color-text-secondary);
+  --vetc-list-item-icon-color:     var(--vetc-color-icon-default);
+
+  /* ── Navigation Bar (Top) ───────────────── */
+  --vetc-nav-height:               56px;
+  --vetc-nav-bg:                   var(--vetc-color-bg);
+  --vetc-nav-border:               var(--vetc-color-border-variant);
+  --vetc-nav-padding-x:            var(--vetc-space-8);
+  --vetc-nav-title-size:           var(--vetc-font-size-lg);
+  --vetc-nav-title-weight:         var(--vetc-font-weight-semibold);
+  --vetc-nav-title-color:          var(--vetc-color-text-primary);
+  --vetc-nav-icon-color:           var(--vetc-color-text-primary);
+  --vetc-nav-icon-btn-size:        32px;
+
+  /* ── Tab Bar (Bottom Nav) ───────────────── */
+  --vetc-tab-height:               56px;
+  --vetc-tab-bg:                   var(--vetc-color-bg);
+  --vetc-tab-border:               var(--vetc-color-border-variant);
+  --vetc-tab-label-size:           var(--vetc-font-size-xs);
+  --vetc-tab-label-weight:         var(--vetc-font-weight-semibold);
+  --vetc-tab-color-active:         var(--vetc-color-brand);
+  --vetc-tab-color-inactive:       var(--vetc-color-text-tertiary);
+  --vetc-tab-color-disabled:       var(--vetc-color-text-disabled);
+  --vetc-tab-badge-bg:             var(--vetc-color-negative);
+  --vetc-tab-badge-text:           var(--vetc-white);
+  --vetc-tab-badge-size:           16px;
+  --vetc-tab-badge-font-size:      var(--vetc-font-size-2xs);
+
+  /* ── Bottom Sheet ───────────────────────── */
+  --vetc-sheet-bg:                 var(--vetc-color-bg);
+  --vetc-sheet-radius:             var(--vetc-radius-xl);
+  --vetc-sheet-padding:            var(--vetc-space-16);
+  --vetc-sheet-handle-width:       32px;
+  --vetc-sheet-handle-height:      4px;
+  --vetc-sheet-handle-color:       var(--vetc-gray-20);
+  --vetc-sheet-overlay:            var(--vetc-color-overlay);
+  --vetc-sheet-title-size:         var(--vetc-font-size-base);
+  --vetc-sheet-title-weight:       var(--vetc-font-weight-semibold);
+  --vetc-sheet-title-color:        var(--vetc-color-text-primary);
+  --vetc-sheet-border:             var(--vetc-color-border-variant);
+
+  /* ── Modal / Dialog ─────────────────────── */
+  --vetc-modal-width:              344px;
+  --vetc-modal-radius:             var(--vetc-radius-xl);
+  --vetc-modal-padding:            var(--vetc-space-16);
+  --vetc-modal-overlay:            var(--vetc-color-overlay);
+  --vetc-modal-bg:                 var(--vetc-color-bg);
+
+  /* ── Button Group ───────────────────────── */
+  --vetc-btn-group-padding:        var(--vetc-space-16);
+  --vetc-btn-group-gap:            var(--vetc-space-8);
+  --vetc-btn-group-border-color:   var(--vetc-color-border-variant);
+  --vetc-btn-group-bg:             var(--vetc-color-bg);
+
+  --vetc-dialog-width:             344px;
+  --vetc-dialog-radius:            var(--vetc-radius-xl);
+  --vetc-dialog-padding:           var(--vetc-space-16);
+  --vetc-dialog-overlay:           var(--vetc-color-overlay);
+  --vetc-dialog-bg:                var(--vetc-color-bg);
+  --vetc-dialog-image-height:      160px;
+  --vetc-dialog-btn-gap:           var(--vetc-space-8);
+  --vetc-dialog-title-size:        var(--vetc-font-size-base);
+  --vetc-dialog-title-weight:      var(--vetc-font-weight-semibold);
+  --vetc-dialog-desc-size:         var(--vetc-font-size-sm);
+  --vetc-dialog-desc-color:        var(--vetc-color-text-secondary);
+
+  /* ── Divider ────────────────────────────── */
+  --vetc-divider-color:            var(--vetc-color-border-variant);
+  --vetc-divider-label-size:       var(--vetc-font-size-sm);
+  --vetc-divider-label-color:      var(--vetc-color-text-secondary);
+  --vetc-divider-margin-h:         var(--vetc-space-12);
+  --vetc-divider-margin-v:         var(--vetc-space-8);
+
+  /* ── Avatar ─────────────────────────────── */
+  --vetc-avatar-bg-default:        var(--vetc-color-brand);
+  --vetc-avatar-text-color:        var(--vetc-white);
+  --vetc-avatar-size-xl:           56px;
+  --vetc-avatar-size-lg:           48px;
+  --vetc-avatar-size-md:           40px;
+  --vetc-avatar-size-sm:           32px;
+  --vetc-avatar-size-xs:           24px;
+
+  /* ── Switch ─────────────────────────────── */
+  --vetc-switch-width:             52px;
+  --vetc-switch-height:            32px;
+  --vetc-switch-thumb-size:        28px;
+  --vetc-switch-on-bg:             var(--vetc-color-brand);
+  --vetc-switch-off-bg:            var(--vetc-gray-30);
+
+  /* ── Loading / Spinner ──────────────────── */
+  --vetc-spinner-color:            var(--vetc-color-brand);
+  --vetc-spinner-size-sm:          16px;
+  --vetc-spinner-size-md:          24px;
+  --vetc-spinner-size-lg:          40px;
+
+  /* ── Toast ──────────────────────────────── */
+  --vetc-toast-radius:             var(--vetc-radius-md);
+
+  /* ── Transitions ────────────────────────── */
+  --vetc-transition-fast:          150ms ease;
+  --vetc-transition-base:          250ms ease;
+  --vetc-transition-slow:          350ms ease;
+
+  /* ── Safe Area Insets ───────────────────── */
+  --safe-area-inset-top:           env(safe-area-inset-top,    0px);
+  --safe-area-inset-bottom:        env(safe-area-inset-bottom, 0px);
+  --safe-area-inset-left:          env(safe-area-inset-left,   0px);
+  --safe-area-inset-right:         env(safe-area-inset-right,  0px);
+}
+
+/* ════════════════════════════════════════════════════════════
+   8. SAFE AREA UTILITY CLASSES
+   ════════════════════════════════════════════════════════════ */
+.safe-area {
+  padding:
+    var(--safe-area-inset-top,    0px)
+    var(--safe-area-inset-right,  0px)
+    var(--safe-area-inset-bottom, 0px)
+    var(--safe-area-inset-left,   0px);
+}
+.safe-top    { padding-top:    var(--safe-area-inset-top,    0px); }
+.safe-bottom { padding-bottom: var(--safe-area-inset-bottom, 0px); }
+.safe-left   { padding-left:   var(--safe-area-inset-left,   0px); }
+.safe-right  { padding-right:  var(--safe-area-inset-right,  0px); }
+
+/* ════════════════════════════════════════════════════════════
+   9. BASE RESET
+   ════════════════════════════════════════════════════════════ */
+*, *::before, *::after {
+  box-sizing: border-box;
+}