/**
 * global.css — Site-wide styles shared across portfolio and blog.
 * Loaded first on every page. Page-specific stylesheets override.
 */

 /* Google Fonts import */
 @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;900&family=Libre+Baskerville:ital,wght@0,400;1,400&display=swap');

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

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Design tokens - locked pallete per design spec */
:root {
    /* Colors */
    --color-black:          #040303;
    --color-black-rgb:      4, 3, 3;
    --color-dark-brown:     #1a1411;
    --color-medium-brown:   #2d2218;
    --color-bronze:         #4a3f35;
    --color-copper:         #b88657;
    --color-amber:          #8f6b45;
    --color-cream:          #d9cdc4;
    --color-smoke:          #9a8b7a;
    --color-candlelight:    #e8ddd0;

    /* Typography */
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Libre Baskerville', Georgia, serif;

    /* Line heights */
    --line-height-heading:  1.2;
    --line-height-body:     1.6;
    --line-height-nav:      1.0;

    /* Spacing scale (8px baseline) */
    --space-xs:     0.5rem;   /* 8px */
    --space-sm:     1rem;     /* 16px */
    --space-md:     1.5rem;   /* 24px */
    --space-lg:     2rem;     /* 32px */
    --space-xl:     3rem;     /* 48px */
    --space-xxl:    4rem;     /* 64px */

    /* Layout */
    --max-width:            1200px;
    --border-radius:        4px;
    --nav-height-desktop:   60px;
    --nav-height-mobile:    50px;
    --footer-height:        4rem;
}

/* Base Typography */
body {
    font-family:            var(--font-body);
    color:                  var(--color-smoke);
    background-color:       var(--color-black);
    line-height:            var(--line-height-body);
    font-size:              1.125rem;
    -webkit-font-smoothing: antialiased;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family:    var(--font-heading);
    color:          var(--color-candlelight);
    line-height:    var(--line-height-heading);
}

/* Captions */
.caption {
    font-family: var(--font-body);
    font-size: 0.875rem;       /* 14px */
    font-style: italic;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-smoke);
}

/* Links */
a {
    color:          var(--color-copper);
    text-decoration:underline;
    transition:     color 0.2s ease;
}

a:hover {
    color:          var(--color-amber);
}

/* Shared header */
.site-header {
    padding:        var(--space-sm) var(--space-md);
    border-bottom:  1px solid var(--color-bronze);
}

.site-header nav {
    display:    flex;
    gap:        var(--space-lg);
}

.site-header nav a {
    color:              var(--color-smoke);
    font-family:        var(--font-body);
    font-weight:        400;
    font-size:          1rem;
    text-decoration:    none;
    transition:         color 0.2s ease;
}

.site-header nav a:hover {
    color:          var(--color-copper);
}

/* Shared footer */
.site-footer {
    padding:    var(--space-sm) var(--space-md);
    border-top: 1px solid var(--color-bronze);
    text-align: center;
    color:      var(--color-smoke);
    font-size:  0.875rem;
}

/* ===================================================================
   COMPONENT MOUNT POINTS
   Placeholder styling — invisible against page background
   Prevents layout shift while components load via JS
   =================================================================== */

#navbar-mount {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--nav-height-desktop);
    background: var(--color-black);
    z-index: 1000;
}

#footer-mount {
    width: 100%;
}

@media (max-width: 767px) {
    #navbar-mount {
        height: var(--nav-height-mobile);
    }
}