/* ============================================================
   SAHARA TECH — DESIGN TOKENS
   ============================================================ */

:root {
    --sahara-green-dark: #283618;
    --sahara-green: #606c38;
    --sahara-green-icon: #4f8a2e;

    --sahara-orange: #bc6c25;
    --sahara-gold: #dda15e;
    --sahara-sun: #f6b72a;
    --sahara-cream: #fefae0;


    /* LIGHT */

    --sahara-bg: #fafaf7;
    --sahara-section: #ffffff;

    --sahara-surface: #ffffff;

    --sahara-card: #fafaf7;
    --sahara-card-soft: #fafaf7;

    --sahara-text: #1f1f1f;
    --sahara-text-soft: #666666;
    --sahara-muted: #666666;

    --sahara-border:
        rgba(40, 54, 24, 0.12);

    --sahara-border-strong:
        rgba(40, 54, 24, 0.20);

    --sahara-overlay:
        rgba(250, 250, 247, 0.92);

    --sahara-navbar-bg:
        #fafaf7;

    --sahara-contact-bg:
        #283618;

    --sahara-contact-text:
        #ffffff;

    --sahara-footer-bg:
        #000000;

    --sahara-footer-text:
        #ffffff;


    /* LAYOUT */

    --sahara-container:
        96rem;


    /* TYPOGRAPHY */

    --sahara-serif:
        "Cormorant Garamond",
        Georgia,
        "Times New Roman",
        serif;

    --sahara-sans:
        "Inter",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;


    /* SHADOWS */

    --sahara-shadow:
        0 18px 45px
        rgba(40, 54, 24, 0.14);

    --sahara-shadow-hover:
        0 24px 55px
        rgba(40, 54, 24, 0.20);


    --neutral-silver:
        var(--sahara-bg);

    --neutral-black:
        var(--sahara-text);

    --neutral-grey:
        var(--sahara-muted);

    --danger:
        #b42318;
}


/* ============================================================
   DARK THEME
   ============================================================ */

html[data-theme="dark"],
html.dark {
    --sahara-bg:
        #12140f;

    --sahara-section:
        #1b1f16;

    --sahara-surface:
        #1b1f16;

    --sahara-card:
        #1f241a;

    --sahara-card-soft:
        #1f241a;

    --sahara-text:
        #fafaf7;

    --sahara-text-soft:
        #c7c8c1;

    --sahara-muted:
        #a5a79e;

    --sahara-border:
        rgba(255, 255, 255, 0.09);

    --sahara-border-strong:
        rgba(255, 255, 255, 0.16);

    --sahara-overlay:
        rgba(250, 250, 247, 0.92);

    --sahara-navbar-bg:
        #000000;

    --sahara-contact-bg:
        #283618;

    --sahara-contact-text:
        #ffffff;

    --sahara-footer-bg:
        #000000;

    --sahara-footer-text:
        #ffffff;

    --sahara-shadow:
        0 18px 45px
        rgba(0, 0, 0, 0.38);

    --sahara-shadow-hover:
        0 24px 55px
        rgba(0, 0, 0, 0.52);
}


/* ============================================================
   DOCUMENT
   ============================================================ */

html {
    scroll-behavior:
        smooth;

    scrollbar-gutter:
        stable;

    background:
        var(--sahara-bg);
}

body {
    margin:
        0;

    min-height:
        100vh;

    overflow-x:
        hidden;

    background:
        var(--sahara-bg);

    color:
        var(--sahara-text);

    font-family:
        var(--sahara-sans);

    transition:
        background-color 180ms ease,
        color 180ms ease;
}

*,
*::before,
*::after {
    box-sizing:
        border-box;
}


/* ============================================================
   HELPERS
   ============================================================ */

.sahara-page {
    background:
        var(--sahara-bg);

    color:
        var(--sahara-text);
}

.sahara-section {
    background:
        var(--sahara-section);

    color:
        var(--sahara-text);
}

.sahara-card {
    background:
        var(--sahara-card);

    color:
        var(--sahara-text);

    border-color:
        var(--sahara-border);
}


/* ============================================================
   HERO SECONDARY CTA
   ============================================================ */

.hero-secondary-cta {
    color:
        var(--sahara-green-dark);

    border-color:
        var(--sahara-green-dark);

    background:
        transparent;

    border-radius:
        6px;

    font-weight:
        700;
}

.hero-secondary-cta:hover {
    background:
        var(--sahara-green-dark);

    color:
        #ffffff;

    transform:
        translateY(-1px);
}

html[data-theme="dark"]
.hero-secondary-cta,
html.dark
.hero-secondary-cta {
    color:
        var(--sahara-text);

    border-color:
        var(--sahara-border-strong);
}

html[data-theme="dark"]
.hero-secondary-cta:hover,
html.dark
.hero-secondary-cta:hover {
    background:
        rgba(
            255,
            255,
            255,
            0.08
        );

    color:
        var(--sahara-text);
}


/* ============================================================
   REVEAL
   ============================================================ */

.reveal {
    opacity:
        0;

    transform:
        translateY(18px);

    animation:
        reveal-up
        520ms
        ease
        forwards;
}

.reveal-delay-1 {
    animation-delay:
        80ms;
}

.reveal-delay-2 {
    animation-delay:
        140ms;
}

.reveal-delay-3 {
    animation-delay:
        200ms;
}

@keyframes reveal-up {
    from {
        opacity:
            0;

        transform:
            translateY(18px);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0);
    }
}


/* ============================================================
   CONTACT
   ============================================================ */

.sahara-contact-input::placeholder {
    color:
        rgba(
            255,
            255,
            255,
            0.45
        );
}

.sahara-contact-success {
    min-height:
        280px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;
}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline:
        2px solid
        var(--sahara-gold);

    outline-offset:
        3px;
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media
(prefers-reduced-motion: reduce) {

    html {
        scroll-behavior:
            auto;
    }

    *,
    *::before,
    *::after {
        animation-duration:
            0.01ms !important;

        animation-delay:
            0ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;
    }
}
.skip-link { position: fixed; top: -100px; left: 1rem; z-index: 200; padding: .75rem; background: var(--sahara-bg); color: var(--sahara-text); }
.skip-link:focus { top: 1rem; }
.fallback-nav { display: flex; flex-wrap: wrap; gap: 1rem; padding: 1rem; background: var(--sahara-bg); }

/* Fluid page layout: shared gutters from phones through ultrawide displays. */
.site-container {
    width: 100%;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 3vw, 7.5rem);
}
.site-container > *, .content-grid > * { min-width: 0; }
img, svg, video, canvas { max-width: 100%; }
.hero-copy { width: 100%; max-width: 58rem; }
.hero-heading { max-width: 13ch; overflow-wrap: break-word; }
.hero-visual { max-width: none; }
#contact input, #contact textarea { min-width: 0; }
#services, #about, #contact { scroll-margin-top: 6rem; }
@media (min-width: 1600px) {
    .hero-image { height: clamp(26.25rem, 27vw, 48rem); }
    #about .content-grid { gap: clamp(3.5rem, 4vw, 8rem); }
}
@media (max-width: 639px) {
    #contact input, #contact textarea { font-size: 1rem !important; }
}