/* Lumisphere design tokens — shared by the website and social templates.
   Source of truth: clients/lumisphere/DESIGN.md */

@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("../fonts/dm-mono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* Colour */
  --obsidian: #07080A;
  --graphite: #121316;
  --white: #FFFFFF;
  --mist: #E8EAED;
  --ash: #9AA0A6;
  --warm: #FFC48C;
  --cool: #D6E6FF;
  --neutral: #FFFFFF;
  --rim: linear-gradient(135deg, #9FE8FF 0%, #B8A7FF 50%, #FFB8D9 100%);
  --hairline: rgb(255 255 255 / .12);
  --hairline-strong: rgb(255 255 255 / .22);
  --smoke: 10 11 13;

  /* Type families */
  --font-sans: "Hanken Grotesk", ui-sans-serif, sans-serif;
  --accent-weight: 700; /* emphasis = bold Hanken Grotesk, same size as the heading */
  --font-mono: "DM Mono", ui-monospace, monospace;

  /* Type scale (web) */
  --fs-display: clamp(2.75rem, 1.6rem + 4.6vw, 5.75rem);
  --fs-h2: clamp(2.125rem, 1.4rem + 2.9vw, 4rem);
  --fs-h3: clamp(1.375rem, 1.1rem + .9vw, 1.875rem);
  --fs-lead: clamp(1.1875rem, 1.05rem + .45vw, 1.375rem);
  --fs-body: clamp(1.0625rem, 1rem + .2vw, 1.1875rem);
  --fs-label: .8125rem;
  --fs-spec: .75rem;
  --lh-tight: 1.04;
  --lh-body: 1.6;
  --track-display: -.02em;
  --track-label: .08em;
  --track-spec: .06em;

  /* Space & layout */
  --gutter: clamp(20px, 5vw, 72px);
  --max: 1296px;
  --section-y: clamp(96px, 10vw, 160px);
  --stack: clamp(40px, 5vw, 64px); /* heading to content, every section */
  --radius-panel: 28px;
  --radius-tile: 24px;
  --radius-input: 14px;

  /* Glass */
  --glass-smoke-panel: .58;
  --glass-smoke-tile: .40;
  --glass-smoke-card: .36;
  --glass-shadow: 0 24px 56px rgb(0 0 0 / .5);

  /* Motion */
  --ease: cubic-bezier(.65, 0, .2, 1);
  --dur-1: 600ms;
  --dur-2: 900ms;
  --dur-3: 1200ms;
}