/* Custom color overrides for koderAI */
@layer properties {
    @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
        *, :before, :after, ::backdrop {
            --tw-font-weight: initial;
            --tw-content: "";
            --tw-scale-x: 1;
            --tw-scale-y: 1;
            --tw-scale-z: 1;
            --tw-duration: initial;
            --tw-translate-x: 0;
            --tw-translate-y: 0;
            --tw-translate-z: 0;
            --tw-rotate-x: initial;
            --tw-rotate-y: initial;
            --tw-rotate-z: initial;
            --tw-skew-x: initial;
            --tw-skew-y: initial;
            --tw-space-y-reverse: 0;
            --tw-border-style: solid;
            --tw-shadow: 0 0 #0000;
            --tw-shadow-color: initial;
            --tw-shadow-alpha: 100%;
            --tw-inset-shadow: 0 0 #0000;
            --tw-inset-shadow-color: initial;
            --tw-inset-shadow-alpha: 100%;
            --tw-ring-color: initial;
            --tw-ring-shadow: 0 0 #0000;
            --tw-inset-ring-color: initial;
            --tw-inset-ring-shadow: 0 0 #0000;
            --tw-ring-inset: initial;
            --tw-ring-offset-width: 0px;
            --tw-ring-offset-color: #fff;
            --tw-ring-offset-shadow: 0 0 #0000;
            --tw-ease: initial;
            --tw-backdrop-blur: initial;
            --tw-backdrop-brightness: initial;
            --tw-backdrop-contrast: initial;
            --tw-backdrop-grayscale: initial;
            --tw-backdrop-hue-rotate: initial;
            --tw-backdrop-invert: initial;
            --tw-backdrop-opacity: initial;
            --tw-backdrop-saturate: initial;
            --tw-backdrop-sepia: initial;
            --tw-space-x-reverse: 0;
            --tw-gradient-position: initial;
            --tw-gradient-from: #0000;
            --tw-gradient-via: #0000;
            --tw-gradient-to: #0000;
            --tw-gradient-stops: initial;
            --tw-gradient-via-stops: initial;
            --tw-gradient-from-position: 0%;
            --tw-gradient-via-position: 50%;
            --tw-gradient-to-position: 100%;
            --tw-leading: initial;
            --tw-outline-style: solid;
            --tw-blur: initial;
            --tw-brightness: initial;
            --tw-contrast: initial;
            --tw-grayscale: initial;
            --tw-hue-rotate: initial;
            --tw-invert: initial;
            --tw-opacity: initial;
            --tw-saturate: initial;
            --tw-sepia: initial;
            --tw-drop-shadow: initial;
            --tw-drop-shadow-color: initial;
            --tw-drop-shadow-alpha: 100%;
            --tw-drop-shadow-size: initial;
        }
    }
}

:root, :host {
    --font-inter-tight: "Inter Tight", sans-serif;
    --color-primary-50: #f4f2fe;
    --color-primary-400: #a585ff;
    --color-primary-500: #5F01D1; /* Modified by EM -  #864ffe*/
    --color-primary-600: #7c31f6; /* Modified by EM -  #7c31f6*/
    --color-secondary: #1a1a1c;
    --color-accent: #fcfcfc;
    --color-background-1: #fcfcfd;
    --color-background-2: #f7f7f7; /* Modified by EM */
    --color-background-3: #f4f5f8;
    --color-background-4: #f0f2f6;
    --color-background-5: #121214; /* Modified by EM */
    --color-background-6: #0f1217;
    --color-background-7: #2B2D31; /* Modified by EM */
    --color-background-8: #070b10;
    --color-background-9: #1E1F22; /* Modified by EM */
    --color-background-12: #eaeceb;
    --color-stroke-1: #dfe4eb;
    --color-stroke-2: #e3e7ed;
    --color-stroke-3: #d7dde5;
    --color-stroke-4: #eceff4;
    --color-stroke-5: #1b232f;
    --color-stroke-6: #202731;
    --color-stroke-7: #2a333e;
    --color-stroke-8: #303b49;
    --color-stroke-9: var(--color-background-8);
    --color-ns-yellow: #f9eb57;
    --color-ns-green: #DCFD00; /* Modified by EM */
    --color-ns-red: #ffb9a2;
    --color-ns-cyan: #83e7ee;
    --color-ns-green-light: #e8fbc6;
    --color-ns-cyan-light: #cdf5f8;
    --color-ns-yellow-light: #fdf7bc;
    --color-ns-ivory: #f4efe7;
    --color-ns-linen: #beab9a;
    --color-gradient-6: linear-gradient(#83e7ee 0%, #c6f56f 100%);
    --color-gradient-7: linear-gradient(#fff 0%, #83e7ee 100%);
    --text-heading-1: 4.25rem;
    --text-heading-1--line-height: 110%;
    --text-heading-2: 3.25rem;
    --text-heading-2--line-height: 120%;
    --text-heading-3: 2.5rem;
    --text-heading-3--line-height: 120%;
    --text-heading-4: 2rem;
    --text-heading-4--line-height: 130%;
    --text-heading-5: 1.5rem;
    --text-heading-5--line-height: 140%;
    --text-heading-6: 1.25rem;
    --text-heading-6--line-height: 140%;
    --text-tagline-1: 1rem;
    --text-tagline-1--line-height: 150%;
    --text-tagline-2: .875rem;
    --text-tagline-2--line-height: 150%;
    --text-tagline-3: .75rem;
    --text-tagline-3--line-height: 150%;
    --blur-ns-badge-blur: 17.2283px;
    --stack-cards-gap: 2rem;
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --color-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;
    --text-7xl: 4.5rem;
    --text-7xl--line-height: 1;
    --text-8xl: 6rem;
    --text-8xl--line-height: 1;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --radius-md: .375rem;
    --radius-lg: .5rem;
    --radius-xl: .75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-4xl: 2rem;
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --blur-3xl: 64px;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
}

/* Override the hero heading gradient */
.hero-text-color-2 {
    background-image: linear-gradient(45deg, #37017C, #9F50FE, #5F01D1);
}

.bg-brand {
    background-color: #5F01D1;
}

.bg-neon {
    background-color: #DCFD00;
}
.dark\:bg-neon:where(.dark, .dark *) {
    background-color: #DCFD00 !important;
}

.dark\:bg-dark-1:where(.dark, .dark *) {
    background-color: #202225 !important;
}

.dark\:bg-dark-2:where(.dark, .dark *) {
    background-color: #3a3d43 !important;
}
.dark\:bg-dark-3:where(.dark, .dark *) {
    background-color: #4f545c !important;
}

.ring-white {
    --tw-ring-color: var(--color-white);
}
.dark .ring-white {
    --tw-ring-color: #121214 !important;
}

.dark\:ring-dark-1:where(.dark, .dark *) {
    --tw-ring-color: #202225 !important;
}
.dark\:ring-dark-2:where(.dark, .dark *) {
    --tw-ring-color: #3a3d43 !important;
}
.dark\:ring-dark-3:where(.dark, .dark *) {
    --tw-ring-color: #4f545c !important;
}


.text-brand {
    color: #5F01D1 ;
}

.text-brand-accent, .text-neon,
.dark\:text-neon:where(.dark, .dark *) {
    color: #DCFD00 !important;
}

.btn-brand {
    border-color: var(--color-black);
    background-color: #5F01D1;
    color: var(--color-white);
    --tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, #1018280d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.btn-primary {
    background-color: #5F01D1;
}

html.dark .btn-primary {
    background-color: #DCFD00;
}

.ring-brand {
    --tw-ring-color: #DCFD00;
}

.size-20 {
    width: calc(var(--spacing) * 20);
    height: calc(var(--spacing) * 20);
} 

.founder-message-quote-lg {
	padding-left: 100px;
    padding-right: 100px;
}

.badge-purple {
}

.badge-purple-light {
    background-color: #EEE5FF !important;
    color: #5F01D1 !important;
}

.badge-purple-light:where(.dark, .dark *) {
    background-color: #fcfcfc1a;
}

button, .btn, .badge, h1{
    text-transform: none !important;
}

.data-\[state\=true\]\:bg-secondary[data-state="true"] {
    background: var(--color-primary-400) !important;
}

.pb-\[60px\] {
    padding-bottom: 60px;
}

.copyright {
    color: #1a1a1c99 !important;
    font-size: 85%; 
}

.fill-secondary {
    fill: #5F01D1;
}


.stroke-secondary {
    stroke: #5F01D1;
}

.sm\:.min-h-\[320px\] {
    min-height: 320px;
    border: solid 3px red;
}

.w-\[320px\] { /* For Nav menu, missing in layout 3*/
    width: 320px;
}

.dark .theme-light-show {
    display: none !important
}

.light .theme-dark-show {
    display: none !important
}


/* If first section is gray, make the navbar white. Otherwise, leave it as-is.*/
html.light body.bg-background-3 .header-one.bg-background-2 {
    background: #fff !important;
}

/* LOGOS */
.appLogo {
    height: 34px !important;
}

.appLogoMobile {
    height: 28px !important;
    margin-left: 10px;
}

.appLogoMobileInMenu {
    height: 24px !important;
    margin-left: -6px;
}

.appLogoInFooter {
    height: 34px !important;
}


.text-accent {
    color: var(--color-accent);
}

.text-accent-light {
    color: color-mix(in oklab, var(--color-accent) 60%, transparent);
}