/*
 * Metropolis — Complete @font-face registry
 * ─────────────────────────────────────────────────────────────────────
 * Font files must be at:
 *   public/fonts/metropolis/Metropolis-*.otf
 *
 * src URLs use absolute root-relative paths (starting with /)
 * This means the path resolves from the site root, NOT from
 * wherever this CSS file lives — so it works whether this file
 * is at css/font-face.css, assets-v3/css/global.css, or anywhere else.
 *
 * ─────────────────────────────────────────────────────────────────────
 * Weight → File map:
 *   100  Thin
 *   200  ExtraLight
 *   300  Light          ← footer body, address, contact, social URLs
 *   400  Regular
 *   500  Medium
 *   600  SemiBold       ← footer "SKYWARD" brand word in copyright bar
 *   700  Bold           ← footer headings (social platform names)
 *   800  ExtraBold
 *   900  Black
 *
 * Usage — just declare font-family + font-weight.
 * The browser picks the exact .otf automatically:
 *   font-family : "Metropolis", sans-serif;
 *   font-weight : 300;   → loads Metropolis-Light.otf
 *   font-weight : 700;   → loads Metropolis-Bold.otf
 * ─────────────────────────────────────────────────────────────────────
 */

/* 100 — Thin */
@font-face {
    font-family  : "Metropolis";
    src          : url("/fonts/metropolis/Metropolis-Thin.otf") format("opentype");
    font-weight  : 100;
    font-style   : normal;
    font-display : swap;
}
@font-face {
    font-family  : "Metropolis";
    src          : url("/fonts/metropolis/Metropolis-ThinItalic.otf") format("opentype");
    font-weight  : 100;
    font-style   : italic;
    font-display : swap;
}

/* 200 — ExtraLight */
@font-face {
    font-family  : "Metropolis";
    src          : url("/fonts/metropolis/Metropolis-ExtraLight.otf") format("opentype");
    font-weight  : 200;
    font-style   : normal;
    font-display : swap;
}
@font-face {
    font-family  : "Metropolis";
    src          : url("/fonts/metropolis/Metropolis-ExtraLightItalic.otf") format("opentype");
    font-weight  : 200;
    font-style   : italic;
    font-display : swap;
}

/* 300 — Light  ← FOOTER BODY: address, contact, social URLs, fine print */
@font-face {
    font-family  : "Metropolis";
    src          : url("/fonts/metropolis/Metropolis-Light.otf") format("opentype");
    font-weight  : 300;
    font-style   : normal;
    font-display : swap;
}
@font-face {
    font-family  : "Metropolis";
    src          : url("/fonts/metropolis/Metropolis-LightItalic.otf") format("opentype");
    font-weight  : 300;
    font-style   : italic;
    font-display : swap;
}

/* 400 — Regular */
@font-face {
    font-family  : "Metropolis";
    src          : url("/fonts/metropolis/Metropolis-Regular.otf") format("opentype");
    font-weight  : 400;
    font-style   : normal;
    font-display : swap;
}
@font-face {
    font-family  : "Metropolis";
    src          : url("/fonts/metropolis/Metropolis-RegularItalic.otf") format("opentype");
    font-weight  : 400;
    font-style   : italic;
    font-display : swap;
}

/* 500 — Medium */
@font-face {
    font-family  : "Metropolis";
    src          : url("/fonts/metropolis/Metropolis-Medium.otf") format("opentype");
    font-weight  : 500;
    font-style   : normal;
    font-display : swap;
}
@font-face {
    font-family  : "Metropolis";
    src          : url("/fonts/metropolis/Metropolis-MediumItalic.otf") format("opentype");
    font-weight  : 500;
    font-style   : italic;
    font-display : swap;
}

/* 600 — SemiBold  ← FOOTER: "SKYWARD" brand word in copyright bar */
@font-face {
    font-family  : "Metropolis";
    src          : url("/fonts/metropolis/Metropolis-SemiBold.otf") format("opentype");
    font-weight  : 600;
    font-style   : normal;
    font-display : swap;
}
@font-face {
    font-family  : "Metropolis";
    src          : url("/fonts/metropolis/Metropolis-SemiBoldItalic.otf") format("opentype");
    font-weight  : 600;
    font-style   : italic;
    font-display : swap;
}

/* 700 — Bold  ← FOOTER HEADINGS: social platform names */
@font-face {
    font-family  : "Metropolis";
    src          : url("/fonts/metropolis/Metropolis-Bold.otf") format("opentype");
    font-weight  : 700;
    font-style   : normal;
    font-display : swap;
}
@font-face {
    font-family  : "Metropolis";
    src          : url("/fonts/metropolis/Metropolis-BoldItalic.otf") format("opentype");
    font-weight  : 700;
    font-style   : italic;
    font-display : swap;
}

/* 800 — ExtraBold */
@font-face {
    font-family  : "Metropolis";
    src          : url("/fonts/metropolis/Metropolis-ExtraBold.otf") format("opentype");
    font-weight  : 800;
    font-style   : normal;
    font-display : swap;
}
@font-face {
    font-family  : "Metropolis";
    src          : url("/fonts/metropolis/Metropolis-ExtraBoldItalic.otf") format("opentype");
    font-weight  : 800;
    font-style   : italic;
    font-display : swap;
}

/* 900 — Black */
@font-face {
    font-family  : "Metropolis";
    src          : url("/fonts/metropolis/Metropolis-Black.otf") format("opentype");
    font-weight  : 900;
    font-style   : normal;
    font-display : swap;
}
@font-face {
    font-family  : "Metropolis";
    src          : url("/fonts/metropolis/Metropolis-BlackItalic.otf") format("opentype");
    font-weight  : 900;
    font-style   : italic;
    font-display : swap;
}

:root {
    --skyward-blueblack: #0b1c36;
    --skyward-red: #a21d20;
    --skyward-blue: #153767;
    --skyward-lightblue: #70cbf1;
    --skyward-yellow: #f9dc5e;
    --skwyard-yellow: #f9dc5e;
    --skyward-white: #f4f4f4;

    --size-hero-main-heading: 132px;
    --size-heading: 48px;
    --size-hero-description: 48px;
    --size-description: 24px;
    --size-footer-heading: 20px;
    --size-footer-text: 16px;
}

body {
    font-family: "Metropolis", sans-serif;
    color: var(--skyward-blueblack);
    background: var(--skyward-white);
}