/*
File: variables.css
CSS custom properties for colors, typography, sizing, and breakpoints
*/

/* SELF-HOSTED FONTS (latin subset, variable weight) - files live in /fonts/ of the child theme */
@font-face {
    font-family: "Jost";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../../fonts/jost-latin-wght-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Instrument Sans";
    font-style: normal;
    font-display: swap;
    font-weight: 400 700;
    src: url("../../fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
}

:root {
    /* COLORS */
    --color-1: #0E3B22; /* DowFin green - primary */
    --color-2: #1F6B3F; /* Mid green - secondary, link hover */
    --color-3: #0A2A18; /* Deep green - utility bar, footer */
    --color-4: #F3F6F1; /* Tint - alternating section background */
    --color-5: #F5B800; /* DowFin gold - accent, primary CTA on green */
    
    --color-font-1: #14231A;
    --color-font-2: #4D5E53;
    --color-font-3: rgba(77, 94, 83, 0.6);
    --color-font-inverse: #fff;
    
    --color-ui-1: #fff;
    
    /* TYPOGRAPHY */
    --line-height: 1.5rem;
    --font-title: "Jost", "Century Gothic", "Helvetica Neue", "Arial", sans-serif;
    --font-body: "Instrument Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    --font-interactive: "Instrument Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    
    /* SIZING */
    --size-xxsmall: 0.375rem; /* line-height / 4 */
    --size-xsmall: 0.5rem; /* line-height / 3 */
    --size-small: 0.75rem; /* line-height / 2 */
    --size-medium: 1.5rem; /* line-height */
    --size-large: 3rem; /* line-height * 2 */
    --size-xlarge: 4.5rem; /* line-height * 3 */
    --size-xxlarge: 6rem; /* line-height * 4 */
    
    --row-max-width: 1920px;
    --row-width: 90.09%;
    
    /* BREAKPOINTS (for reference in media queries) */
    --breakpoint-laptop: 1400px;
    --breakpoint-tablet: 980px;
    --breakpoint-smartphone: 767px;
    --breakpoint-smartphone-portrait: 479px;
    
    /* TRANSITIONS */
    --transition-standard: all 0.3s ease;
}