/* Gleiro marketing — shared foundation for all homepage directions.
   Brand tokens come from brand/production/brand-kit/v01/tokens.css (proposed edition). */

@font-face { font-family: "Rubik"; src: url("fonts/Rubik-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Rubik"; src: url("fonts/Rubik-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/instrument-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/instrument-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/instrument-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/instrument-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("fonts/source-serif-4-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("fonts/source-serif-4-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("fonts/source-serif-4-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --plum: #291B35;
  --plum-deep: #1B1124;
  --plum-ink: #120C17;
  --cream: #EFEAE0;
  --cream-dim: #D9D2C4;
  --lime: #D9FF59;
  --lavender: #BFA9D2;
  --muted-on-plum: #B9AEC4;
  --muted-on-cream: #5E5168;

  --font-sans: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-editorial: "Source Serif 4", Georgia, serif;
  --font-grotesk: "Instrument Sans", "Rubik", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-ui: 160ms;
  --t-enter: 480ms;
  --t-demo: 800ms;

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1360px;
  --radius-control: 8px;
  --radius-media: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-sans); font-synthesis: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -64px; z-index: 1000; padding: 12px 16px; background: var(--lime); color: var(--plum); border-radius: var(--radius-control); font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 16px; }

:focus-visible { outline: 3px solid var(--focus, var(--lime)); outline-offset: 5px; border-radius: 4px; }

.mono { font-family: var(--font-mono); font-weight: 400; letter-spacing: 0.02em; }

/* Motion toggle (WCAG 2.2.2): every direction exposes a pause control that sets [data-motion="paused"]. */
.motion-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid currentColor; background: transparent; cursor: pointer; font: 500 13px/1 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.75; transition: opacity var(--t-ui) var(--ease); }
.motion-toggle:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
html[data-motion="paused"] *, html[data-motion="paused"] *::before, html[data-motion="paused"] *::after { animation-play-state: paused !important; }