/* Remi design system tokens, copied from colors_and_type.css.
   Only the tokens this page uses. Values are unchanged from the source.
   Paper (light) is the default. Ink (dark) applies when the page sets
   data-theme="ink" or when the system prefers dark and the page has not
   asked for Paper. The masthead (.s-ink-deep) is Ink in both themes. */

:root{
  --font-sans:"DM Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --radius-xs:8px;
  --radius-sm:10px;
  --radius-md:13px;
  --radius-lg:18px;
  --radius-pill:999px;

  --fs-h6:1.1rem;
  --fs-body1:.9375rem;
  --fs-overline:.7rem;
  --fs-lead:clamp(1.05rem,1rem + .45vw,1.3rem);

  --ls-snug:-.014em;
  --ls-label:.07em;
  --ls-display:-.034em;
  --ls-tag:.18em;

  --container-wide:1500px;
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* Paper */
:root,
:root[data-theme="paper"]{
  color-scheme:light;

  --remi-accent:#e8576a;
  --remi-accent-rgb:232,87,106;
  --remi-accent-dark:#c83f51;
  --remi-accent-soft:#fbe9e6;
  --remi-accent-border:#f0cfca;

  --remi-ink:#2a2320;
  --remi-ink-rgb:42,35,32;
  --remi-ink-soft:#574d45;
  --remi-muted:#8a7d6f;
  --remi-line:#e7ddcd;
  --remi-line-soft:#f0e9dd;

  --remi-canvas:#f4eee3;
  --remi-surface:#fdfaf4;
  --remi-surface-2:#efe8db;
  --remi-surface-3:#f7f2e9;

  --remi-success:#4f7d5e; --remi-success-soft:#e8f0e9;
  --remi-warning:#a87a3c; --remi-warning-soft:#f4ecda;
  --remi-danger:#b3564e;  --remi-danger-soft:#f6e7e2;

  --ty-bank:#5a6aa0; --ty-bank-soft:#eaedf6;

  --remi-bg:
    radial-gradient(1200px 520px at 82% -12%,rgba(232,87,106,.10),transparent 60%),
    radial-gradient(900px 600px at -10% 116%,rgba(120,92,60,.07),transparent 60%),
    linear-gradient(180deg,#f6f0e6 0%,#f1ebdf 100%);

  --focus-ring:0 0 0 3px rgba(232,87,106,.16);
}

/* Ink, chosen by the page, and always inside the dark masthead */
:root[data-theme="ink"],
.s-ink-deep{
  color-scheme:dark;

  --remi-accent:#f4727c;
  --remi-accent-rgb:244,114,124;
  --remi-accent-dark:#e8576a;
  --remi-accent-soft:#38231f;
  --remi-accent-border:#4d2f2a;

  --remi-ink:#f3ece0;
  --remi-ink-rgb:243,236,224;
  --remi-ink-soft:#cdc1b1;
  --remi-muted:#9c9082;
  --remi-line:#392f28;
  --remi-line-soft:#2f2722;

  --remi-canvas:#1b1714;
  --remi-surface:#241f1b;
  --remi-surface-2:#2d2722;
  --remi-surface-3:#282320;

  --remi-success:#74b187; --remi-success-soft:#1e2c24;
  --remi-warning:#cda063; --remi-warning-soft:#322a1b;
  --remi-danger:#d9847b;  --remi-danger-soft:#392420;

  --ty-bank:#8c9ad2; --ty-bank-soft:#232839;

  --remi-bg:
    radial-gradient(1200px 520px at 82% -12%,rgba(244,114,124,.10),transparent 60%),
    radial-gradient(900px 600px at -10% 116%,rgba(120,92,60,.10),transparent 60%),
    linear-gradient(180deg,#1d1916 0%,#181412 100%);

  --focus-ring:0 0 0 3px rgba(244,114,124,.20);
}

/* Ink, chosen by the system. Same values as above. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="paper"]){
    color-scheme:dark;

    --remi-accent:#f4727c;
    --remi-accent-rgb:244,114,124;
    --remi-accent-dark:#e8576a;
    --remi-accent-soft:#38231f;
    --remi-accent-border:#4d2f2a;

    --remi-ink:#f3ece0;
    --remi-ink-rgb:243,236,224;
    --remi-ink-soft:#cdc1b1;
    --remi-muted:#9c9082;
    --remi-line:#392f28;
    --remi-line-soft:#2f2722;

    --remi-canvas:#1b1714;
    --remi-surface:#241f1b;
    --remi-surface-2:#2d2722;
    --remi-surface-3:#282320;

    --remi-success:#74b187; --remi-success-soft:#1e2c24;
    --remi-warning:#cda063; --remi-warning-soft:#322a1b;
    --remi-danger:#d9847b;  --remi-danger-soft:#392420;

    --ty-bank:#8c9ad2; --ty-bank-soft:#232839;

    --remi-bg:
      radial-gradient(1200px 520px at 82% -12%,rgba(244,114,124,.10),transparent 60%),
      radial-gradient(900px 600px at -10% 116%,rgba(120,92,60,.10),transparent 60%),
      linear-gradient(180deg,#1d1916 0%,#181412 100%);

    --focus-ring:0 0 0 3px rgba(244,114,124,.20);
  }
}