/* The site's one home for visual values (DR-014's seam, carried to the site).
   Every colour, face and radius the page uses is a custom property here; no
   other file on the site may state one.

   The values between the sync markers are GENERATED from app/globals.css by
   scripts/sync-site-tokens.mjs — never edit them by hand. When the app
   re-skins, run the script and the page, hero image included, follows without
   touching markup.

   Dark follows the system setting, as the app does. Dark is the design; light
   is its derivation. */

/* The app's own faces, served from this origin. */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url("fonts/newsreader-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/geist-latin.woff2") format("woff2");
}

/* Metric-matched stand-ins (the overrides next/font computes for the app), so
   text holds its place while a face loads and nothing jumps when it lands. */
@font-face {
  font-family: "Newsreader Fallback";
  src: local("Times New Roman");
  ascent-override: 69.68%;
  descent-override: 25.12%;
  line-gap-override: 0%;
  size-adjust: 105.48%;
}

@font-face {
  font-family: "Geist Fallback";
  src: local("Arial");
  ascent-override: 95.94%;
  descent-override: 28.16%;
  line-gap-override: 0%;
  size-adjust: 104.76%;
}

:root {
  color-scheme: light dark;

  --font-sans: "Geist", "Geist Fallback", ui-sans-serif, system-ui, sans-serif;
  --font-heading: "Newsreader", "Newsreader Fallback", ui-serif, Georgia, serif;

  /* Site-only, the hero's phone outline: its corner, its screen's corner, and
     the alpha ramp it runs off through (a mask, so the same in both schemes). */
  --hero-phone-radius: 3.25rem;
  --hero-screen-radius: 2.625rem;
  --hero-runoff: linear-gradient(black 82%, transparent);

  /* sync:light:begin */
  --radius: 0.625rem;
  --background: oklch(0.981 0.005 95);
  --foreground: oklch(0.185 0.008 95);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.185 0.008 95);
  --muted: oklch(0.955 0.007 95);
  --muted-foreground: oklch(0.535 0.012 95);
  --destructive: oklch(0.455 0.135 32);
  --border: oklch(0.905 0.010 95);
  --input: oklch(0.858 0.014 92);
  --ring: oklch(0.615 0.088 80);
  --brand: oklch(0.615 0.088 80);
  --brand-foreground: oklch(0.981 0.005 95);
  --class-cash: oklch(0.62 0.075 250);
  --class-public: oklch(0.62 0.075 155);
  --class-crypto: oklch(0.62 0.075 300);
  --class-metals: oklch(0.62 0.075 200);
  --class-private: oklch(0.62 0.075 340);
  --class-realestate: oklch(0.62 0.075 25);
  --class-collectibles: oklch(0.62 0.075 120);
  /* sync:light:end */
}

@media (prefers-color-scheme: dark) {
  :root {
    /* sync:dark:begin */
    --background: oklch(0.145 0.004 100);
    --foreground: oklch(0.951 0.008 95);
    --card: oklch(0.185 0.008 100);
    --card-foreground: oklch(0.951 0.008 95);
    --muted: oklch(0.215 0.005 100);
    --muted-foreground: oklch(0.620 0.012 95);
    --destructive: oklch(0.720 0.110 35);
    --border: oklch(0.215 0.005 100);
    --input: oklch(0.260 0.006 100);
    --ring: oklch(0.730 0.090 85);
    --brand: oklch(0.730 0.090 85);
    --brand-foreground: oklch(0.145 0.004 100);
    --class-cash: oklch(0.75 0.05 250);
    --class-public: oklch(0.75 0.05 155);
    --class-crypto: oklch(0.75 0.05 300);
    --class-metals: oklch(0.75 0.05 200);
    --class-private: oklch(0.75 0.05 340);
    --class-realestate: oklch(0.75 0.05 25);
    --class-collectibles: oklch(0.75 0.05 120);
    /* sync:dark:end */
  }
}