/* ============================================================
   HPP × FSF Lab — Shared Design Tokens
   Built on the FREESIXTYFIVE Design DNA (v2026.06)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&family=Roboto+Mono:wght@400;500&display=swap');

:root {
  /* Neutrals */
  --ink:     #0A0F1C;
  --white:   #FFFFFF;
  --fog:     #F6F6F6;
  --gray-15: #ECECEC;
  --gray-50: #9A9A9A;
  --gray-60: #757575;
  --gray-70: #5C5C5C;
  --line:    #E5E5E5;

  /* Accents */
  --flame:   #FF402E;
  --coral:   #FF7A45;
  --sun:     #FFC857;
  --ocean:   #06A77D;
  --mint:    #4DC9B0;
  --pacific: #2E80F2;
  --navy:    #14213D;
  --magenta: #C71B6A;
  --plum:    #2C0B3F;

  /* Type */
  --font-sans: 'Roboto', system-ui, -apple-system, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, monospace;

  /* Motion */
  --easing: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 0.3s;
  --dur: 0.6s;
  --dur-slow: 1.1s;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* Shared atoms ------------------------------------------------ */

/* monospace label / tag */
.mono {
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 11px;
}

/* Headline accent pill — color via background, never color alone */
.pill {
  font-style: normal;
  padding: 0 0.22em;
  display: inline-block;
  line-height: 1.06;
}

/* Entrance reveal — hidden state AND transition are scoped to body.anim only,
   so removing that class makes content instantly visible (no stuck transition
   in throttled/!visible compositors). Base .reveal is always visible. */
@media (prefers-reduced-motion: no-preference) {
  body.anim .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.85s var(--easing), transform 0.85s var(--easing);
  }
  body.anim .reveal.in { opacity: 1; transform: none; }
}

/* image-slot baseline so placeholders read as intentional */
image-slot {
  --is-bg: var(--gray-15);
  background: var(--gray-15);
}

/* Language toggle (shared) */
.langtoggle {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid currentColor;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  overflow: hidden;
}
.langtoggle button {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  padding: 6px 10px;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity var(--dur-fast) var(--easing), background var(--dur-fast) var(--easing);
}
.langtoggle button[aria-pressed="true"] { opacity: 1; }