/* ═══════════════════════════════════════════════════
   DepthCore — Main Stylesheet
   ═══════════════════════════════════════════════════ */

/* ── @font-face ─────────────────────────────────── */
@font-face {
    font-family: "Cormorant Garamond";
    src: url("../fonts/cormorant-garamond/cormorant-garamond-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Cormorant Garamond";
    src: url("../fonts/cormorant-garamond/cormorant-garamond-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Cormorant Garamond";
    src: url("../fonts/cormorant-garamond/cormorant-garamond-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Cormorant Garamond";
    src: url("../fonts/cormorant-garamond/cormorant-garamond-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/inter-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/inter-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/inter-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ── CSS Custom Properties (Design Tokens) ──────── */
:root {
    /* Colors */
    --dc-color-primary: #2563eb;
    --dc-color-primary-hover: #1d4ed8;
    --dc-color-secondary: #64748b;
    --dc-color-secondary-hover: #475569;
    --dc-color-heading: #0f172a;
    --dc-color-text: #475569;
    --dc-color-text-light: #94a3b8;
    --dc-color-bg: #ffffff;
    --dc-color-bg-alt: #f8fafc;
    --dc-color-border: #e2e8f0;

    /* Typography */
    --dc-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --dc-font-heading: "Cormorant Garamond", Serif;
    --dc-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    --dc-font-size-base: 1rem;
    --dc-line-height-base: 1.6;

    /* Spacing */
    --dc-spacing-xs: 0.25rem;
    --dc-spacing-sm: 0.5rem;
    --dc-spacing-md: 1rem;
    --dc-spacing-lg: 2rem;
    --dc-spacing-xl: 4rem;
    --dc-spacing-2xl: 6rem;

    /* Layout */
    --dc-container-max: 1280px;
    --dc-container-padding: 1.5rem;

    /* Transitions */
    --dc-transition-fast: 0.15s ease;
    --dc-transition-base: 0.2s ease;
    --dc-transition-slow: 0.3s ease;

    /* Borders */
    --dc-radius-sm: 4px;
    --dc-radius-md: 6px;
    --dc-radius-lg: 12px;
    --dc-radius-full: 9999px;

    /* ── Component Design Tokens ─────────────────── */
    --nav-height: 72px;
    --shadow: 0 8px 36px rgba(0, 0, 0, 0.08);
    --accent-blue: #3b82f6;
    --accent-pink: #e879a0;
    --text: #1a1a1a;
    --muted: #6b7280;
}

/* ── Reset / Base ───────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--dc-font-sans);
    font-size: var(--dc-font-size-base);
    line-height: var(--dc-line-height-base);
    color: var(--dc-color-text);
    background-color: var(--dc-color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
}

a {
    color: var(--dc-color-primary);
    text-decoration: none;
    transition: color var(--dc-transition-fast);
}

a:hover {
    color: var(--dc-color-primary-hover);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--dc-font-heading);
    color: var(--dc-color-heading);
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 0.95;
}

/* ── Container ──────────────────────────────────── */
.dc-container {
    width: 100%;
    max-width: var(--dc-container-max);
    margin-inline: auto;
    padding-inline: var(--dc-container-padding);
}

/* ── Header — see assets/css/header.css ──────────── */

/* ── Main Content ───────────────────────────────── */
.dc-main {
    min-height: 60vh;
    padding: 0;
}

/* ── Footer — see assets/css/footer.css ──────────── */

/* ── Builder Sections ───────────────────────────── */
.dc-builder .dc-section {
    position: relative;
}

.dc-builder .dc-section:nth-child(even) {
    background-color: var(--dc-color-bg-alt);
}

/* ── Utility Classes ────────────────────────────── */
.dc-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.dc-text-center {
    text-align: center;
}
.dc-text-left {
    text-align: left;
}
.dc-text-right {
    text-align: right;
}

/* ═══════════════════════════════════════════════════
   Component Base Styles
   ═══════════════════════════════════════════════════ */

/* ── Eyebrow ────────────────────────────────────── */
.dc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    font-size: 0.8rem;
    color: rgba(0, 0, 0, 0.55);
    margin-bottom: 20px;
}

.dc-eyebrow::before {
    content: "";
    width: 44px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.35));
}

/* ── Highlight ──────────────────────────────────── */
.dc-highlight {
    color: var(--accent-pink);
}

/* ── Reveal (initial state for GSAP) ────────────── */
.dc-reveal {
    opacity: 0;
    transform: translateY(32px);
}

/* Fallback: show content when JS is unavailable */
.no-js .dc-reveal {
    opacity: 1;
    transform: none;
}

/* ── Section ────────────────────────────────────── */
.dc-section:not(.dc-hero) {
    position: relative;
    padding: 6vh 0 2vh !important;
}

@media (max-width: 768px) {
    .dc-section:not(.dc-hero) {
        padding: 10vh 0 2vh !important;
    }
}