/* =========================================================
   BASE
========================================================= */
/* =========================================================
   HOVENTIC — FOUNDATION SYSTEM
   Version: v1.0
   Philosophy:
   Premium • Calm • Editorial • Modern • Warm
========================================================= */

/* =========================================================
   RESET
========================================================= */

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

html {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body {
    min-height: 100vh;
    overflow-x: hidden;

    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 1.6;
}

/* =========================================================
   ROOT VARIABLES
========================================================= */

:root {

    /* =====================================
       COLORS — LIGHT THEME
    ===================================== */

    --bg-primary: #ECE6DE;
    --bg-secondary: #F1ECE6;

    --surface-primary: rgba(255, 255, 255, 0.55);
    --surface-secondary: rgba(255, 255, 255, 0.72);

    --text-primary: #111111;
    --text-secondary: #6E6A66;

    --border-primary: rgba(17, 17, 17, 0.08);

    --accent-primary: #C67C4E;
    --accent-secondary: #D9A07B;

    --gradient-primary:
        linear-gradient(135deg,
            #8B4513 0%,
            #C67C4E 42%,
            #B8632E 100%);

    /* =====================================
       ATMOSPHERE
    ===================================== */

    --blur-warm:
        rgba(198, 124, 78, 0.18);

    --blur-soft:
        rgba(217, 160, 123, 0.12);

    /* =====================================
       SHADOWS
    ===================================== */

    --shadow-soft:
        0 10px 40px rgba(17, 17, 17, 0.04);

    --shadow-medium:
        0 20px 60px rgba(17, 17, 17, 0.06);

    /* =====================================
       TYPOGRAPHY
    ===================================== */

    --font-display: "Outfit", sans-serif;
    --font-body: "Inter", sans-serif;
    --font-accent: "Instrument Serif", serif;

    /* =====================================
       RADIUS
    ===================================== */

    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 32px;
    --radius-full: 999px;

    /* =====================================
       CONTAINER
    ===================================== */

    --container-width: 1280px;
    --container-padding: 32px;

    /* =====================================
       TRANSITIONS
    ===================================== */

    --transition-fast: 200ms cubic-bezier(.16, 1, .3, 1);

    --transition-medium: 400ms cubic-bezier(.16, 1, .3, 1);

    --transition-slow: 700ms cubic-bezier(.16, 1, .3, 1);

}

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

[data-theme="dark"] {

    --bg-primary: #121212;
    --bg-secondary: #1B1714;

    --surface-primary: rgba(20, 20, 20, 0.68);
    --surface-secondary: rgba(26, 26, 26, 0.82);

    --text-primary: #F6F0E8;
    --text-secondary: #B8ADA2;

    --border-primary: rgba(255, 255, 255, 0.08);

    --accent-primary: #C67C4E;
    --accent-secondary: #D9A07B;

    --blur-warm:
        rgba(198, 124, 78, 0.16);

    --blur-soft:
        rgba(217, 160, 123, 0.08);

    --shadow-soft:
        0 10px 40px rgba(0, 0, 0, 0.22);

    --shadow-medium:
        0 20px 60px rgba(0, 0, 0, 0.34);

}

/* =========================================================
   BASE
========================================================= */

body {
    background: var(--bg-primary);
    color: var(--text-primary);

    transition:
        background var(--transition-medium),
        color var(--transition-medium);
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

button {
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

ul {
    list-style: none;
}

/* =========================================================
   SELECTION
========================================================= */

::selection {
    background: var(--accent-primary);
    color: #ffffff;
}

/* =========================================================
   GLOBAL ATMOSPHERE
========================================================= */

.site-atmosphere {
    position: fixed;
    inset: 0;

    overflow: hidden;
    pointer-events: none;
    z-index: -1;
}

.atmosphere-blur {
    position: absolute;

    border-radius: 50%;
    filter: blur(100px);

    opacity: 0.8;

    transform: translateZ(0);
}

.atmosphere-blur-1 {
    width: 600px;
    height: 600px;

    background: var(--blur-warm);

    top: -120px;
    left: -160px;
}

.atmosphere-blur-2 {
    width: 520px;
    height: 520px;

    background: var(--blur-soft);

    right: -140px;
    bottom: -180px;
}

.atmosphere-noise {
    position: absolute;
    inset: 0;

    opacity: 0.025;

    background-image:
        radial-gradient(rgba(0, 0, 0, 0.5) 0.5px,
            transparent 0.5px);

    background-size: 8px 8px;
}

[data-theme="dark"] .atmosphere-noise {
    opacity: 0.08;
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.3) 0.5px,
            transparent 0.5px);
}

/* =========================================================
   SITE WRAPPER
========================================================= */

.site-wrapper {
    position: relative;
    isolation: isolate;
}

/* =========================================================
   CONTAINER
========================================================= */

.container {
    width: min(100% - 64px, 1280px);
    margin-inline: auto;
}

/* =========================================================
   TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4 {
    font-family: var(--font-display);

    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.hero-title {
    max-width: 11ch;
    font-size: clamp(3.2rem, 7vw, 6.5rem);
    line-height: 0.92;
    letter-spacing: -0.04em;
}

.section-title {
    max-width: 780px;

    font-size: clamp(2.6rem, 5vw, 4.6rem);

    line-height: 1;
}

.cta-title {
    max-width: 860px;

    font-size: clamp(3rem, 5vw, 5rem);

    line-height: 1;
}

.hero-description,
.section-description,
.cta-description {
    max-width: 720px;

    color: var(--text-secondary);

    font-size: 1.08rem;
    line-height: 1.8;
}

.gradient-text {
    background: var(--gradient-primary);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-title .gradient-text {
    font-size: 1.15em;
    display: inline-block;
    line-height: 0.9;
}

.text-accent {
    font-family: var(--font-accent);
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.02em;
}

/* =========================================================
   SECTION SPACING
========================================================= */

section {
    position: relative;

    padding-block: 140px;
}

/* Responsive */
@media (max-width:1024px) { section { padding-block: 110px; } }
@media (max-width:540px) { section { padding-block: 90px; } .section-title, .cta-title { line-height: 1.04; } }