:root {
    /* ss bond colors */
    --ssbond-primaryLinear: var(--ssbond-primaryLinear);
    --ssbond-secondaryLinear: linear-gradient(90deg, #E71616 0%, #AE0C0C 100%);
    --ssbond-whiteLinear: linear-gradient(90deg, var(--ssbond-white) 0%, var(--ssbond-blue) 100%);
    --ssbond-blue: var(--ssbond-blue);
    --ssbond-white: var(--ssbond-white);
    --ssbond-black: var(--ssbond-black);
    --ssbond-secondary: var(--ssbond-secondary);
    --ssbond-red: var(--ssbond-red);
    --ssbond-whiteGray: var(--ssbond-whiteGray);

    --sf-primary: #0066CC;
    --sf-secondary: #1D1D1F;
    --sf-WhiteGray: #dedee4;
    --sf-gray: #86868B;
    --sf-light-gray: var(--ssbond-whiteGray);
    --sf-white: var(--ssbond-white);
    --sf-black: var(--ssbond-black);
    --sf-border: #D2D2D7;

    /* Typography */
    --sf-font-family: Helvetica;

    /* Font Sizes */
    --sf-text-sm: 12px;
    --sf-text-base: 14px;
    --sf-text-lg: 17px;
    --sf-text-xl: 20px;
    --sf-text-2xl: 28px;
    --sf-text-3xl: 40px;
    --sf-text-4xl: 48px;

    /* Spacing */
    --sf-spacing-xs: 4px;
    --sf-spacing-sm: 8px;
    --sf-spacing-md: 16px;
    --sf-spacing-lg: 24px;
    --sf-spacing-xl: 32px;
    --sf-spacing-2xl: 48px;

    /* Transitions */
    --sf-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Shadows */
    --sf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --sf-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --sf-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}