/* le-tour design tokens — the single source of truth for brand values.
 *
 * Derived from the landing page (letour-website/app/globals.css) for
 * identity, and from the component style reference for the instrument
 * pair. Nothing outside this file may hard-code a brand value: a brand
 * change has to be one edit here.
 *
 * Colour has two tiers, and they are not interchangeable:
 *   - Chrome speaks with ONE saturated voice, --accent.
 *   - Instruments additionally distinguish covered ground (--progress,
 *     yellow) from the live value (--current-*, orange). Neither is ever
 *     a background wash.
 */

/* --- typefaces ---------------------------------------------------------
 * Self-hosted: the app is local-first and must look identical offline.
 * Instrument Sans is the variable cut so headlines can broaden on the
 * `wdth` axis, and the brand's second voice is a true italic from the
 * same family rather than a second typeface.
 * Both faces are SIL Open Font License — see NOTICE.
 */

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("/static/fonts/instrument-sans-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Instrument Sans";
  font-style: italic;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("/static/fonts/instrument-sans-latin-italic.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
}

:root {
  /* --- surfaces & ink ------------------------------------------------ */
  --face: #050607;
  --face-raised: #111316;
  --rim: #34383c;
  --rim-light: #494e52;

  --text: #f0f0ee;
  --text-bright: #ffffff;
  --text-secondary: #d0d0cd;
  --muted: #999b9c;
  --future: #5c5f61;

  /* Panels sit on the face as a translucent lift, never as a shadow:
     depth comes from background and border, per the brand's no-shadow
     rule. */
  --panel: rgba(5, 6, 7, 0.5);
  --panel-raised: rgba(17, 19, 22, 0.72);
  --hairline: rgba(240, 240, 238, 0.14);

  /* Over the 3D world: --overlay backs floating panels, --scrim is the
     foot of the HUD gradient. Both are the face at alpha, so cockpit
     chrome never introduces a second dark. */
  --overlay: rgba(5, 6, 7, 0.94);
  --scrim: rgba(5, 6, 7, 0.86);

  /* The cockpit's edge: a soft fall-off rather than a frame, so the eye
     goes to the centre and the generated world's horizon seam does not
     run hard into the corner. Held whole, because it is one effect. */
  --vignette: radial-gradient(
    ellipse at 50% 46%,
    transparent 34%,
    rgba(5, 6, 7, 0.34) 76%,
    rgba(5, 6, 7, 0.72) 100%
  );

  /* --- accent (chrome: the only saturated voice) --------------------- */
  --accent: #ff8d43;
  --accent-bright: #ff9f5e;
  --accent-deep: #e2670f;
  --accent-glow: rgba(255, 141, 67, 0.16);
  --danger: #ff927d;

  /* --- instruments (second tier — dial, pill, elevation strip) ------- */
  --progress: #f2e887;
  --current-start: #ff8d43;
  --current-end: #ffc39d;

  /* --- brand mark -----------------------------------------------------
   * Pair 28 introduces roles, not new values. These aliases keep the
   * production mark and its single-disc indicators readable while the
   * existing accent and progress tokens remain the source of truth.
   */
  --brand-primary: var(--accent);
  --brand-companion: var(--progress);

  --dial-bezel-hi: #30343a;
  --dial-bezel-lo: #262a2e;
  --dial-core: #070809;
  --dial-arc: #43464a;
  /* The needle sits on its own shadow — that pair is what makes it read
     as a machined part rather than a rotated rectangle. */
  --dial-needle-shadow: rgba(0, 0, 0, 0.52);

  /* --- type ---------------------------------------------------------- */
  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fixed scale, not the landing page's fluid clamps: this is a product
     UI read at arm's length, so density beats fluidity. Negative tracking
     grows with size, matching the brand's headline treatment. */
  --text-display: 2.75rem;
  --text-title: 2rem;
  --text-heading: 1.375rem;
  --text-panel: 1.125rem;
  --text-body: 0.95rem;
  --text-small: 0.85rem;
  --text-label: 0.65rem;

  /* The wordmark sits off the scale on purpose — it is a mark, not a
     heading — but the spec fixes its size and tracking, so both live here
     and nowhere else. */
  --text-wordmark: 1.35rem;

  --tracking-display: -0.045em;
  --tracking-title: -0.035em;
  --tracking-heading: -0.025em;
  --tracking-body: -0.012em;
  /* Two mono trackings, and they are not interchangeable: --tracking-label
     spaces a word out into a label, --tracking-meta keeps mono meta text
     readable as a phrase (a chart peak, a device status, a scale mark). */
  --tracking-label: 0.18em;
  --tracking-meta: 0.08em;
  --tracking-wordmark: -0.055em;

  --weight-regular: 400;
  --weight-medium: 550;
  --weight-strong: 620;
  --weight-wordmark: 650;

  --leading-tight: 1.1;
  --leading-snug: 1.35;
  --leading-body: 1.55;

  /* --- space (4px base) ---------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* --- layout --------------------------------------------------------
   * --content-max matches the landing page's 90rem and the product layout
   * rules' 1440px — they agree, so there is one number.
   * Every page aligns to this container; nothing sits at a natural width.
   */
  --content-max: 90rem;
  --page-padding: clamp(1.25rem, 4vw, 4.75rem);
  --grid-gap: 1.5rem;
  --header-height: 4.5rem;

  /* --- shape ---------------------------------------------------------- */
  --radius-card: 1.5rem;
  --radius-control: 0.75rem;
  --radius-tight: 0.5rem;
  --radius-pill: 999px;

  /* --- motion ---------------------------------------------------------
   * Slow and functional. Backgrounds may drift; instruments move only
   * when their value changes.
   */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 140ms;
  --dur-base: 180ms;
  --dur-slow: 340ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur-base: 0.01ms;
    --dur-slow: 0.01ms;
  }
}