/* --------------------------------------------------------- */
/* GD BASE — MS0 ARCHITECTURE                                */
/* Global tokens, resets, typography, spacing, containers    */
/* --------------------------------------------------------- */

/* --------------------------------------------- */
/* FONT LOADING — Suisse Intl                    */
/* --------------------------------------------- */

@font-face {
    font-family: 'Suisse Intl';
    src: url('../fonts/SuisseIntl-Book.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Suisse Intl';
    src: url('../fonts/SuisseIntl-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Suisse Intl';
    src: url('../fonts/SuisseIntl-Semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------- */
/* COLOR TOKENS — GD_COLOR v1.1                  */
/* --------------------------------------------- */

:root {
    --graphite:    #1A1A1A;
    --bone:        #F4F1ED;
    --white:       #FFFFFF;
    
    /* Fox Trace — never solid */
    --fox-base:    #8A1F1A;
    --fox-04:      color-mix(in srgb, var(--fox-base) 4%, transparent);
    --fox-07:      color-mix(in srgb, var(--fox-base) 7%, transparent);
    --fox-12:      color-mix(in srgb, var(--fox-base) 12%, transparent);
    
    /* Copper — micro-accents only */
    --copper:      #9A4F31;
    
    /* Slate — analysis only */
    --slate:       color-mix(in srgb, #2B4A4F 12%, transparent);
    
    /* Spacing scale */
    --space-xxs: 4px;
    --space-xs:  8px;
    --space-s:   16px;
    --space-m:   32px;
    --space-l:   64px;
    --space-xl:  96px;
}

/* --------------------------------------------- */
/* GLOBAL RESET — minimal, structural            */
/* --------------------------------------------- */

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

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bone);
    color: var(--graphite);
    font-family: 'Suisse Intl', system-ui, sans-serif;
    font-size: 18px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* --------------------------------------------- */
/* TYPOGRAPHY — foundational scale               */
/* (Hero, Architecture, Home etc. build on top)  */
/* --------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    font-family: 'Suisse Intl', system-ui, sans-serif;
    font-weight: 500;
    color: var(--graphite);
}

h1 { font-size: 56px; line-height: 1.05; }
h2 { font-size: 36px; line-height: 1.15; }
h3 { font-size: 28px; line-height: 1.20; }
p  { margin-bottom: var(--space-m); }

/* --------------------------------------------- */
/* LINKS — minimal, structural, no marketing     */
/* --------------------------------------------- */

a {
    color: var(--graphite);
    text-decoration: none;
}

a:hover {
    opacity: 0.85;
}

/* --------------------------------------------- */
/* GLOBAL CONTAINER — alignment backbone         */
/* Mirrors hero-inner max-width + padding        */
/* --------------------------------------------- */

.gd-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-l);
    padding-right: var(--space-l);
}

/* --------------------------------------------- */
/* BLOCK RESET — removes WP Gutenberg spacing    */
/* --------------------------------------------- */

.wp-block {
    margin: 0;
}

/* --------------------------------------------- */
/* GRID DEFAULTS (12-col base)                   */
/* All pages may extend this                     */
/* --------------------------------------------- */

.gd-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    width: 100%;
}

/* --------------------------------------------- */
/* MEDIA QUERIES — mobile first base             */
/* --------------------------------------------- */

@media (max-width: 680px) {
    body {
        font-size: 16px;
    }
    
    h1 { font-size: 42px; }
    h2 { font-size: 28px; }
    h3 { font-size: 24px; }
    
    .gd-container {
        padding-left: var(--space-m);
        padding-right: var(--space-m);
    }
}