/* ============================================
   DESIGN TOKENS
   ============================================ */
:root {
    --color-bg-light: #F5F1EB;
    --color-bg-dark: #0F1524;
    --color-bg-dark-alt: #161D2F;
    --color-text-primary: #1E1E1E;
    --color-text-secondary: #6B7B8D;
    --color-text-light: #E8E4DE;
    --color-text-light-muted: #9BA3AE;
    --color-accent: #B8763E;
    --color-accent-light: #D4944F;
    --color-navy: #1A2744;
    --color-border: #D6D0C7;
    --color-border-dark: #2A3550;

    --font-heading: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-accent: 'Playfair Display', serif;

    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 5rem;
    --space-3xl: 8rem;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-base: 0.6s;
}

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

html { scroll-behavior: smooth; font-size: 16px; }

body {
    font-family: var(--font-body);
    color: var(--color-text-primary);
    background-color: var(--color-bg-light);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* ============================================
   NAV — subpages (fixed dark bar + back link)
   ============================================ */
.nav {
    position: fixed; top: 0; left: 0; width: 100%; z-index: 50;
    padding: var(--space-md) 0;
    background: rgba(15,21,36,0.95);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.nav__inner {
    max-width: 1280px; margin: 0 auto; padding: 0 var(--space-lg);
    display: flex; align-items: center; justify-content: space-between;
}
.nav__logo img { height: 30px; width: auto; }
.nav__back {
    font-family: var(--font-heading); font-size: 0.85rem; font-weight: 500;
    color: rgba(255,255,255,0.7); transition: color 0.3s ease;
    display: flex; align-items: center; gap: 0.4rem;
}
.nav__back:hover { color: var(--color-accent-light); }
.nav__back svg { transition: transform 0.3s ease; }
.nav__back:hover svg { transform: translateX(-3px); }

/* ============================================
   FOOTER
   ============================================ */
.footer { padding: var(--space-lg) 0; background: var(--color-bg-dark); }
.footer .container {
    max-width: 1280px; margin: 0 auto; padding: 0 var(--space-lg);
    display: flex; align-items: center; justify-content: space-between;
}
.footer__left { display: flex; align-items: center; gap: 0.6rem; }
.footer__left img { height: 14px; width: auto; opacity: 0.5; }
.footer__left p { font-size: 0.75rem; color: var(--color-text-light-muted); font-family: var(--font-heading); margin: 0; }

/* ============================================
   FOCUS — accessibility
   ============================================ */
:focus-visible {
    outline: 2px solid var(--color-accent-light);
    outline-offset: 2px;
}

/* ============================================
   RESPONSIVE — shared
   ============================================ */
@media (max-width: 768px) {
    .footer .container { flex-direction: column; gap: var(--space-sm); text-align: center; }
}