/* Marjn site tokens. Copied from the demo (tare-demo/tokens.css), trimmed to what the site uses.
   Identity "Kept dot": ink, paper, one gold dot per view. Gold is never a warning colour. */
@font-face {
  font-family: "Familjen Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/familjen-grotesk-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;
}

:root {
  color-scheme: light;

  --ink: #17181B;
  --gold: #B8892B;

  --paper: #FFFFFF;
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F6F7F8;
  --surface-3: #ECEDF0;
  --line: #E3E5E9;
  --line-2: #D2D5DB;

  --text: #17181B;
  --text-2: #4A4E57;
  --text-3: #5F646E;
  --on-ink: #FFFFFF;

  --profit: #1F7748;
  --loss: #A62C25;
  --bar: #9BA1AB;
  --focus: #3A5BA8;

  /* The closing band stays ink in both themes */
  --band-bg: #17181B;
  --band-text: #FFFFFF;
  --band-text-2: #B6B9C0;
  --band-btn: #FFFFFF;
  --band-btn-ink: #17181B;

  --shadow-1: 0 1px 2px rgba(23, 24, 27, 0.05);
  --shadow-2: 0 1px 2px rgba(23, 24, 27, 0.05), 0 12px 32px -12px rgba(23, 24, 27, 0.16);

  --font: "Familjen Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Type ramp (1.25+ steps) */
  --fs-sm: 0.875rem;
  --fs-body: 1.0625rem;
  --fs-lead: 1.25rem;
  --fs-h3: 1.375rem;
  --fs-h2: clamp(1.875rem, 1.3rem + 2.4vw, 2.75rem);
  --fs-h1: clamp(2.5rem, 1.6rem + 4.2vw, 4.5rem);

  /* Radius scale */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ink: #ECEDEF;
    --gold: #D9AE4F;
    --bg: #0F1012;
    --surface: #17181B;
    --surface-2: #17181B;
    --surface-3: #25272C;
    --line: #2A2D33;
    --line-2: #3A3D45;
    --text: #ECEDEF;
    --text-2: #B6B9C0;
    --text-3: #9EA2AC;
    --on-ink: #17181B;
    --profit: #7BDDA2;
    --loss: #EE6F63;
    --bar: #5A5F69;
    --focus: #8FAAF0;
    --band-bg: #1D1F23;
    --band-text: #ECEDEF;
    --band-text-2: #B6B9C0;
    --band-btn: #ECEDEF;
    --band-btn-ink: #17181B;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -12px rgba(0, 0, 0, 0.6);
  }
}