@import url("./ci-fonts.css");

:root {
    --ci-font-rotger: "TS Rotger";
    --ci-font-rodger: "Rodger";
    --ci-font-comfortaa: "comfortaa";
    /* ===============================
       Brand Colors
    =============================== */
    /* --ci-primary: #3c2188; */
    --ci-primary: #3d1884;
    --ci-primary-light: #6b689126;
    --ci-primary-2: #4c2aa7;
    /* --ci-secondary: #55c8c3; */
    --ci-secondary: #0dccc2;
    --ci-accent: #3f88b8;
    --ci-cyan: #55c8c3;
    --ci-blue: #3f88b8;
    --ci-purple: #6d43dd;
    --ci-green: #39a36f;

    /* ===============================
       Text Colors
    =============================== */
    --ci-heading: #141225;
    --ci-body: #5f5c73;
    --ci-muted: #8c879d;
    --ci-white: #ffffff;
    --ci-dark: #0d081c;
    --ci-dark-2: #120c24;
    --ci-text-muted: #ffffff80;

    /* ===============================
       Background Colors
    =============================== */
    --ci-bg-main: #ffffff;
    --ci-bg-soft: #fbfdff;
    --ci-bg-soft-cyan: #eafcfb;
    --ci-bg-soft-purple: #f4f0fb;
    --ci-bg-card: rgba(255, 255, 255, 0.9);
    --ci-bg-card-blue: rgba(234, 252, 251, 0.72);
    --ci-bg-card-purple: rgba(245, 241, 251, 0.76);
    --ci-bg-phone: #2e2e32;

    /* ===============================
       Borders
    =============================== */
    --ci-border: #ded9ec;
    --ci-border-strong: #c9c0df;
    --ci-border-cyan: rgba(85, 200, 195, 0.45);
    --ci-border-purple: rgba(60, 33, 136, 0.28);

    /* ===============================
       Gradients
    =============================== */
    --ci-gradient-brand: linear-gradient(
        90deg,
        var(--ci-secondary),
        var(--ci-primary)
    );
    /* background: linear-gradient(90deg, #0dccc2 0%, #3d1884 100%); */

    --ci-gradient-brand-reverse: linear-gradient(
        90deg,
        var(--ci-primary),
        var(--ci-secondary)
    );
    --ci-gradient-title: linear-gradient(
        90deg,
        var(--ci-secondary),
        var(--ci-accent),
        var(--ci-primary)
    );
    --ci-gradient-soft:
        radial-gradient(
            circle at 16% 40%,
            rgba(85, 200, 195, 0.18),
            transparent 32%
        ),
        radial-gradient(
            circle at 82% 60%,
            rgba(60, 33, 136, 0.11),
            transparent 28%
        ),
        #ffffff;
    --ci-gradient-dark: linear-gradient(
        135deg,
        var(--ci-dark),
        var(--ci-dark-2)
    );
    --ci-gradient-card-hover: linear-gradient(
        135deg,
        rgba(85, 200, 195, 0.95),
        rgba(63, 136, 184, 0.95),
        rgba(60, 33, 136, 0.95)
    );
    --ci-gradient-process: linear-gradient(
        90deg,
        var(--ci-secondary),
        var(--ci-accent),
        var(--ci-primary),
        var(--ci-accent),
        var(--ci-secondary)
    );
    --ci-gradient-frame: linear-gradient(
        90deg,
        rgba(13, 204, 194, 0.2) 0%,
        rgba(61, 24, 132, 0.2) 100%
    );

    /* ===============================
       Services
    =============================== */
    --ci-service-blue: #3f88b8;
    --ci-service-teal: #55c8c3;
    --ci-service-purple: #6d43dd;
    --ci-service-green: #39a36f;
    --ci-service-cyan: #49b8d2;

    --ci-service-light-blue: #3f88b858;
    --ci-service-light-teal: #0dccc233;
    --ci-service-light-purple: #3d188433;
    --ci-service-light-green: #05966933;
    --ci-service-light-cyan: #0891b233;

    /* ===============================
       Shadows
    =============================== */
    --ci-shadow-sm: 0 10px 30px rgba(60, 33, 136, 0.08);
    --ci-shadow-md: 0 18px 55px rgba(60, 33, 136, 0.14);
    --ci-shadow-lg: 0 26px 90px rgba(60, 33, 136, 0.17);
    --ci-shadow-cyan: 0 18px 48px rgba(85, 200, 195, 0.22);

    /* ===============================
       Radius
    =============================== */
    --ci-radius-sm: 14px;
    --ci-radius-md: 20px;
    --ci-radius-lg: 28px;
    --ci-radius-xl: 38px;
    --ci-radius-pill: 999px;

    /* ===============================
       Layout
    =============================== */
    --ci-section-padding: 110px;
    --ci-container-max: 1320px;
}