@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap");

:root {
    --green-100: #009933;
    --green-400: #c38f25;
    --logo-black:#0c0c0c;
    
    /* ---------- Brand / Primary (Navy) ---------- */
    --brand-50: oklch(0.95 0.02 260);
    --brand-100: oklch(0.9 0.03 260);
    --brand-200: oklch(0.84 0.04 260);
    --brand-300: oklch(0.77 0.06 260);
    --brand-400: oklch(0.67 0.08 260);
    --brand-500: oklch(0.58 0.09 258);
    --brand-600: oklch(0.5 0.09 258); /* recommended brand base */
    --brand-700: oklch(0.43 0.08 258);
    --brand-800: oklch(0.36 0.07 258);
    --brand-900: oklch(0.3 0.06 258);
    --brand-950: oklch(0.23 0.05 258);

    /* ---------- Accent / CTA (Industrial Orange) ---------- */
    --accent-50: oklch(0.98 0.02 73);
    --accent-100: oklch(0.95 0.04 70);
    --accent-200: oklch(0.9 0.08 63);
    --accent-300: oklch(0.84 0.13 58);
    --accent-400: oklch(0.78 0.17 56);
    --accent-500: oklch(0.73 0.2 55); /* primary CTA */
    --accent-600: oklch(0.66 0.2 54);
    --accent-700: oklch(0.58 0.18 52);
    --accent-800: oklch(0.5 0.16 50);
    --accent-900: oklch(0.43 0.14 48);

    /* ---------- Neutrals (Cool Gray) ---------- */
    --gray-50: oklch(0.98 0.002 255);
    --gray-100: oklch(0.96 0.003 255);
    --gray-200: oklch(0.92 0.006 255);
    --gray-300: oklch(0.87 0.01 258);
    --gray-400: oklch(0.74 0.022 262);
    --gray-500: oklch(0.62 0.027 264);
    --gray-600: oklch(0.49 0.03 257);
    --gray-700: oklch(0.41 0.034 260);
    --gray-800: oklch(0.32 0.033 257);
    --gray-900: oklch(0.25 0.028 265);
    --gray-950: oklch(0.18 0.022 265);

    /* ---------- Status ---------- */
    --success-600: oklch(0.62 0.16 150);
    --warning-600: oklch(0.78 0.19 84);
    --danger-600: oklch(0.62 0.24 25);

    /* ---------- Semantic tokens (Light) ---------- */
    --bg: var(--gray-50);
    --surface: white;
    --text: var(--gray-900);
    --text-muted: var(--gray-600);
    --border: var(--gray-200);
    --ring: var(--brand-500);
    --brand: var(--brand-600);
    --brand-contrast: white;
    --cta: var(--accent-500);
    --cta-hover: var(--accent-600);
    --cta-contrast: white;
}

[data-theme="dark"] {
    --bg: var(--gray-950);
    --surface: var(--gray-900);
    --text: var(--gray-50);
    --text-muted: var(--gray-400);
    --border: var(--gray-800);
    --ring: var(--brand-400);
    --brand: var(--brand-500);
    --brand-contrast: white;
    --cta: var(--accent-500);
    --cta-hover: var(--accent-400); /* a touch brighter in dark */
    --cta-contrast: black;
}

/* Optional helpers (use with Tailwind utilities) */
.bg-app {
    background-color: var(--bg);
}
.bg-surface {
    background-color: var(--surface);
}
.text-app {
    color: var(--text);
}
.text-muted {
    color: var(--text-muted);
}
.border-app {
    border-color: var(--border);
}
.bg-brand {
    background-color: var(--brand);
    color: var(--brand-contrast);
}
.bg-cta {
    background-color: var(--cta);
    color: var(--cta-contrast);
}
.bg-cta:hover {
    background-color: var(--cta-hover);
}
.ring-brand {
    --tw-ring-color: var(--ring);
}

body {
    font-family: "Lato", sans-serif;
}

.cursive {
    font-family: "Dancing Script", cursive;
}

.text_mask {
    -webkit-mask: url(https://framerusercontent.com/images/PN0NudBMM0Ad748YvhuzsGkViPE.png)
            alpha no-repeat center / contain exclude,
        linear-gradient(180deg, #000000 0%, rgb(0, 0, 0) 100%) add;
    flex: none;
    height: auto;
    mask: url(https://framerusercontent.com/images/PN0NudBMM0Ad748YvhuzsGkViPE.png)
            alpha no-repeat center / contain exclude,
        linear-gradient(180deg, #000000 0%, rgb(0, 0, 0) 100%) add;
    overflow: visible;
    position: relative;
    white-space: pre-wrap;
    width: 100%;
    word-break: break-word;
    word-wrap: break-word;
}

.hero_bg {
    background: repeating-linear-gradient(
                to right,
                rgba(255, 255, 255, 0.05) 0 2px,
                transparent 2px 6px
            )
            0 0/100% 26px,
        repeating-linear-gradient(
                to bottom,
                rgba(255, 255, 255, 0.05) 0 2px,
                transparent 2px 6px
            )
            0 0/26px 100%;
    filter: blur(0.2px) contrast(1.02);
    opacity: 0.22;
}

.hero_bg_2 {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.45;
    background:
    /* major guides */ linear-gradient(
                to right,
                rgba(255, 255, 255, 0.08) 1px,
                transparent 1px
            )
            0 0/110px 100%,
        linear-gradient(
                to bottom,
                rgba(255, 255, 255, 0.08) 1px,
                transparent 1px
            )
            0 0/100% 110px,
        /* minor grid */
            linear-gradient(
                to right,
                rgba(255, 255, 255, 0.05) 1px,
                transparent 1px
            )
            0 0/22px 100%,
        linear-gradient(
                to bottom,
                rgba(255, 255, 255, 0.05) 1px,
                transparent 1px
            )
            0 0/100% 22px;
    /* optional subtle vertical fade */
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        #000 10%,
        #000 90%,
        transparent 100%
    );
}

.hero_bg_3 {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.45;
    background:
    /* soft vignette */ radial-gradient(
            120% 80% at 50% 0%,
            rgba(255, 255, 255, 0.08),
            rgba(0, 0, 0, 0) 60%
        ),
        /* staggered dot grid */
            radial-gradient(
                circle at 1px 1px,
                rgba(255, 255, 255, 0.12) 1px,
                transparent 1.5px
            )
            0 0/22px 22px,
        radial-gradient(
                circle at 11px 11px,
                rgba(255, 255, 255, 0.08) 1px,
                transparent 1.5px
            )
            0 0/22px 22px;
}

.hero_bg_4 {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.35;
    background: linear-gradient(
                to right,
                color-mix(in oklab, white, var(--brand-950) 94%) 1px,
                transparent 1px
            )
            0 0/24px 24px,
        linear-gradient(
                to bottom,
                color-mix(in oklab, white, var(--brand-950) 94%) 1px,
                transparent 1px
            )
            0 0/24px 24px,
        linear-gradient(
                to right,
                color-mix(in oklab, white, var(--brand-950) 90%) 1px,
                transparent 1px
            )
            0 0/96px 96px,
        linear-gradient(
                to bottom,
                color-mix(in oklab, white, var(--brand-950) 90%) 1px,
                transparent 1px
            )
            0 0/96px 96px;
}

.curve {
    .box {
        --mask: radial-gradient(
                    53.81px at 50% calc(100% - 76px),
                    #000 99%,
                    #0000 101%
                )
                calc(50% - 80px) 0/160px 100%,
            radial-gradient(
                    53.81px at 50% calc(100% + 36px),
                    #0000 99%,
                    #000 101%
                )
                50% calc(100% - 40px) / 160px 100% repeat-x;
        -webkit-mask: var(--mask);
        mask: var(--mask);
    }
}