/* Weirdos design tokens. Fonts load from Google Fonts (Fraunces) and Fontshare (Sentient). */
:root{
  /* color */
  --paper:#FFFFFF;      /* the surface */
  --ink:#1F1B1A;        /* type and the mark. never a surface */
  --gris:#6F6764;       /* secondary type. 5.5:1 on paper */
  --placeholder:#8A837F;
  --error:#C4321B;      /* text and borders only, never a fill. 5.9:1 on paper */
  --hair:#E3E3E3;       /* hairlines, disabled fills */
  --mist:#F4F4F4;       /* disabled and table stripe only */
  --mar:#1279C7;        /* action. buttons, links. white type on it, 4.6:1 */
  --mar-hover:#0F6DB4;
  --mar-press:#0C619F;
  --mar-text:#1279C7;   /* links and info text on paper */
  --agua:#2EDBCF;       /* the shallows. success, the live tag. ink type on it */
  --coral:#FF7F63;      /* the sunset. focus, warning, the soon tag. ink type on it */
  --bugambilia:#F2569E; /* the bougainvillea. highlight, the new tag. ink type on it */

  /* type */
  --display:"Fraunces",Georgia,serif;
  --text:"Sentient",Georgia,serif;
  --wonk:"SOFT" 100,"WONK" 1;
  --t-hero:300 96px/1 var(--display);
  --t-h1:300 56px/1.05 var(--display);
  --t-h2:300 40px/1.1 var(--display);
  --t-h3:400 28px/1.2 var(--display);
  --t-lead:400 19px/1.55 var(--text);
  --t-body:400 17px/1.55 var(--text);
  --t-small:400 15px/1.5 var(--text);
  --t-caption:400 13px/1.45 var(--text);
  --t-ui:500 15px/1 var(--text);
  --t-ui-sm:500 13px/1 var(--text);
  --t-label:500 12px/1 var(--text);
  --t-chip:700 13px/1 var(--text);

  /* space, 4 base */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;

  /* shape */
  --r-sm:8px;--r-md:14px;--r-lg:20px;--r-pill:999px;
  --shadow-1:0 1px 2px rgba(31,27,26,.06),0 4px 12px rgba(31,27,26,.06);
  --shadow-2:0 8px 24px rgba(31,27,26,.10),0 2px 6px rgba(31,27,26,.06);

  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  --fast:150ms;--base:250ms;

  /* controls */
  --ctl-h:46px;--ctl-h-sm:36px;--ctl-h-lg:56px;
  --focus:0 0 0 3px var(--paper),0 0 0 6px var(--coral);

  /* the mesh. surfaces, covers, one hero backdrop. never under the mark */
  --mesh:radial-gradient(90% 90% at 0% 100%,var(--agua) 0%,transparent 65%),linear-gradient(120deg in oklch,var(--mar) 0%,var(--bugambilia) 60%,var(--coral) 100%);
  --mesh-soft:radial-gradient(90% 90% at 0% 100%,var(--agua) 0%,transparent 65%),linear-gradient(120deg in oklch,var(--mar) 0%,var(--bugambilia) 60%,var(--coral) 100%);
  --on-mesh:var(--paper);  /* content on the mesh sits in a paper panel */
  color-scheme:light;
}

/* dark. a warm near black, type goes to paper, the four colors hold */
:root[data-theme="dark"]{
  --paper:#151313;
  --ink:#F3EFEC;
  --gris:#A9A29E;
  --hair:#2E2A29;
  --mist:#211E1D;
  --placeholder:#7E7773;
  --error:#FF8A76;
  --mar-text:#66B4F2;   /* links on the dark surface, 7.0:1 */
  --shadow-1:0 1px 2px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.35);
  --shadow-2:0 8px 24px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.35);
  --focus:0 0 0 3px var(--paper),0 0 0 6px var(--coral);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#151313;--ink:#F3EFEC;--gris:#A9A29E;--hair:#2E2A29;--mist:#211E1D;--placeholder:#7E7773;--error:#FF8A76;--mar-text:#66B4F2;
    --shadow-1:0 1px 2px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.35);--shadow-2:0 8px 24px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.35);
    color-scheme:dark;
  }
}
/* the mark and the fills always take the true ink, whatever the theme */
:root{--ink-true:#1F1B1A;--paper-true:#FFFFFF}
@media (prefers-reduced-motion:reduce){
  :root{--fast:0ms;--base:0ms}
  *,*::before,*::after{animation-duration:0s!important;transition-duration:0s!important}
}