/* FigSync site tokens: the one source for the home page (styles.css) and the sub-pages (pages.css).
   Warm paper or night ground, near-black ink, one yellow accent for membership and savings only, Geist and Geist Mono,
   the Archivo Black wordmark. The full spec, with the type scale, radii and breakpoints, is landing/DESIGN.md.
   Theme: the home page and /privacy set data-theme before first paint; a page without it (the iOS pages run no
   script) follows the system. */

@font-face { font-family: "Geist"; src: url("fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
/* the FigSync wordmark: Archivo Black, the face the plugin sets its title in (landing --font-logo) */
@font-face { font-family: "Archivo Black"; src: url("fonts/ArchivoBlack-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --font: "Geist", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, "PingFang SC", monospace;

  --ground: #F4F3EF;
  --ground-90: rgba(244, 243, 239, .9);
  --surface: #FFFFFF;
  --surface-2: #EAE8E3;
  --surface-3: #E0DDD6;
  --ink: #0C0C0D;
  --ink-2: #55544F;
  --ink-3: #6B6964;
  --rule: rgba(12, 12, 13, .11);
  --rule-2: rgba(12, 12, 13, .2);
  --rail: #D6D3CC;
  --dot-off: rgba(12, 12, 13, .3);
  --dot-track: rgba(12, 12, 13, .2);
  /* the one accent: FigSync's membership yellow (landing --membership-yellow), used for membership and savings only */
  --accent: #FFA800;
  --accent-hi: #FFB938;
  --accent-ink: #1F1300;
  --accent-text: #835200;
  --accent-soft: rgba(255, 168, 0, .14);
  --accent-line: rgba(214, 140, 0, .5);
  --pop-shadow: 0 1px 2px rgba(40, 30, 15, .06), 0 18px 48px -12px rgba(40, 30, 15, .22);
  --win-shadow: 0 60px 110px -50px rgba(40, 30, 15, .42), 0 24px 48px -28px rgba(40, 30, 15, .3);
  --shot-shadow: 0 40px 80px -48px rgba(40, 30, 15, .4);

  --ease: cubic-bezier(.32, .72, 0, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* One container for the whole page: content never grows past 1120px, so on a 2× screen the hero film (1364 px) and the
     feature recordings (1600 px) are shown at or below their own pixel size and stay sharp; the side margins take the rest. */
  --wrap: 1120px;
  --wrap-wide: 1120px;
  --wrap-narrow: 1120px;
  --gutter: clamp(20px, 4.2vw, 64px);
  --hdr: 64px;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --ground: #0D0D0E;
  --ground-90: rgba(13, 13, 14, .82);
  --surface: #18181A;
  --surface-2: #1F1F22;
  --surface-3: #2B2B2F;
  --ink: #F3F2EF;
  --ink-2: #B6B4AE;
  --ink-3: #96948E;
  --rule: rgba(243, 242, 239, .12);
  --rule-2: rgba(243, 242, 239, .22);
  --rail: #33322F;
  --accent-text: #FFC766;
  --accent-soft: rgba(255, 168, 0, .12);
  --accent-line: rgba(255, 168, 0, .38);
  --dot-off: rgba(243, 242, 239, .32);
  --dot-track: rgba(243, 242, 239, .22);
  --pop-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 24px 60px -16px rgba(0, 0, 0, .7);
  --win-shadow: 0 60px 120px -50px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .06);
  --shot-shadow: 0 40px 80px -48px rgba(0, 0, 0, .9);
  color-scheme: dark;
}

/* No data-theme (no script ran): follow the system. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --ground: #0D0D0E;
    --ground-90: rgba(13, 13, 14, .82);
    --surface: #18181A;
    --surface-2: #1F1F22;
    --surface-3: #2B2B2F;
    --ink: #F3F2EF;
    --ink-2: #B6B4AE;
    --ink-3: #96948E;
    --rule: rgba(243, 242, 239, .12);
    --rule-2: rgba(243, 242, 239, .22);
    --rail: #33322F;
    --accent-text: #FFC766;
    --accent-soft: rgba(255, 168, 0, .12);
    --accent-line: rgba(255, 168, 0, .38);
    --dot-off: rgba(243, 242, 239, .32);
    --dot-track: rgba(243, 242, 239, .22);
    --pop-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 24px 60px -16px rgba(0, 0, 0, .7);
    --win-shadow: 0 60px 120px -50px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .06);
    --shot-shadow: 0 40px 80px -48px rgba(0, 0, 0, .9);
    color-scheme: dark;
  }
}