/* Fonts, the colour tokens, screenshot frames and long-form legal text. Everything else is Tailwind. */

/* Geist, self-hosted (SIL Open Font License, see assets/fonts/OFL.txt). Variable: one file, all weights. */
@font-face { font-family: "Geist"; src: url("fonts/Geist-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

/*
 * The app's colours (Packages/EverySignKit/.../DesignSystem/Theme.swift) as "r g b" triples, so
 * Tailwind can add opacity. Light first, then the app's dark values.
 */
:root {
  color-scheme: light dark;
  --page: 255 255 255;        /* panel */
  --ground: 247 247 249;      /* ground: alternate sections */
  --card: 255 255 255;
  --fill: 244 244 245;
  --ink: 24 24 27;
  --body: 82 82 91;
  --muted: 113 113 122;
  --faint: 161 161 170;
  --line: 228 228 231;
  --hairline: 240 240 242;
  --paper: 255 255 255;       /* documents are paper in both modes */
  --paper-line: 228 228 231;
  --accent: 29 78 216;        /* #1D4ED8, fountain-pen blue */
  --accent-hover: 30 64 175;
  --accent-text: 29 78 216;
  --accent-soft: 239 244 255;
  --accent-line: 191 219 254;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: 20 20 22;
    --ground: 28 28 31;
    --card: 42 42 47;
    --fill: 38 38 42;
    --ink: 244 244 245;
    --body: 196 196 204;
    --muted: 161 161 170;
    --faint: 113 113 122;
    --line: 52 52 58;
    --hairline: 42 42 47;
    --paper: 244 244 241;
    --paper-line: 212 212 208;
    --accent-hover: 37 99 235;
    --accent-text: 147 197 253;
    --accent-soft: 23 37 84;
    --accent-line: 30 58 138;
  }
}

html { background: rgb(var(--page)); }
[hidden] { display: none !important; }
details > summary::-webkit-details-marker { display: none; }

/*
 * A product screenshot: 16:10, rounded, hairline border. Behind the image sits a neutral panel with
 * a blank sheet, which is all you see when the image is missing.
 */
.shot {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgb(var(--line));
  background:
    linear-gradient(rgb(var(--paper-line)), rgb(var(--paper-line))) 50% 38% / 30% 2px no-repeat,
    linear-gradient(rgb(var(--paper-line)), rgb(var(--paper-line))) 50% 46% / 30% 2px no-repeat,
    linear-gradient(rgb(var(--paper-line)), rgb(var(--paper-line))) 47% 54% / 24% 2px no-repeat,
    linear-gradient(rgb(var(--paper)), rgb(var(--paper))) 50% 50% / 38% 72% no-repeat,
    rgb(var(--fill));
  box-shadow: 0 30px 60px -40px rgb(0 0 0 / .35);
}
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Long-form pages: privacy, terms, refunds. */
.legal .eyebrow { font: 500 13px "Geist Mono", ui-monospace, monospace; letter-spacing: .02em; text-transform: uppercase; color: rgb(var(--accent-text)); }
.legal h1 { margin-top: .75rem; font-size: clamp(2.25rem, 5vw, 3rem); font-weight: 700; line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
.legal h2 { margin-top: 2.5rem; font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em; }
.legal p, .legal li { margin-top: .85rem; font-size: 1.0625rem; line-height: 1.75; color: rgb(var(--body)); max-width: 68ch; }
.legal ul { list-style: disc; padding-left: 1.25rem; }
.legal .fine { font-size: .875rem; color: rgb(var(--muted)); }
.legal a { color: rgb(var(--accent-text)); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal strong { color: rgb(var(--ink)); }
.legal code { font: .9em "Geist Mono", ui-monospace, monospace; overflow-wrap: anywhere; }