/* ==========================================================================
   Orient Innovation Park
   Design tokens: the single source of truth for colour, type, space, motion.

   Theme lock: the page runs one theme at a time. Sections tint within the
   theme family, they never invert. Dark is the brand expression (gold
   gradient logo, charcoal architecture). Light is a full second theme,
   adapted not inverted.

   Radius scale: 0 everywhere. The architecture is rectilinear, the signage
   is sharp, the roller doors are sharp. One radius, no exceptions.
   ========================================================================== */

/* --------------------------------------------------------------- typefaces
   Self-hosted so there is no third-party font request on first paint.
   Mulish is the brand sans. IBM Plex Mono carries figures and micro-labels.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: 'Mulish';
  src: url('../assets/fonts/mulish-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mulish';
  src: url('../assets/fonts/mulish-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mulish';
  src: url('../assets/fonts/mulish-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mulish';
  src: url('../assets/fonts/mulish-latin-800-normal.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('../assets/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('../assets/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ themes */
:root {
  color-scheme: dark;

  /* surfaces */
  --bg: #101116;
  --bg-elev: #191b21;
  --bg-sunken: #0a0b0e;
  --bg-plate: #f7f5ee;
  --line: rgba(255, 255, 255, 0.11);
  --line-strong: rgba(255, 255, 255, 0.2);

  /* ink */
  --fg: #f4f4f2;
  --fg-muted: #a6a9b2;
  --fg-faint: #868a95;

  /* the single accent: signage gold, taken from the building signage */
  --accent: #e3b23c;
  --accent-strong: #f0c55c;
  --accent-ink: #17181c;
  --accent-soft: rgba(227, 178, 60, 0.13);
  --accent-line: rgba(227, 178, 60, 0.34);

  /* form and focus */
  --focus: #f0c55c;
  --scrim: rgba(10, 11, 14, 0.72);

  /* type */
  --font-sans: 'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  --fs-display: clamp(2.375rem, 4.2vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 3vw, 2.5rem);
  --fs-h3: clamp(1.125rem, 1.5vw, 1.3125rem);
  --fs-lead: clamp(1.0625rem, 1.3vw, 1.1875rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;

  --lh-tight: 1.02;
  --lh-snug: 1.15;
  --lh-body: 1.62;

  --tr-display: -0.03em;
  --tr-body: -0.005em;

  /* layout */
  --header-h: 64px;

  /* space */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --section-y: clamp(4rem, 6.5vw, 6rem);
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --shell: 1320px;
  --measure: 62ch;

  /* shape */
  --radius: 0;

  /* motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 620ms;

  /* layers */
  --z-header: 40;
  --z-panel: 50;
}

:root[data-theme='light'] {
  color-scheme: light;

  --bg: #e8e9e5;
  --bg-elev: #ffffff;
  --bg-sunken: #dedfd9;
  --bg-plate: #f7f5ee;
  --line: rgba(26, 28, 34, 0.14);
  --line-strong: rgba(26, 28, 34, 0.26);

  --fg: #191b21;
  --fg-muted: #565b66;
  --fg-faint: #5b6069;

  --accent: #7d5a0c;
  --accent-strong: #5f4408;
  --accent-ink: #fffdf7;
  --accent-soft: rgba(125, 90, 12, 0.1);
  --accent-line: rgba(125, 90, 12, 0.32);

  --focus: #6e4e08;
  --scrim: rgba(25, 27, 33, 0.6);
}

/* --------------------------------------------------------------- structure */
@media (min-width: 1024px) {
  :root {
    --header-h: 72px;
  }
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-y);
}

.section--elev {
  background: var(--bg-elev);
}

.section--sunken {
  background: var(--bg-sunken);
}

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

/* Section heading. Stacked, never split. One focused message per section. */
.head {
  display: grid;
  gap: var(--sp-4);
  max-width: var(--measure);
  margin-bottom: clamp(2.5rem, 4.5vw, 4rem);
}

.head__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.head__title {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-display);
  color: var(--fg);
  text-wrap: balance;
}

.head__body {
  margin: 0;
  max-width: 58ch;
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--fg-muted);
}

/* Small caps data label. Used for figures, unit types and roles. */
.label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.figure {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ------------------------------------------------------------------ motion */
.js .reveal {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition:
    opacity var(--dur-slow) var(--ease),
    transform var(--dur-slow) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}