/*
 * Design tokens for the Siptych landing page.
 *
 * This is the ONLY place where raw colours, sizes and font stacks live.
 * Components in site.css reference these custom properties and nothing else,
 * so a redesign starts (and often ends) in this file.
 */
/* Self-hosted faces (latin subset, variable). See assets/fonts/README.md. */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("/assets/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-matched fallbacks: text set in these while the WOFF2 loads occupies
   almost the same space, which keeps layout shift close to zero. */
@font-face {
  font-family: "Bricolage Grotesque Fallback";
  src: local("Helvetica Neue Bold"), local("Arial Bold"), local("Arial");
  size-adjust: 101%;
  ascent-override: 93%;
  descent-override: 23%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Inter Fallback";
  src: local("Helvetica Neue"), local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

:root {
  /* Palette: warm paper, espresso ink, one mint accent for "the market". */
  --color-bg: #faf6ef;
  --color-surface: #ffffff;
  --color-surface-alt: #f1eadf;
  --color-ink: #2a221b;
  --color-ink-muted: #6b5f55;
  --color-line: #e3d9ca;
  --color-accent: #1f8a6a;
  --color-accent-ink: #ffffff;
  --color-accent-soft: #d8efe6;
  --color-up: #1f8a6a;
  --color-down: #c4553d;

  /* Dog fur colours used by the SVG placeholder illustrations. */
  --dog-fur-ginger: #d9904f;
  --dog-fur-cocoa: #6b4426;
  --dog-fur-cream: #efe0c3;
  --dog-fur-charcoal: #3c3a3a;
  --dog-nose: #2a221b;
  --dog-eye: #2a221b;
  --dog-cheek: #f2b8a2;

  /* Type: Bricolage Grotesque for display, Inter for body, mono for the ticker. */
  --font-display: "Bricolage Grotesque", "Bricolage Grotesque Fallback",
    "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --weight-body: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-display: 700;
  --text-xs: 0.8rem;
  --text-sm: 0.9rem;
  --text-base: 1rem;
  --text-lg: 1.2rem;
  --text-xl: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem);
  --text-2xl: clamp(2.5rem, 1.6rem + 3.8vw, 4.25rem);
  --leading-tight: 1.04;
  --leading-body: 1.55;
  --tracking-display: -0.025em;
  --tracking-tight: -0.005em;
  --tracking-caps: 0.06em;

  /* Spacing scale. */
  --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: 4.5rem;

  /* Shape and layout. */
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(42, 34, 27, 0.06), 0 8px 24px rgba(42, 34, 27, 0.06);
  --content-width: 68rem;
  --gutter: var(--space-4);
}

@media (min-width: 48em) {
  :root {
    --gutter: var(--space-6);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1b1714;
    --color-surface: #251f1b;
    --color-surface-alt: #2d2621;
    --color-ink: #f3ece2;
    --color-ink-muted: #b8aa9b;
    --color-line: #3b322b;
    --color-accent: #3fb995;
    --color-accent-ink: #10231c;
    --color-accent-soft: #1f3a31;
    --dog-nose: #f3ece2;
    --dog-eye: #f3ece2;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.3);
  }
}