:root {
    --brand-teal: #27535a;
    --brand-teal-deep: #123137;
    --brand-teal-soft: #e0ecec;
    --brand-gold: #b5a135;
    --brand-gold-soft: #e5ddb4;
    --brand-cream: #f4d8aa;
    --bg-cream: #fdf7ec;
    --bg-paper: #f7ecd9;
    --bg-card: #fdf7ec;
    --bg-card-soft: #f5e5c7;
    --bg-card-alt: #f4e3c5;
    --bg-chip: #e5cfaa;
    --bg-pill: #f5e0ba;
    --bg-footer: #f6e9d2;
    --menu-bg: rgba(247, 236, 217, 0.75);
    --ink-dark: #123137;
    --ink-mid: #27535a;
    --ink-muted: #8d7b63;
    --ink-on-dark: #ffffff;
    --accent-olive: #a7892f;
    --accent-rust: #c46a2e;
    --accent-soft: #d5b97a;
    --accent-muted: #8d7b63;
    --border-soft: rgba(0, 0, 0, 0.06);
    --border-subtle: rgba(0, 0, 0, 0.04);
    --border-dashed-soft: rgba(0, 0, 0, 0.08);
    --border-strong: #0c2222;
    --step-accent: #1f6b62;
    --step-accent-deep: #0f3e39;
    --step-accent-soft: #e6f0ef;
    --step-border: rgba(18, 49, 55, 0.12);
    --shadow-step: 0 10px 24px rgba(31, 107, 98, 0.18);

    --shadow-soft: 0 12px 30px rgba(0, 0, 0, 0.12);
    --shadow-soft-menu: 0 12px 30px rgba(25, 25, 25, 0.2);
    --border-bottom-menu: solid 2px rgba(25, 25, 25, 0.2);
    --shadow-card: 0 10px 22px rgba(0, 0, 0, 0.1);
    --shadow-strong: 0 14px 32px rgba(0, 0, 0, 0.45);
    --shadow-chip: 0 6px 16px rgba(0, 0, 0, 0.18);
    --shadow-circle: 0 8px 18px rgba(0, 0, 0, 0.17);
    --shadow-brand-mark: 0 4px 10px rgba(0, 0, 0, 0.18);
    --shadow-button: 0 4px 12px rgba(0, 0, 0, 0.10);
    --shadow-button-hover: 0 6px 14px rgba(245, 230, 200, 0.45);
    --shadow-frame: 0 18px 40px rgba(0, 0, 0, 0.25);
    --shadow-hero-badge: 0 12px 30px rgba(0, 0, 0, 0.22);
    --shadow-controls: 0 6px 14px rgba(0, 0, 0, 0.16);

    --header-bg: linear-gradient(to bottom, rgba(253, 247, 236, 0.96), rgba(253, 247, 236, 0.9));
    --hero-bg: radial-gradient(circle at top left, rgba(39, 83, 90, 0.22), transparent 55%), radial-gradient(circle at top right, rgba(181, 161, 53, 0.23), transparent 60%), var(--bg-cream);

    --button-gradient: linear-gradient(
            135deg,
            var(--ink-mid),
            var(--brand-teal)
    );

    --button-gradient-hover: linear-gradient(
            135deg,
            var(--brand-teal-deep),
            var(--ink-dark)
    );

    --feature-card-bg: linear-gradient(145deg, var(--bg-card-soft), var(--bg-card));
    --platform-card-bg: linear-gradient(135deg, var(--brand-cream), var(--bg-card));
    --menu-card-bg: linear-gradient(145deg, var(--brand-cream), var(--bg-card));

    --process-step-bg: linear-gradient(145deg, var(--bg-card), var(--brand-teal-soft));
    --services-aside-bg: radial-gradient(circle at top left, rgba(196, 106, 46, 0.18), transparent 60%), radial-gradient(circle at bottom right, rgba(167, 137, 47, 0.18), transparent 50%), var(--bg-cream);
    --bullet-bg: radial-gradient(circle at 30% 30%, var(--accent-soft), var(--accent-rust));
    --chip-bg-gradient: radial-gradient(circle at 30% 30%, var(--brand-teal-soft), var(--brand-gold-soft));

    --paint-reveal-bg: linear-gradient(120deg, var(--brand-teal), var(--step-accent));

    --works-frame-overlay: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));
    --works-carousel-mask: linear-gradient(to right, transparent 0%, #000000 8%, #000000 92%, transparent 100%);
    --section-underline: linear-gradient(90deg, var(--brand-teal), var(--brand-gold));
    --process-bg: linear-gradient(to bottom, var(--bg-paper), var(--brand-cream));
    --philosophy-bg: linear-gradient(to bottom, rgba(39, 83, 90, 0.06), rgba(181, 161, 53, 0.05)), var(--bg-card);
    --nav-link-hover-bg: rgba(215, 188, 122, 0.15);
    --nav-mobile-bg: rgba(253, 247, 236, 0.90);
    --radius-lg: 1.6rem;
    --radius-sm: 0.6rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --brand-teal: #77c2cd;
        --brand-teal-deep: #3d8f99;
        --brand-teal-soft: #1a3337;

        --brand-gold: #d3c46a;
        --brand-gold-soft: #3b3517;

        --brand-cream: #090c15;
        --bg-cream: #090c15;
        --bg-paper: #0e1321;
        --bg-card: #131a2d;
        --bg-card-soft: #182138;
        --bg-card-alt: #1c2742;
        --bg-chip: #212d4d;
        --bg-pill: #263458;
        --bg-footer: #090c15;

        --menu-bg: rgba(9, 12, 21, 0.9);

        --ink-dark: #f7f4ea;
        --ink-mid: #e1dac8;
        --ink-muted: #b4a48b;
        --ink-on-dark: #ffffff;

        --accent-olive: #d1c46a;
        --accent-rust: #e38a4a;
        --accent-soft: #c2aa6b;
        --accent-muted: #a59478;

        --border-soft: rgba(255, 255, 255, 0.06);
        --border-subtle: rgba(255, 255, 255, 0.03);
        --border-dashed-soft: rgba(255, 255, 255, 0.09);
        --border-strong: #e1dac8;

        --step-accent: #68b3a9;
        --step-accent-deep: #2d6f68;
        --step-accent-soft: rgba(104, 179, 169, 0.18);
        --step-border: rgba(104, 179, 169, 0.32);

        --shadow-soft: 0 12px 30px rgba(0, 0, 0, 0.6);
        --shadow-soft-menu: 0 12px 30px rgba(230, 230, 230, 0.2);
        --border-bottom-menu: solid 2px rgba(230, 230, 230, 0.2);
        --shadow-card: 0 10px 22px rgba(0, 0, 0, 0.55);
        --shadow-strong: 0 18px 40px rgba(0, 0, 0, 0.75);
        --shadow-chip: 0 6px 16px rgba(0, 0, 0, 0.55);
        --shadow-circle: 0 8px 18px rgba(0, 0, 0, 0.6);
        --shadow-brand-mark: 0 4px 10px rgba(0, 0, 0, 0.7);
        --shadow-button: 0 4px 12px rgba(0, 0, 0, 0.55);
        --shadow-button-hover: 0 6px 16px rgba(0, 0, 0, 0.7);
        --shadow-frame: 0 18px 40px rgba(0, 0, 0, 0.9);
        --shadow-hero-badge: 0 12px 30px rgba(0, 0, 0, 0.8);
        --shadow-controls: 0 6px 14px rgba(0, 0, 0, 0.6);

        --header-bg: linear-gradient(
                to bottom,
                rgba(9, 12, 21, 0.96),
                rgba(9, 12, 21, 0.92)
        );

        --hero-bg: radial-gradient(circle at top left, rgba(70, 137, 146, 0.45), transparent 55%),
        radial-gradient(circle at top right, rgba(211, 196, 106, 0.38), transparent 60%),
        #090c15;

        --button-gradient: linear-gradient(
                135deg,
                #3d8f99,
                #27535a
        );

        --button-gradient-hover: linear-gradient(
                135deg,
                #21464b,
                #10252a
        );

        --feature-card-bg: linear-gradient(145deg, #182138, #131a2d);
        --platform-card-bg: linear-gradient(135deg, #1c2742, #131a2d);
        --menu-card-bg: linear-gradient(145deg, #1c2742, #0e1321);

        --process-step-bg: linear-gradient(145deg, #131a2d, #212d4d);
        --services-aside-bg: radial-gradient(circle at top left, rgba(227, 138, 74, 0.24), transparent 60%),
        radial-gradient(circle at bottom right, rgba(209, 196, 106, 0.16), transparent 55%),
        #0e1321;

        --bullet-bg: radial-gradient(circle at 30% 30%, #c2aa6b, #e38a4a);
        --chip-bg-gradient: radial-gradient(circle at 30% 30%, #182c32, #3b341b);

        --paint-reveal-bg: linear-gradient(120deg, #3d8f99, #d1c46a);

        --works-frame-overlay: linear-gradient(
                rgba(0, 0, 0, 0.22),
                rgba(0, 0, 0, 0.22)
        );
        --works-carousel-mask: linear-gradient(
                to right,
                transparent 0%,
                #000000 8%,
                #000000 92%,
                transparent 100%
        );

        --section-underline: linear-gradient(90deg, #77c2cd, #d3c46a);
        --process-bg: linear-gradient(to bottom, #090c15, #131a2d);
        --philosophy-bg: linear-gradient(
                to bottom,
                rgba(39, 83, 90, 0.2),
                rgba(181, 161, 53, 0.08)
        ), #090c15;

        --nav-link-hover-bg: rgba(210, 188, 120, 0.14);
        --nav-mobile-bg: rgba(9, 12, 21, 0.90);
    }
}