/* 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. */

: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;

  /* Feedback */
  --error: #d9452b;        /* form validation messages */

  /* 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.58);

  /* --- 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: 2.875rem;                    /* height of the header bar */
  --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-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 */
  --z-cursor: 100;    /* custom cursor, always on top */

  /* --- 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);
}