/* ==========================================================================
 * Time Out Boxing — Colors & Type
 *
 * Canonical design tokens for the Time Out Boxing brand. Import into any
 * design artifact; everything downstream pulls from these custom properties.
 *
 * Tokens mirror the live site's "Mohunky Cornerstone" CSS variables so that
 * any class or variable used in /vendor/mcs/css/* will resolve correctly.
 * ========================================================================== */

/* ---- Fonts: Poppins is the site font, loaded via Google Fonts ----------- */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,400&display=swap");

:root {
    /* ------------------------------------------------------------------ *
     * COLOUR TOKENS
     * Primary = neon boxing-glove green. Secondary = softer mint.
     * Pair neon greens against deep off-black. Reserve pure white for
     * photography captions and the rare clean surface.
     * ------------------------------------------------------------------ */
    --colorPrimary: #00ffa3;
    --colorPrimary-light: #80ffd1;
    --colorPrimary-dark: #0e9368;

    --colorSecondary: #b8ffae;
    --colorSecondary-light: #e5ffe1;
    --colorSecondary-dark: #8bff7b;

    --colorOffBlack: #20272b;
    --colorOffBlack-light: #333333;
    --colorOffBlack-dark: #1b1b1b;

    --colorGrey: #d0d0d2;
    --colorGrey-light: #e7e8eb;
    --colorGrey-dark: #707070;

    --colorOffWhite: #fffbf8;
    --colorWhite: #ffffff;
    --colorBlack: #000000;
    --colorErrorRed: #ff2400;

    /* Signature logo gradient: mint → neon, left-to-right. */
    --gradPrimary: linear-gradient(to right, var(--colorSecondary), var(--colorPrimary));
    /* Logo glove "punch" gradient: #8fffa6 → #cdffb0, used inside SVG logos. */
    --gradGlove: linear-gradient(135deg, #8fffa6 0%, #cdffb0 100%);

    /* ------------------------------------------------------------------ *
     * TYPOGRAPHY TOKENS
     * One family. Poppins does the whole job — 200 for body, 700/800 for
     * the shout. Nunito ships in the vendor bundle as a fallback but the
     * live site is 100 % Poppins.
     * ------------------------------------------------------------------ */
    --fontBody: "Poppins", Helvetica, Arial, sans-serif;
    --fontHeading: "Poppins", Helvetica, Arial, sans-serif;

    --fw-thin: 200;      /* body copy weight — notably light */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-bold: 700;      /* heading weight */
    --fw-black: 800;     /* display / hero shout */

    /* ------------------------------------------------------------------ *
     * RADII / SHADOWS
     * The brand rounds everything to soft pebbles — the signature move is
     * the 1.5rem pill on buttons + chips.
     * ------------------------------------------------------------------ */
    --radius-pill: 1.5rem;      /* buttons, nav chips */
    --radius-card: 0.75rem;     /* tiles and cards */
    --radius-small: 0.25rem;    /* inline code, tags */

    --shadow-glow: 0 0 14px var(--colorPrimary);   /* on-dark CTA hover */
    --shadow-lift: 0 0.5rem 1.5rem rgba(32, 39, 43, 0.08);
}

/* ========================================================================== *
 * BASE ELEMENT STYLES
 * ========================================================================== */

html {
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--fontBody);
    font-weight: var(--fw-thin);
    color: var(--colorOffBlack);
    background: var(--colorWhite);
    font-size: 18px;
    line-height: 1.5;
}

/* ---- Headings: tight leading, heavy weight, generous scale -------------- */
h1, .-fauxH1 { font-size: 3.370rem; font-weight: 700; line-height: 1.125em; margin: 0 0 1rem; }
h2, .-fauxH2 { font-size: 3.350rem; font-weight: 700; line-height: 1.125em; margin: 0 0 1rem; }
h3 { font-size: 2.250rem; font-weight: 700; line-height: 1.25em; margin: 0 0 1rem; }
h4 { font-size: 1.5625rem; font-weight: 700; margin: 0 0 1rem; }
h5 { font-size: 1.250rem; font-weight: 700; margin: 0 0 1rem; }
h6 { font-size: 1.000rem; font-weight: 700; margin: 0 0 1rem; }

/* ---- Body text: 1.125rem @ weight 200 is the brand voice ---------------- */
p, ol, ul {
    font-size: 1.125rem;
    font-weight: 200;
    line-height: 1.5em;
    margin: 0 0 1em;
}
strong { font-weight: 700; }

/* ---- Links: neon-green dotted underline, turns solid on hover ----------- */
a, a:visited {
    color: var(--colorPrimary-dark);
    border-bottom: 0.0625em dotted var(--colorPrimary-dark);
    text-decoration: none;
}
a:hover { border-bottom-style: solid; }
a:focus, a:active { outline: none; }

/* ---- Blockquote: off-white box, primary-green left rule ----------------- */
blockquote {
    margin: 1em 0;
    padding: 1em;
    border: none;
    border-left: 0.125rem solid var(--colorPrimary);
    background-color: var(--colorOffWhite);
    font-size: 1.25em;
    line-height: 1.3125em;
    font-style: italic;
}
blockquote cite,
blockquote span.author {
    display: block;
    padding-top: 0.5em;
    font-size: 1rem;
    font-style: normal;
    color: var(--colorOffBlack);
}

hr {
    display: block;
    width: 100%;
    height: 1px;
    margin: 2rem 0;
    border: none;
    background-color: var(--colorGrey);
}

/* ---- Inline code, preformatted ----------------------------------------- */
code {
    display: inline-block;
    padding: 0 0.5em;
    border-radius: var(--radius-small);
    background-color: var(--colorOffBlack);
    color: var(--colorOffWhite);
    font-size: 0.875em;
    line-height: 1.5em;
}
pre {
    display: block;
    margin: 0 0 1rem;
    padding: 1em;
    border-radius: var(--radius-small);
    color: var(--colorOffWhite);
    background: var(--colorOffBlack);
    overflow-x: auto;
}

/* ========================================================================== *
 * UTILITY CLASSES — mirror the live `-prefix` helpers
 * ========================================================================== */

/* Backgrounds */
.-bgPrimary       { background-color: var(--colorPrimary); }
.-bgPrimary-light { background-color: var(--colorPrimary-light); }
.-bgPrimary-dark  { background-color: var(--colorPrimary-dark); }
.-bgSecondary     { background-color: var(--colorSecondary); }
.-bgOffBlack      { background-color: var(--colorOffBlack); }
.-bgOffWhite      { background-color: var(--colorOffWhite); }
.-bgWhite         { background-color: var(--colorWhite); }
.-bgGradPrimary   { background: var(--gradPrimary); }

/* Text colour */
.-txtPrimary      { color: var(--colorPrimary-dark); }
.-txtPrimaryLight { color: var(--colorPrimary); }
.-txtOffBlack     { color: var(--colorOffBlack); }
.-txtOffWhite     { color: var(--colorOffWhite); }
.-txtWhite        { color: var(--colorWhite); }
.-txtGrey         { color: var(--colorGrey-dark); }
.-txtError        { color: var(--colorErrorRed); }
.-txtHighlight    { color: var(--colorPrimary-dark); }

/* Fill (SVG) */
.-fillPrimary    { fill: var(--colorPrimary); }
.-fillOffBlack   { fill: var(--colorOffBlack); }
.-fillWhite      { fill: var(--colorWhite); }

/* Text alignment / size */
.-txtCenter  { text-align: center; }
.-txtLeft    { text-align: left; }
.-txtRight   { text-align: right; }
.-txtUpper   { text-transform: uppercase; }
.-txtSmall   { font-size: 1em; font-weight: 400; }
.-txtLarge   { font-size: 1.25em; }
.-txtLarger  { font-size: 1.5em; }

/* Font weights */
.-txt200 { font-weight: 200; }
.-txt400 { font-weight: 400; }
.-txt500 { font-weight: 500; }
.-txt700 { font-weight: 700; }
.-txt800 { font-weight: 800; }

/* ========================================================================== *
 * RESPONSIVE
 * ========================================================================== */
@media only screen and (max-width: 600px) {
    h1, .-fauxH1 { font-size: 2.5rem; }
    h2, .-fauxH2 { font-size: 2rem; }
    h3 { font-size: 1.75rem; }
}