/* Quietly Made design tokens — company site chrome.
   See DESIGN-TOKENS.md. Mira product pages keep their own branding. */

@font-face {
  font-family: Manrope;
  src: url("/assets/fonts/manrope-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 103%;
  ascent-override: 96%;
  descent-override: 24%;
  line-gap-override: 0%;
}

:root {
  --ink: #263b38;
  --paper: #f7f5ef;

  --bg: var(--paper);
  --text: var(--ink);
  --text-mid: color-mix(in srgb, var(--ink) 72%, var(--paper));
  --text-dim: color-mix(in srgb, var(--ink) 52%, var(--paper));
  --rule: color-mix(in srgb, var(--ink) 16%, transparent);
  --accent: var(--ink);

  --btn-bg: var(--ink);
  --btn-fg: var(--paper);

  --font: Manrope, "Manrope Fallback", ui-sans-serif, system-ui, sans-serif;
  --weight-body: 400;
  --weight-ui: 500;
  --weight-heading: 600;
  --tracking-heading: -0.02em;
  --leading-body: 1.6;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --page: 1.25rem;
  --touch: 2.75rem;
  --mast-brand: clamp(7.25rem, 34vw, 8.5rem);
  /* Artboard translate(12) on the 720-wide outlined wordmark — not the Q sidebearing. */
  --wordmark-ink-start: calc(12 / 720);
  --radius: 0.25rem;
  --sheet: 58rem;
  --measure: 40rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: var(--ink);
  --text: var(--paper);
  --text-mid: color-mix(in srgb, var(--paper) 78%, var(--ink));
  --text-dim: color-mix(in srgb, var(--paper) 58%, var(--ink));
  --rule: color-mix(in srgb, var(--paper) 18%, transparent);
  --accent: var(--paper);
  --btn-bg: var(--paper);
  --btn-fg: var(--ink);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--ink);
    --text: var(--paper);
    --text-mid: color-mix(in srgb, var(--paper) 78%, var(--ink));
    --text-dim: color-mix(in srgb, var(--paper) 58%, var(--ink));
    --rule: color-mix(in srgb, var(--paper) 18%, transparent);
    --accent: var(--paper);
    --btn-bg: var(--paper);
    --btn-fg: var(--ink);
    color-scheme: dark;
  }
}