/* OMFC International | tokens.css: every colour, type size, spacing step, easing and z-index
   as a custom property. The other stylesheets only use these names. */

/* --- 0. Fonts: served from assets/fonts/ (no request to another site). Latin and Latin Extended subsets of
   Archivo (one variable file: weights 200 to 800, widths 62 to 125%) and IBM Plex Mono 400 and 500, from Google
   Fonts, SIL Open Font Licence (licenses/). A page downloads the Latin Extended files only if it uses those
   characters. --- */

/* Archivo, latin-ext */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Archivo, latin */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Mono, latin-ext */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Mono, latin */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Mono, latin-ext */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Mono, latin */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- 1. Colour ---------------------------------------------------------- */

  /* Darks: near-black text and the graphite backgrounds */
  --ink: #101112;          /* body text on light backgrounds */
  --graphite: #16181a;     /* dark section background */
  --graphite-2: #1d2023;   /* slightly lighter dark, used behind images while they load */
  --graphite-3: #2a2e32;   /* scrollbar thumb and other dark details */

  /* Neutrals */
  --steel: #5d646a;
  --mist: #9ba2a8;

  /* Lights: stone and paper */
  --stone: #e6e2da;        /* light section background */
  --stone-2: #d8d2c7;      /* placeholder behind images on light backgrounds */
  --paper: #f2efe8;        /* the enquiry sheet */
  --bone: #f5f3ee;         /* text on dark backgrounds */
  --white: #ffffff;        /* tiles behind the accreditation badges (the images' own background) */

  /* Accent: site-team hi-vis. Used sparingly, for progress and hover states. */
  --hivis: #dcf53c;
  --hivis-deep: #c4de1f;

  /* The OMFC International logo's green (the header's status light over light sections) */
  --logo-green: #294832;

  /* A soft shadow under the bone logo in the header, so it holds over bright patches of the hero photographs */
  --logo-shadow: drop-shadow(0 2px 3px rgba(16, 17, 18, 0.45));

  /* Feedback */
  --error: #b83720;        /* form validation messages (5:1 on the paper sheet) */

  /* Hairlines and secondary text per background; data-theme picks the pair as --line / --muted */
  --line-on-dark: rgba(245, 243, 238, 0.16);
  --line-on-light: rgba(16, 17, 18, 0.16);
  --muted-on-dark: rgba(245, 243, 238, 0.58);
  --muted-on-light: rgba(16, 17, 18, 0.62);  /* at least 4.5:1 on stone and paper (WCAG AA) */

  /* --- 2. Typography ------------------------------------------------------ */

  /* Archivo is variable: font-stretch 62 to 68% is condensed display, 100% normal, 122 to 125% the wordmark */
  --font-sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-narrow: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Fluid type scale: clamp(minimum, viewport-based value, maximum) */
  --fs-mega: clamp(4.25rem, 15.6vw, 20rem);      /* "The envelope, installed." */
  --fs-display: clamp(3rem, 8.2vw, 10.5rem);
  --fs-h1: clamp(2.6rem, 6vw, 7rem);
  --fs-h2: clamp(2.1rem, 4.5vw, 5rem);           /* section headings */
  --fs-h3: clamp(1.35rem, 1.9vw, 2rem);
  --fs-lead: clamp(1.3rem, 2.3vw, 2.45rem);      /* large introductory text */
  --fs-body: clamp(0.95rem, 0.25vw + 0.88rem, 1.0625rem);
  --fs-small: 0.8125rem;
  --fs-label: 0.6875rem;                         /* monospaced uppercase labels */

  /* Line heights */
  --lh-mega: 0.84;
  --lh-tight: 0.92;
  --lh-snug: 1.08;
  --lh-body: 1.55;

  /* Letter spacing */
  --track-label: 0.08em;   /* open tracking for small uppercase labels */
  --track-tight: -0.022em; /* closed tracking for large headings */

  /* --- 3. Spacing --------------------------------------------------------- */

  /* Fixed steps for small gaps */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* Fluid spacing between and inside sections */
  --space-section: clamp(5.5rem, 11vw, 12rem);   /* top and bottom padding of a section */
  --space-block: clamp(2.5rem, 5.5vw, 5.5rem);   /* gap between blocks inside a section */

  /* --- 4. Layout ---------------------------------------------------------- */

  --margin: clamp(1rem, 3.2vw, 3.5rem);   /* left and right page margin */
  --gutter: clamp(0.75rem, 1.5vw, 1.5rem); /* gap between grid columns */
  --max: 1760px;                           /* maximum content width */
  --header-h: 3.5rem;                      /* the header's line: its buttons are centred on it, and content
                                              under the header starts below it (desktop: below) */
  --control-h: 2.5rem;                     /* height of the header's buttons */
  --logo-h: 4.5rem;                        /* the header logo's height (fixed; desktop: below) */
  --header-top: clamp(0.625rem, 1.4vw, 1rem); /* gap above the header bar */

  /* --- 5. Shape ----------------------------------------------------------- */

  --hair: 1px;
  --tick: 7px;

  /* --- 6. Motion ---------------------------------------------------------- */

  /* Easing curves */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);        /* quick start, long gentle stop */
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);    /* for things that move and stop */
  --ease-roll: cubic-bezier(0.625, 0.05, 0, 1);     /* label and icon roll-overs */
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);

  /* Durations */
  --dur-1: 0.18s;
  --dur-2: 0.36s;
  --dur-3: 0.6s;
  --dur-4: 0.9s;
  --dur-5: 1.4s;

  /* --- 7. Stacking order (z-index): higher sits on top -------------------- */

  --z-content: 1;
  --z-overlay: 5;     /* pointer-following project preview */
  --z-header: 50;     /* fixed header */
  --z-consent: 55;    /* cookie choice (below the case study, so it never covers one) */
  --z-case: 60;       /* case study overlay */
  --z-viewer: 70;     /* photograph viewer (above the case study) */
  --z-menu: 80;       /* full-screen menu */
  --z-loader: 90;     /* loading screen */

  /* --- 8. Shadows --------------------------------------------------------- */

  /* The enquiry sheet: a crisp edge plus two soft, warm layers */
  --shadow-sheet:
    0 1px 0 rgba(0, 0, 0, 0.04),
    0 30px 60px -30px rgba(40, 34, 22, 0.32),
    0 80px 140px -70px rgba(40, 34, 22, 0.4);

  /* Floating cards (hotspot photograph, fallback panel) */
  --shadow-float: 0 30px 80px -30px rgba(0, 0, 0, 0.55);
}

/* Desktop: a taller header line and a larger logo */
@media (min-width: 1024px) {
  :root {
    --header-h: 4rem;
    --control-h: 2.75rem;
    --logo-h: 5.5rem;
  }
}